Clever Geek Handbook

PHPでスケーラブルなベクトルグラフを作成する

ほとんどのPHP開発者と同様、私はGD拡張機能に精通しています。これにより、JPEG、GIF、PNG形式の画像を簡単に作成できます。 この拡張機能は、オンラインで動的に取得したデータから複雑な画像を作成する必要がある場合に非常に便利です。

GD逆メダルは、画像がラスター形式で作成されることです。 画像のサイズを変更すると、品質が低下します。



画像のサイズ変更を使用する必要がある場合、SVGなどのベクトル形式を使用するのが最善のソリューションです。これにより、歪みや品質の低下なしに画像のサイズを簡単に変更できます。

言うことは行うよりも簡単です。 SVGを使用してグラフと図をプログラミングするには、SVG仕様とさまざまなSVGプリミティブを真剣に理解し、調査、実験、デバッグにかなりの時間をかける必要があります。 または、言い換えれば、これは週末全体の作業です。

幸いなことに、物事はそれほど悪くはありません。 SVG形式のグラフの作成をサポートする多数のオープンソースソリューションがあり、その使用により、Webアプリケーションの開発に費やされる時間を大幅に削減できます。 さらに、SVG形式はXMLであり、編集が容易であり、ラスタフレンドよりもスペースを取りません。 次に、私たちはあなたの人生を大いに促進する2つのライブラリを検討します。



ピースをまとめる



この記事では、SVGイメージを作成するための2つのライブラリについて説明します。



これらのライブラリのインストールは非常に簡単です。ディストリビューションを解凍し、php.iniファイルのinclude_path設定にライブラリを追加する必要があります。 詳細なインストール手順は、プロジェクトWebサイトのヘルプに記載されています。



雨が降ると...

だから、totgoの後、必要なものがすべてインストールされたら、描画を始めましょう！ 以下は、ezcGraphが棒グラフを生成するために使用する簡単な例です。

