PHPで動的なグラフィックを作成する

作成|動的|グラフィック

PHP には驚くべき機能があり、サーバー側のスクリプトを使用して動的なグラフィックスを作成できます。この機能の基礎となっているのは、Thomas Boutell によって設計された ANSI C ライブラリである GD ライブラリです。このライブラリは、.GIF ファイルを除くほとんどの一般的なグラフィック ファイル形式をサポートしています (ただし、ライブラリの設計者は、2004 年に LZW 特許が発行されたときにそれを約束しました)。 .GIF のサポートは、2019 年 7 月 7 日の有効期限終了後すぐに追加されます)。

PHP4.3 以降のバージョンには GD ライブラリが統合されています。古いバージョンの PHP を使用している場合は、グラフィック サポートを手動でインストールする必要があります。それについてはここにたくさんの情報があります。


折れ線グラフ
PHP で動的なグラフィックを作成する方法を示すために、いくつかのカスタム グラフィックを作成してみましょう。最初の例は、図 A に示すように、グリッド上に描画された折れ線グラフです。

図A




このページをgrid.phpと呼びます(関連添付ファイル: リストA)。 Web ページによって動的に生成されたグラフィックを呼び出すには、PHP ページにアクセスするだけで、グラフィックがブラウザに渡されます。 IMG 要素はこの仕事を非常にうまく実行できます。この機能を実装するコード例を次に示します。



次に、グラフィックを作成するコードの記述を開始します。以下は、grid.php のソース コードの一部です:
//グラフの値を追加します
$graphValues=array(0,80,23,11,190,245,50,80,111,240,55);


まず、グラフの値を定義します。この例では、グラフィック値はコード内の配列に直接書き込まれていますが、XML ファイル、テーブル、またはデータベースから値を取得するようにコードを簡単に書き直すこともできます。これらの値の範囲は 0 ～ 250 (ピクセル単位のグラフィック サイズ) です。これらの値は、各グリッド上の線分の初期ピクセル位置を決定します。値 0 と 100 (パーセントで表される) を使用する場合は、これらの値を 2.5 倍して、グリッド上のピクセル位置を決定します。

次に、PNG ヘッダーを送信し、画像の高さと幅を定義します:
// .PNG 画像を定義します
header("Content-type: image/png");
$imgWidth=250;
$imgHeight= 250;


PHP ページが画面上に正しく表示されるように、ブラウザーに PHP ページを実際の画像であると「騙す」ためにグラフィック ヘッダーを送信します。サーバーは、プログラムによって生成された情報をバイナリ データ ストリームの形式でブラウザに送信します。


PNG (Portable Network Graphic) 標準は、GIF の LZW アルゴリズム特許の法的問題により 1995 年に提案された可逆グラフィック形式です。


ここで、グラフィックス オブジェクトをインスタンス化し、グラフィックスで使用する色を定義します:

//画像を作成し、色を定義します
$image=imagecreate($imgWidth, $imgHeight);
$colorWhite=imagecolorallocate( $ image, 255, 255, 255);
$colorGrey=imagecolorallocate($image, 192, 192, 192);
$colorBlue=imagecolorallocate($image, 0, 0, 255);


背景を次のように設定します。白、グレーのフレームと青のポリライン。新しい変数を作成し、異なる RGB 値を割り当てることで、色を簡単に変更または追加できます。

imageline 関数を使用して灰色のフレームを作成できます。この関数が呼び出されるたびに、線が描画されます:

//画像の周囲にフレームを作成します
imageline($image, 0, 0, 0, 250, $colorGrey);
imageline($image, 0, 0, 250, 0, $colorGrey);
imageline($image, 249, 0, 249, 249, $colorGrey);
imageline($image, 0, 249, 249, 249, $colorGrey);


ここでは 2 次元の x/y ピクセル座標が使用されます。 Imageline 関数の値の各ペアは、画像の開始点と終了点を指定します。

グリッド線を実装するには、x 軸と y 軸に 25 ピクセルごとに灰色の線を描画します:

//Create Grid
for ($i=1; $i<11; $ i++){
imageline($image, $i*25, 0, $i*25, 250, $colorGrey);
imageline($image, 0, $i*25, 250, $i*25, $colorGrey) ;
}


位置 (0,0) はグリッドの左上隅を表し、位置 (250,250) は右下隅を表します。各座標軸は 10 個のグリッドに等分され、各グリッドの幅は 25 ピクセル、つまり 250 ピクセル (グラフィックのサイズ) になります。

折れ線グラフを作成するには、配列内の座標値をループアウトし、その座標に従って各線分の始点と終点を描画するだけです:

//線を作成するチャート
for ($i=0; $i<10 ; $i++){
imageline($image, $i*25, (250-$graphValues[$i]), ($i+1)*25, ( 250-$graphValues[$i+1]), $ colorBlue);
}


PHP は、始点と終点の間の青い線を自動的に塗りつぶします。この単純な例には値が 10 個しかありませんが、この手法を拡張して株価指標の意図などの複雑なグラフィックを作成するのは非常に簡単です。

最後に、この画像をブラウザに出力し、画像がサーバーに保存されているメモリ空間をクリアする必要があります:
//グラフィックを出力し、メモリ内の画像をクリアします
imagepng($image);
imagedestroy( $image);
? >



ヒストグラム
上記の折れ線グラフの作成に使用した基本手順を変更し、それを使用してヒストグラムを作成します (図 B を参照)。

写真B



(関連添付ファイル: リスト B) このプログラムは、上記の折れ線グラフを描画するために使用したコードとは少し異なります。 Imagefilledrectangle 関数は 2 種類の四角形を作成します - 暗い四角形は $graphValues 配列に格納された値を表し、明るい四角形は暗い四角形の間のギャップを埋めるために使用されます:

//ヒストグラムを作成します
for ( $ i=0; $iimagefilledrectangle($image, $i*25, (250-$graphValues[$i]), ($i+1)*25, 250, $colorDarkBlue) ;
imagefilledrectangle($image, ($i*25)+1, (250-$graphValues[$i])+1, (($i+1)*25)-5, 248, $colorLightBlue);
}


CPU 負荷に注意する
サーバー側でこれらのグラフィックを作成するときは、この問題、つまり CPU 負荷について慎重に検討する必要があります。 Web 側でこのような動的な画像生成タスクが多すぎると、パフォーマンスが低下する可能性があります。

より複雑な使用法
この記事にリストされている例は単なる出発点です。 PHP グラフィック ライブラリの詳細については、PHP マニュアルの「グラフィック関数」ページを参照してください。

英語版アドレス: http://builder.com.com/5100-6371-5092227.html