リング図を作りたいですか？ ImageFilledarcでリング画像効果を作成するための完全な手順を共有する

M66 2025-06-27

Web開発では、グラフディスプレイはユーザーのインタラクティブエクスペリエンスの重要な部分です。一般的なチャートタイプとして、リングチャートは、簡潔で直感的な表示効果を備えたデータ視覚化シナリオで広く使用されています。 PHPでリンググラフを生成したい場合は、 ImageFilledArc関数があなたにとって良いヘルパーになります。以下に、PHPでGDライブラリを使用して、一連のステップを通じてリンググラフ効果を作成する方法をお勧めします。

1。環境準備

まず、 ImageFilledArcはGDライブラリの一部であるため、PHP環境がGDライブラリを既にサポートしていることを確認する必要があります。次のコードに従って、GDライブラリが有効になっているかどうかを確認できます。

 <span><span><span class="hljs-meta">&lt;?php</span></span><span>
</span><span><span class="hljs-keyword">if</span></span><span> (</span><span><span class="hljs-title function_ invoke__">function_exists</span></span><span>(</span><span><span class="hljs-string">'gd_info'</span></span><span>)) {
    </span><span><span class="hljs-keyword">echo</span></span><span> </span><span><span class="hljs-string">"GDライブラリが有効になっています"</span></span><span>;
} </span><span><span class="hljs-keyword">else</span></span><span> {
    </span><span><span class="hljs-keyword">echo</span></span><span> </span><span><span class="hljs-string">"GDライブラリが有効になっていない"</span></span><span>;
}
</span><span><span class="hljs-meta">?&gt;</span></span><span>
</span></span>

GDライブラリが有効になっていない場合は、インストールして有効にする必要があります。通常、PHP構成ファイルで調整するか、サーバーに関連する拡張機能をインストールします。

2。基本的な画像キャンバスを作成します

GDライブラリを使用する場合、最初のステップは通常、キャンバスを作成することです。キャンバスは、 ImageCreateTrueColor（）関数を介して作成できます。これにより、空白のキャンバスオブジェクトが返され、さまざまな描画操作を実行できます。

 <span><span><span class="hljs-meta">&lt;?php</span></span><span>
</span><span><span class="hljs-comment">// キャンバスの幅と高さを設定します</span></span><span>
</span><span><span class="hljs-variable">$width</span></span><span> = </span><span><span class="hljs-number">400</span></span><span>;
</span><span><span class="hljs-variable">$height</span></span><span> = </span><span><span class="hljs-number">400</span></span><span>;

</span><span><span class="hljs-comment">// キャンバスを作成します</span></span><span>
</span><span><span class="hljs-variable">$image</span></span><span> = </span><span><span class="hljs-title function_ invoke__">imagecreatetruecolor</span></span><span>(</span><span><span class="hljs-variable">$width</span></span><span>, </span><span><span class="hljs-variable">$height</span></span><span>);

</span><span><span class="hljs-comment">// 背景を色で満たします</span></span><span>
</span><span><span class="hljs-variable">$backgroundColor</span></span><span> = </span><span><span class="hljs-title function_ invoke__">imagecolorallocate</span></span><span>(</span><span><span class="hljs-variable">$image</span></span><span>, </span><span><span class="hljs-number">255</span></span><span>, </span><span><span class="hljs-number">255</span></span><span>, </span><span><span class="hljs-number">255</span></span><span>); </span><span><span class="hljs-comment">// 白</span></span><span>
</span><span><span class="hljs-title function_ invoke__">imagefill</span></span><span>(</span><span><span class="hljs-variable">$image</span></span><span>, </span><span><span class="hljs-number">0</span></span><span>, </span><span><span class="hljs-number">0</span></span><span>, </span><span><span class="hljs-variable">$backgroundColor</span></span><span>);
</span><span><span class="hljs-meta">?&gt;</span></span><span>
</span></span>

3.リング図を描きます

次に、 ImageFilledArc（）関数を使用して、リンググラフを描画します。この関数は充填されたアークを引き出すことができ、異なる開始角と終了角を設定することにより、リンググラフ効果を作成します。