<?php // set up autoloader require_once 'ezc/Base/src/ezc_bootstrap.php' ; // initialize object $graph = new ezcGraphBarChart(); // add data points $graph->data[ 'Annual rainfall' ] = new ezcGraphArrayDataSet( array( '2002' => 18234, '2003' => 16484, '2004' => 16574, '2005' => 17464, '2006' => 19474 )); // render graph $graph->renderToOutput(500,500); ?> * This source code was highlighted with Source Code Highlighter .



  1. <?php // set up autoloader require_once 'ezc/Base/src/ezc_bootstrap.php' ; // initialize object $graph = new ezcGraphBarChart(); // add data points $graph->data[ 'Annual rainfall' ] = new ezcGraphArrayDataSet( array( '2002' => 18234, '2003' => 16484, '2004' => 16574, '2005' => 17464, '2006' => 19474 )); // render graph $graph->renderToOutput(500,500); ?> * This source code was highlighted with Source Code Highlighter .



  2. <?php // set up autoloader require_once 'ezc/Base/src/ezc_bootstrap.php' ; // initialize object $graph = new ezcGraphBarChart(); // add data points $graph->data[ 'Annual rainfall' ] = new ezcGraphArrayDataSet( array( '2002' => 18234, '2003' => 16484, '2004' => 16574, '2005' => 17464, '2006' => 19474 )); // render graph $graph->renderToOutput(500,500); ?> * This source code was highlighted with Source Code Highlighter .



  3. <?php // set up autoloader require_once 'ezc/Base/src/ezc_bootstrap.php' ; // initialize object $graph = new ezcGraphBarChart(); // add data points $graph->data[ 'Annual rainfall' ] = new ezcGraphArrayDataSet( array( '2002' => 18234, '2003' => 16484, '2004' => 16574, '2005' => 17464, '2006' => 19474 )); // render graph $graph->renderToOutput(500,500); ?> * This source code was highlighted with Source Code Highlighter .



  5. <?php // set up autoloader require_once 'ezc/Base/src/ezc_bootstrap.php' ; // initialize object $graph = new ezcGraphBarChart(); // add data points $graph->data[ 'Annual rainfall' ] = new ezcGraphArrayDataSet( array( '2002' => 18234, '2003' => 16484, '2004' => 16574, '2005' => 17464, '2006' => 19474 )); // render graph $graph->renderToOutput(500,500); ?> * This source code was highlighted with Source Code Highlighter .



  6. <?php // set up autoloader require_once 'ezc/Base/src/ezc_bootstrap.php' ; // initialize object $graph = new ezcGraphBarChart(); // add data points $graph->data[ 'Annual rainfall' ] = new ezcGraphArrayDataSet( array( '2002' => 18234, '2003' => 16484, '2004' => 16574, '2005' => 17464, '2006' => 19474 )); // render graph $graph->renderToOutput(500,500); ?> * This source code was highlighted with Source Code Highlighter .



  8. <?php // set up autoloader require_once 'ezc/Base/src/ezc_bootstrap.php' ; // initialize object $graph = new ezcGraphBarChart(); // add data points $graph->data[ 'Annual rainfall' ] = new ezcGraphArrayDataSet( array( '2002' => 18234, '2003' => 16484, '2004' => 16574, '2005' => 17464, '2006' => 19474 )); // render graph $graph->renderToOutput(500,500); ?> * This source code was highlighted with Source Code Highlighter .



  9. <?php // set up autoloader require_once 'ezc/Base/src/ezc_bootstrap.php' ; // initialize object $graph = new ezcGraphBarChart(); // add data points $graph->data[ 'Annual rainfall' ] = new ezcGraphArrayDataSet( array( '2002' => 18234, '2003' => 16484, '2004' => 16574, '2005' => 17464, '2006' => 19474 )); // render graph $graph->renderToOutput(500,500); ?> * This source code was highlighted with Source Code Highlighter .



  10. <?php // set up autoloader require_once 'ezc/Base/src/ezc_bootstrap.php' ; // initialize object $graph = new ezcGraphBarChart(); // add data points $graph->data[ 'Annual rainfall' ] = new ezcGraphArrayDataSet( array( '2002' => 18234, '2003' => 16484, '2004' => 16574, '2005' => 17464, '2006' => 19474 )); // render graph $graph->renderToOutput(500,500); ?> * This source code was highlighted with Source Code Highlighter .



  11. <?php // set up autoloader require_once 'ezc/Base/src/ezc_bootstrap.php' ; // initialize object $graph = new ezcGraphBarChart(); // add data points $graph->data[ 'Annual rainfall' ] = new ezcGraphArrayDataSet( array( '2002' => 18234, '2003' => 16484, '2004' => 16574, '2005' => 17464, '2006' => 19474 )); // render graph $graph->renderToOutput(500,500); ?> * This source code was highlighted with Source Code Highlighter .



  12. <?php // set up autoloader require_once 'ezc/Base/src/ezc_bootstrap.php' ; // initialize object $graph = new ezcGraphBarChart(); // add data points $graph->data[ 'Annual rainfall' ] = new ezcGraphArrayDataSet( array( '2002' => 18234, '2003' => 16484, '2004' => 16574, '2005' => 17464, '2006' => 19474 )); // render graph $graph->renderToOutput(500,500); ?> * This source code was highlighted with Source Code Highlighter .



  13. <?php // set up autoloader require_once 'ezc/Base/src/ezc_bootstrap.php' ; // initialize object $graph = new ezcGraphBarChart(); // add data points $graph->data[ 'Annual rainfall' ] = new ezcGraphArrayDataSet( array( '2002' => 18234, '2003' => 16484, '2004' => 16574, '2005' => 17464, '2006' => 19474 )); // render graph $graph->renderToOutput(500,500); ?> * This source code was highlighted with Source Code Highlighter .



  14. <?php // set up autoloader require_once 'ezc/Base/src/ezc_bootstrap.php' ; // initialize object $graph = new ezcGraphBarChart(); // add data points $graph->data[ 'Annual rainfall' ] = new ezcGraphArrayDataSet( array( '2002' => 18234, '2003' => 16484, '2004' => 16574, '2005' => 17464, '2006' => 19474 )); // render graph $graph->renderToOutput(500,500); ?> * This source code was highlighted with Source Code Highlighter .



  15. <?php // set up autoloader require_once 'ezc/Base/src/ezc_bootstrap.php' ; // initialize object $graph = new ezcGraphBarChart(); // add data points $graph->data[ 'Annual rainfall' ] = new ezcGraphArrayDataSet( array( '2002' => 18234, '2003' => 16484, '2004' => 16574, '2005' => 17464, '2006' => 19474 )); // render graph $graph->renderToOutput(500,500); ?> * This source code was highlighted with Source Code Highlighter .



  16. <?php // set up autoloader require_once 'ezc/Base/src/ezc_bootstrap.php' ; // initialize object $graph = new ezcGraphBarChart(); // add data points $graph->data[ 'Annual rainfall' ] = new ezcGraphArrayDataSet( array( '2002' => 18234, '2003' => 16484, '2004' => 16574, '2005' => 17464, '2006' => 19474 )); // render graph $graph->renderToOutput(500,500); ?> * This source code was highlighted with Source Code Highlighter .



  19. <?php // set up autoloader require_once 'ezc/Base/src/ezc_bootstrap.php' ; // initialize object $graph = new ezcGraphBarChart(); // add data points $graph->data[ 'Annual rainfall' ] = new ezcGraphArrayDataSet( array( '2002' => 18234, '2003' => 16484, '2004' => 16574, '2005' => 17464, '2006' => 19474 )); // render graph $graph->renderToOutput(500,500); ?> * This source code was highlighted with Source Code Highlighter .



  20. <?php // set up autoloader require_once 'ezc/Base/src/ezc_bootstrap.php' ; // initialize object $graph = new ezcGraphBarChart(); // add data points $graph->data[ 'Annual rainfall' ] = new ezcGraphArrayDataSet( array( '2002' => 18234, '2003' => 16484, '2004' => 16574, '2005' => 17464, '2006' => 19474 )); // render graph $graph->renderToOutput(500,500); ?> * This source code was highlighted with Source Code Highlighter .



  21. <?php // set up autoloader require_once 'ezc/Base/src/ezc_bootstrap.php' ; // initialize object $graph = new ezcGraphBarChart(); // add data points $graph->data[ 'Annual rainfall' ] = new ezcGraphArrayDataSet( array( '2002' => 18234, '2003' => 16484, '2004' => 16574, '2005' => 17464, '2006' => 19474 )); // render graph $graph->renderToOutput(500,500); ?> * This source code was highlighted with Source Code Highlighter .



