導入
Webアプリケーション開発において、ユーザーのスキル評価やステータス表示などで「レーダーチャート」が必要になる場面は少なくありません。JavaScriptのライブラリ(Chart.jsなど)を使うのが一般的ですが、メール配信用の画像生成や、動的なOGP画像作成など、サーバーサイドで完結させたいケースでは、PHPのGDライブラリを用いた画像生成が非常に有効です。今回は、GDライブラリを活用した、柔軟なレーダーチャート描画の実装方法を解説します。
基礎知識
GDライブラリは、PHPで画像を生成・編集するための標準的な拡張機能です。レーダーチャートを描画する上で重要なのが「座標計算」です。中心点から各頂点までの距離(値)と、角度をラジアンに変換して計算することで、任意の多角形を描画できます。今回利用する重要な関数は以下の通りです。
imagecreatetruecolor: 空の画像キャンバスを作成します。
imageline: 直線を描画します。
imagepolygon: 多角形を描画します。
deg2rad: 度数をラジアンに変換します(三角関数にはラジアンが必要です)。
実装/解決策
レーダーチャート作成の肝は、円周上の座標を求める関数を作成することです。中心点からの距離と、角度(度数)を引数にとり、サイン(sin)とコサイン(cos)を使ってXとYの座標を算出します。
サンプルプログラム
以下のコードは、指定したデータに基づき、GDを使用してレーダーチャートを生成します。実行にはサーバー上にフォントファイル(.ttf)が必要です。
$v) {
$angle = ($i / count($values)) 360;
list($x, $y) = get_point($length ($v / $max), $angle);
$points[] = $x + $center;
$points[] = $y + $center;
}
// 多角形の描画
imagepolygon($image, $points, count($values), $line_color);
// 画像出力
header(‘Content-Type: image/png’);
imagepng($image);
imagedestroy($image);
?>
応用・注意点
実務でGDを使用する際は、以下の点に注意してください。
アンチエイリアスの適用:
デフォルトでは線がギザギザになりやすいため、imageantialias($image, true); を呼び出して滑らかな線を描画しましょう。
フォントのパス:
サーバー環境によってフォントの場所は異なります。絶対パスで指定するか、設定ファイルから読み込むように設計してください。
メモリ消費量:
GDは画像をメモリ上に展開します。大きなサイズの画像を連続して生成する場合、PHPの memory_limit に達する可能性があります。処理が終わったら必ず imagedestroy() を実行し、メモリを解放する習慣をつけましょう。
動的な画像生成はサーバー負荷が大きいため、頻繁にアクセスされるページでは、生成した画像をキャッシュ(ファイル保存)して、2回目以降は画像ファイルを直接配信する構成にすることをお勧めします。