ImageFilledarc（）関数のパラメーター説明：

 <span><span><span class="hljs-title function_ invoke__">imagefilledarc</span></span><span>(</span><span><span class="hljs-variable">$image</span></span><span>, </span><span><span class="hljs-variable">$cx</span></span><span>, </span><span><span class="hljs-variable">$cy</span></span><span>, </span><span><span class="hljs-variable">$width</span></span><span>, </span><span><span class="hljs-variable">$height</span></span><span>, </span><span><span class="hljs-variable">$start</span></span><span>, </span><span><span class="hljs-variable">$end</span></span><span>, </span><span><span class="hljs-variable">$color</span></span><span>, </span><span><span class="hljs-variable">$style</span></span><span>);
</span></span>

$画像：Canvasリソース
$ cx、$ cy ：センター座標
$ width、$ height ：円の幅と高さ
$ start、$ end ：arcの開始と終了角度（ユニット：度）
$カラー：色の塗りつぶし
$スタイル：スタイルを描画し、 IMG_ARC_PIEを使用して塗りつぶされたアークを作成します

<span><span><span class="hljs-meta">&lt;?php</span></span><span>
</span><span><span class="hljs-comment">// 色を設定します</span></span><span>
</span><span><span class="hljs-variable">$black</span></span><span> = </span><span><span class="hljs-title function_ invoke__">imagecolorallocate</span></span><span>(</span><span><span class="hljs-variable">$image</span></span><span>, </span><span><span class="hljs-number">0</span></span><span>, </span><span><span class="hljs-number">0</span></span><span>, </span><span><span class="hljs-number">0</span></span><span>);
</span><span><span class="hljs-variable">$blue</span></span><span> = </span><span><span class="hljs-title function_ invoke__">imagecolorallocate</span></span><span>(</span><span><span class="hljs-variable">$image</span></span><span>, </span><span><span class="hljs-number">0</span></span><span>, </span><span><span class="hljs-number">0</span></span><span>, </span><span><span class="hljs-number">255</span></span><span>);
</span><span><span class="hljs-variable">$green</span></span><span> = </span><span><span class="hljs-title function_ invoke__">imagecolorallocate</span></span><span>(</span><span><span class="hljs-variable">$image</span></span><span>, </span><span><span class="hljs-number">0</span></span><span>, </span><span><span class="hljs-number">255</span></span><span>, </span><span><span class="hljs-number">0</span></span><span>);

</span><span><span class="hljs-comment">// センター座標</span></span><span>
</span><span><span class="hljs-variable">$cx</span></span><span> = </span><span><span class="hljs-variable">$width</span></span><span> / </span><span><span class="hljs-number">2</span></span><span>;
</span><span><span class="hljs-variable">$cy</span></span><span> = </span><span><span class="hljs-variable">$height</span></span><span> / </span><span><span class="hljs-number">2</span></span><span>;

</span><span><span class="hljs-comment">// リング図を描きます</span></span><span>
</span><span><span class="hljs-title function_ invoke__">imagefilledarc</span></span><span>(</span><span><span class="hljs-variable">$image</span></span><span>, </span><span><span class="hljs-variable">$cx</span></span><span>, </span><span><span class="hljs-variable">$cy</span></span><span>, </span><span><span class="hljs-number">300</span></span><span>, </span><span><span class="hljs-number">300</span></span><span>, </span><span><span class="hljs-number">0</span></span><span>, </span><span><span class="hljs-number">120</span></span><span>, </span><span><span class="hljs-variable">$blue</span></span><span>, IMG_ARC_PIE); </span><span><span class="hljs-comment">// 青い領域</span></span><span>
</span><span><span class="hljs-title function_ invoke__">imagefilledarc</span></span><span>(</span><span><span class="hljs-variable">$image</span></span><span>, </span><span><span class="hljs-variable">$cx</span></span><span>, </span><span><span class="hljs-variable">$cy</span></span><span>, </span><span><span class="hljs-number">300</span></span><span>, </span><span><span class="hljs-number">300</span></span><span>, </span><span><span class="hljs-number">120</span></span><span>, </span><span><span class="hljs-number">240</span></span><span>, </span><span><span class="hljs-variable">$green</span></span><span>, IMG_ARC_PIE); </span><span><span class="hljs-comment">// 緑の領域</span></span><span>
</span><span><span class="hljs-title function_ invoke__">imagefilledarc</span></span><span>(</span><span><span class="hljs-variable">$image</span></span><span>, </span><span><span class="hljs-variable">$cx</span></span><span>, </span><span><span class="hljs-variable">$cy</span></span><span>, </span><span><span class="hljs-number">300</span></span><span>, </span><span><span class="hljs-number">300</span></span><span>, </span><span><span class="hljs-number">240</span></span><span>, </span><span><span class="hljs-number">360</span></span><span>, </span><span><span class="hljs-variable">$black</span></span><span>, IMG_ARC_PIE); </span><span><span class="hljs-comment">// 黒い領域</span></span><span>
</span><span><span class="hljs-meta">?&gt;</span></span><span>
</span></span>