<?php // set up autoloader require_once 'ezc/Base/src/ezc_bootstrap.php' ; // initialize object $graph = new ezcGraphBarChart(); // add data points $graph->data[ 'Annual rainfall' ] = new ezcGraphArrayDataSet( array( '2002' => 18234, '2003' => 16484, '2004' => 16574, '2005' => 17464, '2006' => 19474 )); // render graph $graph->renderToOutput(500,500); ?> * This source code was highlighted with Source Code Highlighter .





このスクリプトは、描画されるデータを含むezcGraphArrayDataSetクラスのオブジェクトが作成されるezcGraphBarChartクラスのオブジェクトを作成します。 データは連想配列の形式で表示され、そのキーはX軸上の値であり、値はY軸上の値です。データがチャートオブジェクトにアタッチされた後、renderToOutput（）は指定された幅と高さのパラメーターでグラフのプロットを処理します、Content-Typeヘッダーの正しい仕様。

これに似たものが生成されます：



生成されたチャートのソースコードを見ると、この画像を表示するために使用されるSVGコードが表示されます。



ezcGraphは5種類のチャート形式をサポートしています。チャートが異なる形式でどのように見えるかを簡単に説明でき、オブジェクトクラスを置き換えるだけです。





  1. <？php
  2. //オートローダーを設定します
  3. require_once 'ezc / Base / src / ezc_bootstrap.php' ;
  5. //オブジェクトを初期化します
  6. $ graph = new ezcGraphLineChart（）;
  8. //データポイントを追加します
  9. $ graph-> data [ '年間降水量' ] = 新しい ezcGraphArrayDataSet（
  10. 配列（
  11. '2002' => 18234、
  12. '2003' => 16484、
  13. '2004' => 16574、
  14. '2005' => 17464、
  15. '2006' => 19474
  16. ））;
  18. //グラフをレンダリングします
  19. $ graph-> renderToOutput（500,500）;
  20. ？>
*このソースコードは、 ソースコードハイライターで強調表示されました。


これがどのように見えるかです：



円グラフが必要-問題ありません：





  1. <？php
  2. //オートローダーを設定します
  3. require_once 'ezc / Base / src / ezc_bootstrap.php' ;
  5. //オブジェクトを初期化します
  6. $ graph = new ezcGraphPieChart（）;
  8. //データポイントを追加します
  9. $ graph-> data [ '年間降水量' ] = 新しい ezcGraphArrayDataSet（
  10. 配列（
  11. '2002' => 18234、
  12. '2003' => 16484、
  13. '2004' => 16574、
  14. '2005' => 17464、
  15. '2006' => 19474
  16. ））;
  18. //グラフをレンダリングします
  19. $ graph-> renderToOutput（500,500）;
  20. ？>
