想做個環形圖？用imagefilledarc 創建環形圖像效果的完整步驟分享

M66 2025-06-27

在web 開發中，圖表展示是用戶交互體驗的一個重要部分。環形圖作為一種常見的圖表類型，憑藉其簡潔而直觀的展示效果，廣泛應用於數據可視化的場景。如果你想要在PHP 中生成環形圖，那麼imagefilledarc函數將是你的一個好幫手。下面，我們將通過一系列步驟，教你如何利用PHP 中的GD庫來創建環形圖效果。

1. 環境準備

首先，我們需要確保你的PHP 環境已經支持GD 庫，因為imagefilledarc是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>

$image : 畫布資源
$cx, $cy : 圓心坐標
$width, $height : 圓的寬度和高度
$start, $end : 弧線的起始和結束角度（單位：度）
$color : 填充顏色
$style : 繪製風格，使用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. 輸出和保存圖片

完成繪製後，你可以選擇將圖片直接顯示在網頁上，或者將其保存為一個文件。通過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 項目中實現環形圖效果，進一步提升你的數據可視化能力！