phpとpChartを使ってWebサイトにグラフ表示する方法をまとめました。
※目次をクリックすると目次の下部にコンテンツが表示されます。
pChartのインストール、動作確認
①公式サイトからpChart.1.27d.rarをダウンロード
http://pchart.sourceforge.net/index.php
②pChart.1.27d.rarを解凍
※rar形式の圧縮ファイルを解凍するためLhaplusを使用しました。
③Apacheのドキュメントルートに解凍したフォルダpChart.1.27dを移動
④GDモジュールを有効にする
php.iniファイル内の下記部分をコメントアウトします。
extension=php_gd2.dll
⑤pChart.1.27d\Example10.phpをコピーしてリネーム
pChart.1.27d\test10.php
ここでは、Example10.php（3D円グラフ）を使って動作確認しています。
⑥インクルードパスが自分の環境に合っているか確認
include(“pChart/pData.class”);
include(“pChart/pChart.class”);
ここでは、サンプルファイルの保存先フォルダは変更していないので、そのまま使用できます。
⑦フォントファイルのパスが自分の環境と合っているか確認
$Test->setFontProperties(“Fonts/tahoma.ttf”,8);
$Test->setFontProperties(“Fonts/MankSans.ttf”,10);
ここでは、サンプルファイルの保存先フォルダは変更していないので、そのまま使用できます。
⑧グラフをファイル出力せず、ブラウザに直接表示するように変更。
$Test->Render(“example10.png”);
↓
$Test->Stroke();
⑨ブラウザで動作確認
http://localhost/pChart.1.27d/test10.php
ブラウザ上に3D円グラフが表示されます。
http://pchart.sourceforge.net/index.php
②pChart.1.27d.rarを解凍
※rar形式の圧縮ファイルを解凍するためLhaplusを使用しました。
③Apacheのドキュメントルートに解凍したフォルダpChart.1.27dを移動
④GDモジュールを有効にする
php.iniファイル内の下記部分をコメントアウトします。
extension=php_gd2.dll
⑤pChart.1.27d\Example10.phpをコピーしてリネーム
pChart.1.27d\test10.php
ここでは、Example10.php（3D円グラフ）を使って動作確認しています。
⑥インクルードパスが自分の環境に合っているか確認
include(“pChart/pData.class”);
include(“pChart/pChart.class”);
ここでは、サンプルファイルの保存先フォルダは変更していないので、そのまま使用できます。
⑦フォントファイルのパスが自分の環境と合っているか確認
$Test->setFontProperties(“Fonts/tahoma.ttf”,8);
$Test->setFontProperties(“Fonts/MankSans.ttf”,10);
ここでは、サンプルファイルの保存先フォルダは変更していないので、そのまま使用できます。
⑧グラフをファイル出力せず、ブラウザに直接表示するように変更。
$Test->Render(“example10.png”);
↓
$Test->Stroke();
⑨ブラウザで動作確認
http://localhost/pChart.1.27d/test10.php
ブラウザ上に3D円グラフが表示されます。
日本語を含むグラフを作成する場合の設定
サンプルのグラフに日本語のタイトルやデータを追加した場合を例にします。
①IPAフォントをダウンロード
http://ipafont.ipa.go.jp/ipafont/download.html
下記をダウンロードしました。
IPA明朝(Ver.003.03)
ipam00303.zip
②解凍し、ipam.ttfをpChart.1.27d\Fontsフォルダにコピー
③pChart.1.27d\Example10.phpをコピーしてリネーム。
pChart.1.27d\test10.php
④エディタでtest10.phpを開き、文字コードをUTF8する。
⑤フォントのファイル名をIPA明朝に変更
$Test->setFontProperties(“Fonts/tahoma.ttf”,8);
$Test->setFontProperties(“Fonts/MankSans.ttf”,10);
↓
$Test->setFontProperties(“Fonts/ipam.ttf”,8);
$Test->setFontProperties(“Fonts/ipam.ttf”,10);
⑥グラフの項目名、タイトルを日本語に変更
$DataSet->AddPoint(array(“January”,”February”,”March”,”April”,”May”),”Serie2″);
↓
$DataSet->AddPoint(array(“１月”,”２月”,”３月”,”４月”,”５月”),”Serie2″);
$Test->drawTitle(10,20,”Sales per month”,100,100,100);
↓
$Test->drawTitle(10,20,”月別売り上げ”,100,100,100);
⑦グラフをファイル出力せず、ブラウザに直接表示するように変更。
$Test->Render(“example10.png”);
↓
$Test->Stroke();
⑧ブラウザで動作確認
http://localhost/pChart.1.27d/test10.php
①IPAフォントをダウンロード
http://ipafont.ipa.go.jp/ipafont/download.html
下記をダウンロードしました。
IPA明朝(Ver.003.03)
ipam00303.zip
②解凍し、ipam.ttfをpChart.1.27d\Fontsフォルダにコピー
③pChart.1.27d\Example10.phpをコピーしてリネーム。
pChart.1.27d\test10.php
④エディタでtest10.phpを開き、文字コードをUTF8する。
⑤フォントのファイル名をIPA明朝に変更
$Test->setFontProperties(“Fonts/tahoma.ttf”,8);
$Test->setFontProperties(“Fonts/MankSans.ttf”,10);
↓
$Test->setFontProperties(“Fonts/ipam.ttf”,8);
$Test->setFontProperties(“Fonts/ipam.ttf”,10);
⑥グラフの項目名、タイトルを日本語に変更
$DataSet->AddPoint(array(“January”,”February”,”March”,”April”,”May”),”Serie2″);
↓
$DataSet->AddPoint(array(“１月”,”２月”,”３月”,”４月”,”５月”),”Serie2″);
$Test->drawTitle(10,20,”Sales per month”,100,100,100);
↓
$Test->drawTitle(10,20,”月別売り上げ”,100,100,100);
⑦グラフをファイル出力せず、ブラウザに直接表示するように変更。
$Test->Render(“example10.png”);
↓
$Test->Stroke();
⑧ブラウザで動作確認
http://localhost/pChart.1.27d/test10.php
グラフ設定のTIPS
１）ライングラフのプロットする点の大きさを変更
○構文
drawPlotGraph(&$Data,&$DataDescription,$BigRadius=5,$SmallRadius=2,$R2=-1,$G2=-1,$B2=-1,$Shadow=FALSE)
●変更例
○変更前
$Test->drawPlotGraph($DataSet->GetData(),$DataSet->GetDataDescription(),3,2,255,255,255);
○変更後
$Test->drawPlotGraph($DataSet->GetData(),$DataSet->GetDataDescription(),5,0,255,255,255);
引数の$BigRadius,$SmallRadiusがプロットする点の外径と内径を示していて、変更前は外径が3と小さく、内径も設定されていて中空状態でした。点を見やすくするため、外径を大きくし、塗りつぶすてめ、内径は0にしました。
２）グラフのタイトル、凡例の表示位置を変更
①タイトルの表示位置を変更
○構文
void drawTitle($XPos,$YPos,$Value,$R,$G,$B,$XPos2=-1,$YPos2=-1,$Shadow=FALSE)
●変更例
○変更前
$Test->drawTitle(60,22,$f_title,50,50,50,585);
○変更後
$Test->drawTitle(250,22,$f_title,50,50,50,585);
②グラフの凡例の表示位置を調整
○構文
void drawLegend($XPos,$YPos,$DataDescription,$R,$G,$B,$Rs=-1,$Gs=-1,$Bs=-1,$Rt=0,$Gt=0,$Bt=0,$Border=FALSE)
●変更例
○変更前
$Test->drawLegend(75,35,$DataSet->GetDataDescription(),255,255,255);
○変更後
$Test->drawLegend(32,2,$DataSet->GetDataDescription(),255,255,255);
３）グラフ全体のサイズを小さくする
オンラインサイトにあるライングラフのサンプルコードでは、グラフの領域が700×230のサイズですが、半分以下の300×98のサイズのグラフを作成する例です。
下記部分を変更しました。
①画像の大きさ
// $Test = new pChart(700,230);
$Test = new pChart(300,98);
②フォントの大きさ
// $Test->setFontProperties(DRAW_FONT,8);
$Test->setFontProperties(DRAW_FONT,4);
③グラフ領域の大きさ
// $Test->setGraphArea(70,30,680,200);
$Test->setGraphArea(30,13,290,85);
// $Test->drawFilledRoundedRectangle(7,7,693,223,5,240,240,240);
$Test->drawFilledRoundedRectangle(3,3,295,95,5,240,240,240);
// $Test->drawRoundedRectangle(5,5,695,225,5,230,230,230);
$Test->drawRoundedRectangle(2,2,296,96,5,230,230,230);
④凡例の表示位置を変更
// $Test->drawLegend(75,5,$DataSet->GetDataDescription(),255,255,255);
$Test->drawLegend(32,2,$DataSet->GetDataDescription(),255,255,255);
４）軸目盛のラベル表示をスキップする設定
描画するポイント数が増えてx軸の目盛ラベルが隣のラベルと重なって読みづらい状態になった場合に、軸目盛のラベル表示をスキップする方法です。
○構文
void drawScale($Data,$DataDescription,$ScaleMode,$R,$G,$B,$DrawTicks=TRUE,$Angle=0,$Decimals=1,$WithMargin=FALSE,$SkipLabels=1,$RightScale=FALSE)
drawScaleの$SkipLabelsがデフォルトでは1になっていてすべての目盛にラベルが表示されます。一つおきにラベルを表示する場合は2を設定します。
●設定例
$Test->drawScale($DataSet->GetData(),$DataSet->GetDataDescription(),SCALE_NORMAL,150,150,150,TRUE,0,2,FALSE,2);
これで軸目盛のラベルが一つおきに表示されるようになります。
○構文
drawPlotGraph(&$Data,&$DataDescription,$BigRadius=5,$SmallRadius=2,$R2=-1,$G2=-1,$B2=-1,$Shadow=FALSE)
●変更例
○変更前
$Test->drawPlotGraph($DataSet->GetData(),$DataSet->GetDataDescription(),3,2,255,255,255);
○変更後
$Test->drawPlotGraph($DataSet->GetData(),$DataSet->GetDataDescription(),5,0,255,255,255);
引数の$BigRadius,$SmallRadiusがプロットする点の外径と内径を示していて、変更前は外径が3と小さく、内径も設定されていて中空状態でした。点を見やすくするため、外径を大きくし、塗りつぶすてめ、内径は0にしました。
２）グラフのタイトル、凡例の表示位置を変更
①タイトルの表示位置を変更
○構文
void drawTitle($XPos,$YPos,$Value,$R,$G,$B,$XPos2=-1,$YPos2=-1,$Shadow=FALSE)
●変更例
○変更前
$Test->drawTitle(60,22,$f_title,50,50,50,585);
○変更後
$Test->drawTitle(250,22,$f_title,50,50,50,585);
②グラフの凡例の表示位置を調整
○構文
void drawLegend($XPos,$YPos,$DataDescription,$R,$G,$B,$Rs=-1,$Gs=-1,$Bs=-1,$Rt=0,$Gt=0,$Bt=0,$Border=FALSE)
●変更例
○変更前
$Test->drawLegend(75,35,$DataSet->GetDataDescription(),255,255,255);
○変更後
$Test->drawLegend(32,2,$DataSet->GetDataDescription(),255,255,255);
３）グラフ全体のサイズを小さくする
オンラインサイトにあるライングラフのサンプルコードでは、グラフの領域が700×230のサイズですが、半分以下の300×98のサイズのグラフを作成する例です。
下記部分を変更しました。
①画像の大きさ
// $Test = new pChart(700,230);
$Test = new pChart(300,98);
②フォントの大きさ
// $Test->setFontProperties(DRAW_FONT,8);
$Test->setFontProperties(DRAW_FONT,4);
③グラフ領域の大きさ
// $Test->setGraphArea(70,30,680,200);
$Test->setGraphArea(30,13,290,85);
// $Test->drawFilledRoundedRectangle(7,7,693,223,5,240,240,240);
$Test->drawFilledRoundedRectangle(3,3,295,95,5,240,240,240);
// $Test->drawRoundedRectangle(5,5,695,225,5,230,230,230);
$Test->drawRoundedRectangle(2,2,296,96,5,230,230,230);
④凡例の表示位置を変更
// $Test->drawLegend(75,5,$DataSet->GetDataDescription(),255,255,255);
$Test->drawLegend(32,2,$DataSet->GetDataDescription(),255,255,255);
４）軸目盛のラベル表示をスキップする設定
描画するポイント数が増えてx軸の目盛ラベルが隣のラベルと重なって読みづらい状態になった場合に、軸目盛のラベル表示をスキップする方法です。
○構文
void drawScale($Data,$DataDescription,$ScaleMode,$R,$G,$B,$DrawTicks=TRUE,$Angle=0,$Decimals=1,$WithMargin=FALSE,$SkipLabels=1,$RightScale=FALSE)
drawScaleの$SkipLabelsがデフォルトでは1になっていてすべての目盛にラベルが表示されます。一つおきにラベルを表示する場合は2を設定します。
●設定例
$Test->drawScale($DataSet->GetData(),$DataSet->GetDataDescription(),SCALE_NORMAL,150,150,150,TRUE,0,2,FALSE,2);
これで軸目盛のラベルが一つおきに表示されるようになります。