*このソースコードは、 ソースコードハイライターで強調表示されました。


表示は次のとおりです。





レーダー掃引

以下は、ezcGraphがサポートするさまざまな種類のチャートの詳細なリストです。

対象 チャートタイプ
ezcGraphBarChart 棒グラフ
ezcGraphLineChart 折れ線グラフ
ezcGraphPieChart 円グラフ
ezcGraphRadarChart レーダープロット
ezcGraphOdometerChart 走行距離チャート




最初の3つのクラスがどのように機能するかはすでに見たので、残りを見てみましょう。 レーダーチャートは、多次元データの説明に適しています。 以下は、数年にわたるさまざまな電子製品の販売を示す例です。





  1. <？php
  2. //オートローダーを設定します
  3. require_once 'ezc / Base / src / ezc_bootstrap.php' ;
  5. //オブジェクトを初期化します
  6. $ graph = new ezcGraphRadarChart（）;
  8. //データセットを追加します
  9. $ graph-> data [ 'Televisions' ] = new ezcGraphArrayDataSet（
  10. 配列（
  11. '2002' => 1823、
  12. '2003' => 1644、
  13. '2004' => 1574、
  14. '2005' => 1764、
  15. '2006' => 1944、
  16. '2007' => 1201
  17. '' => 1823
  18. ））;
  19. $ graph-> data [ 'Audio systems' ] = new ezcGraphArrayDataSet（
  20. 配列（
  21. '2002' => 758、
  22. '2003' => 144、
  23. '2004' => 154、
  24. '2005' => 714、
  25. '2006' => 638、
  26. '2007' => 1038、
  27. '' => 758
  28. ））;
  29. $ graph-> data [ 'Cameras' ] = new ezcGraphArrayDataSet（
  30. 配列（
  31. '2002' => 102、
  32. '2003' => 143、
  33. '2004' => 176、
  34. '2005' => 270、
  35. '2006' => 212、
  36. '2007' => 1112
  37. '' => 102
  38. ））;
  40. //グラフをレンダリングします
  41. $ graph-> renderToOutput（500,500）;
  42. ？>
*このソースコードは、 ソースコードハイライターで強調表示されました。


これがどのように見えるかです：



各変数はその軸上にあることに注意してください

別のタイプのグラフである走行距離計は、固定範囲に対する値を示すために使用されます。 以下に例を示します。





  1. <？php
  2. //オートローダーを設定します
  3. require_once 'ezc / Base / src / ezc_bootstrap.php' ;
  5. //オブジェクトを初期化します
  6. $グラフ= 新しい ezcGraphOdometerChart（）;
  8. //データポイントを追加します
  9. $ graph-> data [ 'Televisions' ] = new ezcGraphArrayDataSet（
  10. 配列（2400）
  11. ）;
  13. //走行距離制限を設定します
  14. $ graph-> axis-> min = 0;
  15. $グラフ->軸->最大= 3000;
  17. //グラフをレンダリングします
  18. $ graph-> renderToOutput（500,500）;
  19. ？>
*このソースコードは、 ソースコードハイライターで強調表示されました。


これがどのように見えるかです：





あるデータセットを別のデータセットと比較するには、グラフオブジェクトに追加のデータセットを追加するだけです（これは、折れ線グラフ、棒グラフ、レーダーグラフで機能します）。 これを行うと、ezcGraphは自動的に新しいチャートを作成し、データ比較を非常に簡単にします。 例として、例を参照してください。





  1. <？php
  2. //オートローダーを設定します
  3. require_once 'ezc / Base / src / ezc_bootstrap.php' ;
  5. //オブジェクトを初期化します
  6. $ graph = new ezcGraphBarChart（）;
  8. //データポイントを追加します
  9. $ graph-> data [ '年間降水量' ] = 新しい ezcGraphArrayDataSet（
  10. 配列（
  11. '2002' => 18234、
  12. '2003' => 16484、
  13. '2004' => 16574、
  14. '2005' => 17464、
  15. '2006' => 19474
  16. ））;
  17. $ graph-> data [ 'Crop production' ] = 新しい ezcGraphArrayDataSet（
  18. 配列（
  19. '2002' => 50474、
  20. '2003' => 26749、
  21. '2004' => 29567、
  22. '2005' => 37869、
  23. '2006' => 79400
  24. ））;
  26. //グラフをレンダリングします
  27. $ graph-> renderToOutput（500,500）;
  28. ？>