4。写真を出力して保存します

描画が終了したら、Webページに画像を直接表示するか、ファイルとして保存することを選択できます。 Header（）関数を介してコンテンツタイプを画像タイプに設定し、 ImagePng（）やImageJPeg（）などの関数を使用して画像を出力します。

 <span><span><span class="hljs-meta">&lt;?php</span></span><span>
</span><span><span class="hljs-comment">// コンテンツタイプをに設定します PNG 画像</span></span><span>
</span><span><span class="hljs-title function_ invoke__">header</span></span><span>(</span><span><span class="hljs-string">'Content-Type: image/png'</span></span><span>);

</span><span><span class="hljs-comment">// 输出画像到浏览器</span></span><span>
</span><span><span class="hljs-title function_ invoke__">imagepng</span></span><span>(</span><span><span class="hljs-variable">$image</span></span><span>);

</span><span><span class="hljs-comment">// 保存画像到文件</span></span><span>
</span><span><span class="hljs-comment">// imagepng($image, 'donut_chart.png');</span></span><span>
</span><span><span class="hljs-meta">?&gt;</span></span><span>
</span></span>

5.画像リソースを破壊します

メモリを保存するために、画像を生成した後、画像リソースを破壊することを忘れないでください。

 <span><span><span class="hljs-meta">&lt;?php</span></span><span>
</span><span><span class="hljs-title function_ invoke__">imagedestroy</span></span><span>(</span><span><span class="hljs-variable">$image</span></span><span>);
</span><span><span class="hljs-meta">?&gt;</span></span><span>
</span></span>

6.完全なコードの例

すべての手順を組み合わせて、完全なPHPリンググラフ生成コードの例を次に示します。

 <span><span><span class="hljs-meta">&lt;?php</span></span><span>
</span><span><span class="hljs-comment">// キャンバスを作成します</span></span><span>
</span><span><span class="hljs-variable">$width</span></span><span> = </span><span><span class="hljs-number">400</span></span><span>;
</span><span><span class="hljs-variable">$height</span></span><span> = </span><span><span class="hljs-number">400</span></span><span>;
</span><span><span class="hljs-variable">$image</span></span><span> = </span><span><span class="hljs-title function_ invoke__">imagecreatetruecolor</span></span><span>(</span><span><span class="hljs-variable">$width</span></span><span>, </span><span><span class="hljs-variable">$height</span></span><span>);

</span><span><span class="hljs-comment">// 背景を色で満たします</span></span><span>
</span><span><span class="hljs-variable">$backgroundColor</span></span><span> = </span><span><span class="hljs-title function_ invoke__">imagecolorallocate</span></span><span>(</span><span><span class="hljs-variable">$image</span></span><span>, </span><span><span class="hljs-number">255</span></span><span>, </span><span><span class="hljs-number">255</span></span><span>, </span><span><span class="hljs-number">255</span></span><span>); </span><span><span class="hljs-comment">// 白</span></span><span>
</span><span><span class="hljs-title function_ invoke__">imagefill</span></span><span>(</span><span><span class="hljs-variable">$image</span></span><span>, </span><span><span class="hljs-number">0</span></span><span>, </span><span><span class="hljs-number">0</span></span><span>, </span><span><span class="hljs-variable">$backgroundColor</span></span><span>);

</span><span><span class="hljs-comment">// 色を設定します</span></span><span>
</span><span><span class="hljs-variable">$black</span></span><span> = </span><span><span class="hljs-title function_ invoke__">imagecolorallocate</span></span><span>(</span><span><span class="hljs-variable">$image</span></span><span>, </span><span><span class="hljs-number">0</span></span><span>, </span><span><span class="hljs-number">0</span></span><span>, </span><span><span class="hljs-number">0</span></span><span>);
</span><span><span class="hljs-variable">$blue</span></span><span> = </span><span><span class="hljs-title function_ invoke__">imagecolorallocate</span></span><span>(</span><span><span class="hljs-variable">$image</span></span><span>, </span><span><span class="hljs-number">0</span></span><span>, </span><span><span class="hljs-number">0</span></span><span>, </span><span><span class="hljs-number">255</span></span><span>);
</span><span><span class="hljs-variable">$green</span></span><span> = </span><span><span class="hljs-title function_ invoke__">imagecolorallocate</span></span><span>(</span><span><span class="hljs-variable">$image</span></span><span>, </span><span><span class="hljs-number">0</span></span><span>, </span><span><span class="hljs-number">255</span></span><span>, </span><span><span class="hljs-number">0</span></span><span>);

