導入
Webアプリケーションにおいて、集計データを視覚的に分かりやすく表示したいという要望は非常に一般的です。クライアントサイドのJavaScriptライブラリが主流の現在でも、PDFレポートの生成や、外部からのアクセス制限がある環境下での画像出力など、サーバーサイドでグラフ画像を生成する必要がある場面は存在します。今回は、PHP標準の画像処理ライブラリである「GD」を使用して、円グラフを動的に描画する手法について解説します。
基礎知識
PHPのGDライブラリは、画像を生成・加工するための拡張モジュールです。円グラフを作成するために重要となるのが、imagefilledarc() 関数です。この関数は、指定した中心座標とサイズに基づいて、塗りつぶされた扇形を描画します。
円グラフを描く際のポイントは「角度の計算」です。円全体を360度とし、各データの数値を全体(合計値)に対する割合に変換してから、それぞれの扇形の開始角度と終了角度を決定します。
実装/解決策
円グラフ描画のロジックは以下の手順で行います。
1. 合計値を算出し、1データあたりの角度(倍率)を求めます。
2. データの大きい順にソートし、視覚的なバランスを整えます。
3. 開始角を-90度(12時の方向)に設定し、順次扇形を描画します。
4. 浮動小数点の計算誤差で円が閉じないことを防ぐため、最後の要素では強制的に270度(開始点)まで描画するように制御します。
サンプルプログラム
$value) {
$end = ($key === $count – 1) ? 270 : $start + ($value $scale);
// 16進数カラーコードをRGBに変換して割り当て
$rgb = str_split($colorset[$key % count($colorset)], 2);
$color = imagecolorallocate($image, hexdec($rgb[0]), hexdec($rgb[1]), hexdec($rgb[2]));
// 扇形を描画
imagefilledarc($image, $cx, $cy, $width, $height, $start, $end, $color, IMG_ARC_PIE);
$start = $end; // 次の扇形の開始角を更新
}
// 画像として出力
header(‘Content-type: image/png’);
imagepng($image);
imagedestroy($image);
?>
応用・注意点
実務でGDを使用する際は、以下の点に注意してください。
アンチエイリアスの適用: GDの標準機能では円の境界線がギザギザになりがちです。高品質な画像が必要な場合は、大きなサイズで描画してから縮小する手法や、ライブラリの制限を理解した上で実装を工夫する必要があります。
メモリ制限: 大量のグラフを同時に生成する場合、メモリ消費量が増大します。処理終了後には必ず imagedestroy() を呼び出し、メモリを解放するようにしてください。
カラーセットの管理: データ数がカラーセットの数を超えた場合、インデックスの剰余計算($key % count($colorset))を利用して色をループさせるのがスマートです。ただし、隣接する扇形が同じ色にならないよう、データ設計段階で色の順番を考慮することも検討してください。