*このソースコードは、 ソースコードハイライターで強調表示されました。


これがどのように見えるかです：



ezcGraphは、データセットのキーをグラフの凡例として自動的に使用することに注意してください。 オプションで、プロパティ「xAxis」、「yAxis」、「title」、「legend」を使用して、X軸とY軸のラベル、およびチャートのタイトルを含めることができます。 変更されたコードは次のとおりです。





  1. <？php
  2. //オートローダーを設定します
  3. require_once 'ezc / Base / src / ezc_bootstrap.php' ;
  5. //オブジェクトを初期化します
  6. $ graph = new ezcGraphBarChart（）;
  8. //データポイントを追加します
  9. $ graph-> data [ '年間降水量' ] = 新しい ezcGraphArrayDataSet（
  10. 配列（
  11. '2002' => 18234、
  12. '2003' => 16484、
  13. '2004' => 16574、
  14. '2005' => 17464、
  15. '2006' => 19474
  16. ））;
  18. //タイトルを設定します
  19. $ graph- > title = '年次降雨' ;
  20. //軸ラベルを設定します
  21. $ graph-> xAxis-> label = 'YEAR' ;
  22. $ graph-> yAxis-> label = 'MM' ;
  24. //凡例とタイトルの位置を設定します
  25. $ graph-> title-> position = ezcGraph :: TOP;
  26. $ graph-> legend-> position = ezcGraph :: RIGHT;
  27. //グラフをレンダリングします
  28. $ graph-> renderToOutput（500,500）;
  29. ？>
*このソースコードは、 ソースコードハイライターで強調表示されました。


これがどのように見えるかです：





パレットの混合

ezcGraphを使用すると、要素の色、サイズ、ギャップ、位置を設定する機能を含む高度なチャート作成を実行できます。 これを行う簡単な方法は、事前定義された色を含むことができる「パレット」プロパティを使用することです。 ezcGraphには多数の定義済みパレットが含まれていますが、同時に独自のパレットを作成できます。

以下は、事前定義された緑のパレットの例です。





  1. <？php
  2. //オートローダーを設定します
  3. require_once 'ezc / Base / src / ezc_bootstrap.php' ;
  5. //オブジェクトを初期化します
  6. $ graph = new ezcGraphBarChart（）;
  8. //緑のパレットを使用
  9. $ graph-> palette = new ezcGraphPaletteEzGreen（）;
  11. //データポイントを追加します
  12. $ graph-> data [ '年間降水量' ] = 新しい ezcGraphArrayDataSet（
  13. 配列（
  14. '2002' => 18234、
  15. '2003' => 16484、
  16. '2004' => 16574、
  17. '2005' => 17464、
  18. '2006' => 19474
  19. ））;
  22. //グラフをレンダリングします
  23. $ graph-> renderToOutput（500,500）;
  24. ？>
*このソースコードは、 ソースコードハイライターで強調表示されました。


これは次のようなものです。



グラフの各要素のフォント、色、境界線、配置を変更して、特定の要素のプロパティにアクセスすることもできます。 以下に例を示します。





  1. <？php
  2. //オートローダーを設定します
  3. require_once 'ezc / Base / src / ezc_bootstrap.php' ;
  5. //オブジェクトを初期化します
  6. $ graph = new ezcGraphBarChart（）;
  8. //データポイントを追加します
  9. $ graph-> data [ '年間降水量' ] = 新しい ezcGraphArrayDataSet（
  10. 配列（
  11. '2002' => 18234、
  12. '2003' => 16484、
  13. '2004' => 16574、
  14. '2005' => 17464、
  15. '2006' => 19474
  16. ））;
  18. //タイトルを設定します
  19. $ graph- > title = '年次降雨' ;
  20. //軸ラベルを設定します
  21. $ graph-> xAxis-> label = 'YEAR' ;
  22. $ graph-> yAxis-> label = 'MM' ;
  24. //フォント名とサイズのグローバルオプションを設定します
  25. $ graph-> options-> font-> name = 'Arial' ;
  26. $ graph-> options-> font-> maxFontSize = '40' ;
  28. //凡例とタイトルのフォントを設定します
  29. $ graph-> legend-> font-> name = 'Times New Roman' ;
  30. $ graph-> title-> font-> name = 'Arial' ;
  31. $ graph-> title-> font-> maxFontSize = '20' ;
  33. //凡例とタイトルの色を設定します
  34. $ graph- > title- > font-> color = '＃FFFF00' ;
  35. $ graph-> legend-> font-> color = '#FFFFFF' ;
  37. //バーの色を設定します
  38. $ graph-> data [ '年間降水量' ]-> color = '＃FF8040' ;
  40. //凡例とタイトルの境界線と境界線の色を設定します
  41. $ graph-> legend-> border = '＃FF8040' ;
  42. $ graph-> title-> borderWidth = '2' ;
  43. $ graph-> title-> border = '＃FF00FF' ;
  44. $ graph-> title-> background = '＃C0C0C0' ;
  46. // X軸とY軸の色を設定します
  47. $ graph-> xAxis-> border = '＃FF0000' ;
  48. $ graph-> yAxis-> border = '＃00FF00' ;
  50. //凡例とタイトルの位置を設定します
  51. $ graph-> title-> position = ezcGraph :: TOP;
  52. $ graph-> legend-> position = ezcGraph :: RIGHT;
  53. //グラフをレンダリングします
  54. $ graph-> renderToOutput（500,500）;
  55. ？>