</span><span><span class="hljs-comment">// センター座標</span></span><span>
</span><span><span class="hljs-variable">$cx</span></span><span> = </span><span><span class="hljs-variable">$width</span></span><span> / </span><span><span class="hljs-number">2</span></span><span>;
</span><span><span class="hljs-variable">$cy</span></span><span> = </span><span><span class="hljs-variable">$height</span></span><span> / </span><span><span class="hljs-number">2</span></span><span>;

</span><span><span class="hljs-comment">// リング図を描きます</span></span><span>
</span><span><span class="hljs-title function_ invoke__">imagefilledarc</span></span><span>(</span><span><span class="hljs-variable">$image</span></span><span>, </span><span><span class="hljs-variable">$cx</span></span><span>, </span><span><span class="hljs-variable">$cy</span></span><span>, </span><span><span class="hljs-number">300</span></span><span>, </span><span><span class="hljs-number">300</span></span><span>, </span><span><span class="hljs-number">0</span></span><span>, </span><span><span class="hljs-number">120</span></span><span>, </span><span><span class="hljs-variable">$blue</span></span><span>, IMG_ARC_PIE); </span><span><span class="hljs-comment">// 青い領域</span></span><span>
</span><span><span class="hljs-title function_ invoke__">imagefilledarc</span></span><span>(</span><span><span class="hljs-variable">$image</span></span><span>, </span><span><span class="hljs-variable">$cx</span></span><span>, </span><span><span class="hljs-variable">$cy</span></span><span>, </span><span><span class="hljs-number">300</span></span><span>, </span><span><span class="hljs-number">300</span></span><span>, </span><span><span class="hljs-number">120</span></span><span>, </span><span><span class="hljs-number">240</span></span><span>, </span><span><span class="hljs-variable">$green</span></span><span>, IMG_ARC_PIE); </span><span><span class="hljs-comment">// 緑の領域</span></span><span>
</span><span><span class="hljs-title function_ invoke__">imagefilledarc</span></span><span>(</span><span><span class="hljs-variable">$image</span></span><span>, </span><span><span class="hljs-variable">$cx</span></span><span>, </span><span><span class="hljs-variable">$cy</span></span><span>, </span><span><span class="hljs-number">300</span></span><span>, </span><span><span class="hljs-number">300</span></span><span>, </span><span><span class="hljs-number">240</span></span><span>, </span><span><span class="hljs-number">360</span></span><span>, </span><span><span class="hljs-variable">$black</span></span><span>, IMG_ARC_PIE); </span><span><span class="hljs-comment">// 黒い領域</span></span><span>

</span><span><span class="hljs-comment">// コンテンツタイプをに設定します PNG 画像</span></span><span>
</span><span><span class="hljs-title function_ invoke__">header</span></span><span>(</span><span><span class="hljs-string">'Content-Type: image/png'</span></span><span>);

</span><span><span class="hljs-comment">// 输出画像到浏览器</span></span><span>
</span><span><span class="hljs-title function_ invoke__">imagepng</span></span><span>(</span><span><span class="hljs-variable">$image</span></span><span>);

</span><span><span class="hljs-comment">// 销毁画像资源</span></span><span>
</span><span><span class="hljs-title function_ invoke__">imagedestroy</span></span><span>(</span><span><span class="hljs-variable">$image</span></span><span>);
</span><span><span class="hljs-meta">?&gt;</span></span><span>
</span></span>

7。概要

上記の手順を通じて、 ImageFilledArc関数を使用して簡単なリング図を描く方法を習得しました。ニーズを満たす循環図を作成するための実際のニーズに応じて、色、角度、サイズなどのパラメーターを調整できます。複雑なアプリケーションでは、リンググラフを動的データと組み合わせて、チャートコンテンツをリアルタイムで更新し、ユーザーエクスペリエンスを向上させることもできます。

このチュートリアルが、PHPプロジェクトでリンググラフ効果を達成し、データの視覚化機能をさらに改善できることを願っています。