使用 PHP 繪製圓餅圖統計圖表

前言

在開發調查統計系統時，將數據以圖表形式呈現能直觀展示各項指標佔比。PHP 配合 GD 圖形庫即可輕鬆生成圓餅圖，本文將詳細介紹實現原理與完整代碼示例。

核心設計思路

PHP 繪圖函數不直接支援畫扇形，因此採用以下步驟：

1. 使用 imagecreate() 建立空白畫布
2. 以 imagearc() 繪製圓弧
3. 用 imageline() 連接圓心與圓弧端點形成扇形邊界
4. 呼叫 imagefilltoborder() 填充扇形區域

關鍵函數封裝

<?php
// 角度轉弧度
function radians($degrees) {
    return $degrees * (pi() / 180.0);
}

// 計算圓周上座標
function circle_point($degrees, $diameter) {
    $x = cos(radians($degrees)) * ($diameter / 2);
    $y = sin(radians($degrees)) * ($diameter / 2);
    return array($x, $y);
}
?>

完整繪圖流程

<?php
// 圖表參數設定
$ChartDiameter = 200;          // 圖表直徑
$ChartFont = 2;                // 字體大小
$ChartFontHeight = imagefontheight($ChartFont);
$ChartData = array(75, 45);    // 統計數據（實際可從資料庫讀取）
$ChartLabel = array('Yes', 'No'); // 數據標籤

// 畫布尺寸計算
$ChartWidth = $ChartDiameter + 20;
$ChartHeight = $ChartDiameter + 20 + (($ChartFontHeight + 2) * count($ChartData));

// 計算總數
$ChartTotal = array_sum($ChartData);
$ChartCenterX = $ChartDiameter / 2 + 10;
$ChartCenterY = $ChartDiameter / 2 + 10;

// 建立畫布
$image = imagecreate($ChartWidth, $ChartHeight);

// 分配顏色
$colorBody = imagecolorallocate($image, 0xFF, 0xFF, 0xFF); // 白色背景
$colorBorder = imagecolorallocate($image, 0x00, 0x00, 0x00); // 黑色邊框
$colorText = imagecolorallocate($image, 0x00, 0x00, 0x00);   // 黑色文字
$colorSlice[] = imagecolorallocate($image, 0xFF, 0x00, 0x00); // 紅色扇區
$colorSlice[] = imagecolorallocate($image, 0x00, 0xFF, 0x00); // 綠色扇區

// 填充背景
imagefill($image, 0, 0, $colorBody);

// 繪製每個扇形
$Degrees = 0;
for ($index = 0; $index < count($ChartData); $index++) {
    $StartDegrees = round($Degrees);
    $Degrees += (($ChartData[$index] / $ChartTotal) * 360);
    $EndDegrees = round($Degrees);
    $CurrentColor = $colorSlice[$index % count($colorSlice)];

    // 畫圓弧
    imagearc($image, $ChartCenterX, $ChartCenterY, $ChartDiameter, $ChartDiameter,
             $StartDegrees, $EndDegrees, $CurrentColor);

    // 畫兩條半徑連線
    list($ArcX, $ArcY) = circle_point($StartDegrees, $ChartDiameter);
    imageline($image, $ChartCenterX, $ChartCenterY,
              floor($ChartCenterX + $ArcX), floor($ChartCenterY + $ArcY), $CurrentColor);

    list($ArcX, $ArcY) = circle_point($EndDegrees, $ChartDiameter);
    imageline($image, $ChartCenterX, $ChartCenterY,
              ceil($ChartCenterX + $ArcX), ceil($ChartCenterY + $ArcY), $CurrentColor);

    // 填充扇形（取中間角度向內偏移半徑一半）
    $MidPoint = round((($EndDegrees - $StartDegrees) / 2) + $StartDegrees);
    list($ArcX, $ArcY) = circle_point($MidPoint, $ChartDiameter / 2);
    imagefilltoborder($image,
                      floor($ChartCenterX + $ArcX), floor($ChartCenterY + $ArcY),
                      $CurrentColor, $CurrentColor);
}

// 繪製外圍邊框（雙層圓弧形成立體感）
for ($offset = 0; $offset <= 7; $offset += 7) {
    imagearc($image, $ChartCenterX, $ChartCenterY,
             $ChartDiameter + $offset, $ChartDiameter + $offset,
             0, 180, $colorBorder);
    imagearc($image, $ChartCenterX, $ChartCenterY,
             $ChartDiameter + $offset, $ChartDiameter + $offset,
             180, 360, $colorBorder);
}
imagefilltoborder($image,
                  floor($ChartCenterX + ($ChartDiameter/2) + 2), $ChartCenterY,
                  $colorBorder, $colorBorder);

// 繪製圖例
for ($index = 0; $index < count($ChartData); $index++) {
    $CurrentColor = $colorSlice[$index % count($colorSlice)];
    $LineY = $ChartDiameter + 20 + ($index * ($ChartFontHeight + 2));

    // 色塊
    imagerectangle($image, 10, $LineY,
                   10 + $ChartFontHeight, $LineY + $ChartFontHeight,
                   $colorBorder);
    imagefilltoborder($image, 12, $LineY + 2,
                      $colorBorder, $CurrentColor);

    // 標籤文字
    imagestring($image, $ChartFont,
                20 + $ChartFontHeight, $LineY,
                "{$ChartLabel[$index]}: {$ChartData[$index]}",
                $colorText);
}

// 輸出 GIF 圖片
header('Content-type: image/gif');
imagegif($image);
?>

在 HTML 中嵌入圖表

將上述代碼保存為 chart.php，在網頁中以圖片形式引用：

<?php
echo "<img src='chart.php'>";
?>

環境配置提示

• 需啟用 GD 擴展：extension=php_gd.dll（Windows）或編譯時加入 --with-gd（Linux）
• PHP 4.x 需下載 php_gd.dll 放入擴展目錄並修改 php.ini
• 執行 phpinfo() 確認 GD 支援資訊

總結

本文示範了使用 PHP GD 庫從零構建圓餅圖的完整過程，涵蓋座標計算、扇形繪製、顏色分配、圖例生成等關鍵技術。實際應用中可將數據來源改為資料庫查詢，並擴展支援更多扇區顏色、3D 效果或 PNG 輸出格式。