*このソースコードは、 ソースコードハイライターで強調表示されました。


これは次のようなものです。



ezcGraphを使用すると、グラフィックの背景としてJPEG、GIF、またはPNG画像を配置できます。 画像は、特定の場所に配置するか、水平および垂直の両方に繰り返すことができます。 以下に例を示します。





  1. <？php
  2. //オートローダーを設定します
  3. require_once 'ezc / Base / src / ezc_bootstrap.php' ;
  5. //オブジェクトを初期化します
  6. $ graph = new ezcGraphBarChart（）;
  8. //データポイントを追加します
  9. $ graph-> data [ '年間降水量' ] = 新しい ezcGraphArrayDataSet（
  10. 配列（
  11. '2002' => 18234、
  12. '2003' => 16484、
  13. '2004' => 16574、
  14. '2005' => 17464、
  15. '2006' => 19474
  16. ））;
  18. //タイトルを設定します
  19. $ graph- > title = '年次降雨' ;
  20. //軸ラベルを設定します
  21. $ graph-> xAxis-> label = 'YEAR' ;
  22. $ graph-> yAxis-> label = 'MM' ;
  24. //グラフの下部で背景画像を水平方向に繰り返します
  25. $ graph-> background-> image = 'logo.jpg' ;
  26. $ graph-> background-> position = ezcGraph :: BOTTOM;
  27. $ graph-> background-> repeat = ezcGraph :: HORIZONTAL;
  28. //グラフをレンダリングします
  29. $ graph-> renderToOutput（500,500）;
  30. ？>
*このソースコードは、 ソースコードハイライターで強調表示されました。


これがどのように見えるかです：



ezcGraphにはまだ多くの機能があります。 詳細については、ezcGraphのドキュメントを参照してください。



たくさんの選択肢

ezcGraphの代替はSVGGraphです。 以下は、年間降水量の棒グラフを作成する簡単な例です。





  1. <？php
  2. //クラスファイルを含める
  3. include 'SVGGRaph / SVGGraph.php' ;
  5. //オブジェクトを初期化します
  6. $グラフ= 新しい SVGGraph（400、400）;
  8. //データポイントを追加します
  9. $ graph->値（配列（
  10. '2002' => 18234、
  11. '2003' => 16484、
  12. '2004' => 16574、
  13. '2005' => 17464、
  14. '2006' => 19474
  15. ））;
  17. //グラフをレンダリングします
  18. $ graph- > Render（ 'BarGraph' ）;
  19. ？>
*このソースコードは、 ソースコードハイライターで強調表示されました。


このスクリプトは、SVGGraphオブジェクトを作成し、必要な幅と高さの寸法をコンストラクターに渡すことから始まります。 次に、Values（）メソッドを使用してデータ情報を渡します。 このメソッドは、連想配列をパラメーターとして受け取ります。この場合、キーはX軸に沿った座標であり、配列の値はY軸に沿った値に対応します。

これらの手順の後、Render（）が必要な計算をすべて実行し、SVG画像を作成します。 Render（）メソッドには、プロットされたプロットのタイプである1つの必須パラメーターが必要です。 また、XMLドキュメントの先頭とContent-Typeヘッダーを表示する必要性を出力する2つのオプションパラメータがあります。

これがどのように見えるかです：



同じデータを表示するのは非常に簡単ですが、行などの異なる形式でのみ表示されます。 Render（）メソッドのパラメーターを変更するだけです。





  1. <？php
  2. //クラスファイルを含める
  3. include 'SVGGRaph / SVGGraph.php' ;
  5. //オブジェクトを初期化します
  6. $グラフ= 新しい SVGGraph（400、400）;
  8. //データポイントを追加します
  9. $ graph->値（配列（
  10. '2002' => 18234、
  11. '2003' => 16484、
  12. '2004' => 16574、
  13. '2005' => 17464、
  14. '2006' => 19474
  15. ））;
  17. //グラフをレンダリングします
  18. $ graph- > Render（ 'LineGraph' ）;
  19. ？>
*このソースコードは、 ソースコードハイライターで強調表示されました。


これはどのように見えるかです



円グラフが必要-問題なし

<?php

// include class file

include 'SVGGRaph/SVGGraph.php' ;



// initialize object

$graph = new SVGGraph(400, 400);



// add data points

$graph->Values(array(

'UK' => 50,

'US' => 30,

'Europe' => 100,

'India' => 20,

));



// render graph

$graph->Render( 'PieGraph' );

?>



* This source code was highlighted with Source Code Highlighter .





これはどのように見えるかです





これらのすべてのケースで、チャートのタイプを変更するのは簡単で、スクリプトの主要部分を変更せずに別の引数をRender（）に渡すだけで十分であることに注意してください。 DOMまたはSimpleXMLを使用して「手動で」チャートを作成する場合、あるタイプのチャートから別のタイプに移動するには多くの作業が必要になります。



オフグリッド

デフォルトの出力SVGGraphはほとんどすべての状況に適用できますが、ライブラリにはダイアグラムの外観をカスタマイズする機会が非常に多くあります。 設定は連想配列として渡され、3番目のオプション要素としてSVGGraphオブジェクトのコンストラクターに渡されます。

たとえば、SVGGraphでは、「back_colour」、「back_stroke_colour」、「stroke_colour」、「axis_colour」、「grid_colour」、および「label_colour」の設定を使用して、チャート、グリッド線、軸、ヘッダー、ポイントマーカーの背景色を変更できます。 色は、文字列とRGB値の両方として指定できます。 以下に例を示します。

<?php

// include class file

include 'SVGGRaph/SVGGraph.php' ;



// set options

$options = array(

'back_colour' => 'white' ,

'back_stroke_colour' => 'pink' ,

'stroke_colour' => 'black' ,

'axis_colour' => 'blue' ,

'grid_colour' => 'silver' ,

'label_colour' => 'brown'

);



// initialize object

$graph = new SVGGraph(400, 400, $options);



// add data points

$graph->Values(array(

'2002' => 18234,

'2003' => 16484,

'2004' => 16574,

'2005' => 17464,

'2006' => 19474

));



// render graph

$graph->Render( 'BarGraph' );

?>



* This source code was highlighted with Source Code Highlighter .





これがどのように見えるかです：



パラメータ「show_grid」、「show_axes」、「show_divisions」、「show_label_h」および「show_label_v」を使用して、軸、マーカー、背景グリッドなどの要素の可視性を制御する機能もあります。 以下に例を示します。

<?php

// include class file

include 'SVGGRaph/SVGGraph.php' ;



// set options

$options = array(

'show_grid' => false ,

'show_axes' => true ,

'show_divisions' => false ,

'show_label_h' => true ,

'show_label_v' => false

);



// initialize object

$graph = new SVGGraph(400, 400, $options);



// add data points

$graph->Values(array(

'2002' => 18234,

'2003' => 16484,

'2004' => 16574,

'2005' => 17464,

'2006' => 19474

));



// render graph

$graph->Render( 'BarGraph' );

?>



* This source code was highlighted with Source Code Highlighter .





これがどのように見えるかです：



折れ線グラフの場合、パラメーター「marker_size」、「marker_type」、および「marker_colour」を使用して、以下に示すようにポイントマーカーの外観を制御できます。

<?php

// include class file

include 'SVGGRaph/SVGGraph.php' ;



// set options

$options = array(

'show_grid' => false ,

'marker_size' => 8,

'marker_type' => 'triangle' ,

'marker_colour' => 'red'

);



// initialize object

$graph = new SVGGraph(400, 400, $options);



// add data points

$graph->Values(array(

'2002' => 18234,

'2003' => 16484,

'2004' => 16574,

'2005' => 17464,

'2006' => 19474

));



// render graph

$graph->Render( 'LineGraph' );

?>



* This source code was highlighted with Source Code Highlighter .





これがどのように見えるかです：



円グラフは非常に人気があり、SVGGraphにはこのタイプのグラフに固有の多数の設定とメソッドがあります。 円グラフの使用例はもっと高かったので、拡大してみましょう。このため、SVGGraphに「show_label_percent」を使用してパーセンテージを自動的に計算して表示させます。 以下に例を示します。

<?php

// include class file

include 'SVGGRaph/SVGGraph.php' ;



// initialize object

$graph = new SVGGraph(400, 400, array(

'show_label_amount' => true ,

'show_label_percent' => true ,

'label_colour' => 'black' ,

));



// add data points

$graph->Values(array(

'UK' => 50,

'US' => 30,

'Europe' => 100,

'India' => 20,

));



// render graph

$graph->Render( 'PieGraph' );

?>



* This source code was highlighted with Source Code Highlighter .





これがどのように見えるかです：



最後に、以下に示すようにLinks（）メソッドを使用して、チャート上のラベルにハイパーリンクを追加することができます。

<?php

// include class file

include 'SVGGRaph/SVGGraph.php' ;



// initialize object

$graph = new SVGGraph(400, 400, array(

'show_label_amount' => true ,

'show_label_percent' => true ,

'label_colour' => 'black' ,

));



// add data points

$graph->Values(array(

'UK' => 50,

'US' => 30,

'Europe' => 100,

'India' => 20,

));



// add links

// no link for 'Europe' slice

$graph->links(array(

'UK' => 'http://example.org/UK' ,

'US' => 'http://example.org/US' ,

'India' => 'http://example.org/IN' ,

));



// render graph

$graph->Render( 'PieGraph' );

?>



* This source code was highlighted with Source Code Highlighter .







すべて積み上げ

そこで、2つの一般的なライブラリの可能性を検討し、実際の例をいくつか見てみましょう。 あなたが多くの興味深いコンテンツを持つ人気サイトの所有者であり、MySQLデータベースのページの訪問数とコメントを記録するPHPスクリプトがあるとします。 データベースは次のとおりであると仮定します。

+----+------------+------+-------+

| id | date | hits | posts |

+----+------------+------+-------+

| 1 | 2010-02-01 | 3849 | 284 |

| 2 | 2010-02-02 | 3728 | 421 |

| 3 | 2010-02-03 | 3526 | 189 |

| 4 | 2010-02-04 | 4288 | 143 |

| 5 | 2010-02-05 | 4526 | 265 |

...

+----+------------+------+-------+



* This source code was highlighted with Source Code Highlighter .





この表の内容を、ezcGraphを使用して訪問数とコメント数を示すグラフに変換することほど簡単なことはありません。 以下の例：

<?php

// set up autoloader

require_once 'ezc/Base/src/ezc_bootstrap.php' ;



// query database for data

// formulate into arrays

try {

$pdo = new PDO( 'mysql:host=localhost;dbname=example' , 'user' , 'pass' );

$sql = "SELECT DATE_FORMAT(date, '%d') AS day, hits, posts FROM log WHERE date BETWEEN '2010-02-01' AND '2010-02-05'" ;

if ($result = $pdo->query($sql)) {

while ($row = $result->fetch()) {

$hits[$row[ 'day' ]] = $row[ 'hits' ];

$posts[$row[ 'day' ]] = $row[ 'posts' ];

}

}

} catch (PDOException $e) {

die( 'Error: ' . $e->getMessage());

}



// initialize object

$graph = new ezcGraphBarChart();



// add data sets

$graph->data[ 'Hits' ] = new ezcGraphArrayDataSet($hits);

$graph->data[ 'Posts' ] = new ezcGraphArrayDataSet($posts);



// render graph

$graph->renderToOutput(500,500);

?>





* This source code was highlighted with Source Code Highlighter .





複雑なことは何もありません。スクリプトはMySQLに接続し、SELECTを実行します。SELECTは5日間データを返し、データを2つの配列に追加します。 これらの配列は、ezcGraphオブジェクトの 'data'プロパティに渡されます。

これは次のようなものです。





パイ、誰？

もう1つの興味深い機会は、AJAXとSVGを接続して、ユーザー入力に応じて動的に変化するチャートを作成することです。 入力されたデータに応じて、フォームを表示し、円グラフを作成するHTMLページを考えます。 AJAXリクエストは、ユーザーがデータを変更するたびにjQueryを使用して行われます。 受信した回答を直接埋め込みます


More articles:


All Articles