ノンプログラミングでも利用可能！PHPで多様なグラフを作れるpChart

PHPで棒グラフやレーダーチャートなどのグラフを作りたい場合、そしてそれを綺麗に見せたいのであればpChart を使えば簡単に実装することができます。

（他にも、JpGraph を使ったり、Google Chart Tools やOpen Flash Chart を使うという選択肢もあります）

pChartはバージョン1系と2系が存在しますが、1系は2008年ごろに開発が停止しているようで、PHP5.3系で動かしたりするとエラー吐いたりもするので、最新の2系を使う方がよいでしょう。

ここでは、CentOS5.7＋PHP5.3.8上で2011年9月末時点で最新のpChart2.1.3を使って解説しています。

pChartはGDライブラリを使って描画するため、関連するパッケージやPHPもGDが使えるようにセットアップしておく必要があります。

GDライブラリがPHPから利用可能かは、phpinfo()での出力結果を見てみるのが早いでしょう。

または、pChartのソースをサーバー上で展開してドキュメントルーと以下に配置し、アクセスしてみるのがもっと手っ取り早いかもしれません。

必要な環境がそろっていないと下記のようなエラーメッセージが表示されます。

Warning
It seems that you're not meeting the pChart minimal server requirements: 

  - PHP must be at least 4.x
  - GD version 2.x

環境がそろっていない場合は、GDライブラリやlibjpegやlibpng、libXpmなどをインストールしておきます。

PHPもパッケージから利用している場合は、php-gdパッケージが必要になります。

# yum search php-gd
-snip-
php-gd.x86_64 : gd グラフィックライブラリを使用するための PHP アプリケーション用モジュール
php53-gd.x86_64 : gd グラフィックライブラリを使用

PHPをソースからインストールしている場合は、下記のような感じでconfigureします。

./configure --with-apxs2 \
--enable-mbstring \
--with-openssl \
--with-gd \
--with-jpeg-dir=/usr \
--with-png-dir=/usr \
--with-zlib-dir=/usr \
--with-xpm-dir=/usr \
--with-freetype-dir=/usr \
--with-libdir=lib64

※ ハイライトの箇所がGD関連のオプション

pChartで出力するグラフ内に日本語を使いたい場合のフォントの設定方法については後述しています。

pChartのソースにはかなり豊富なサンプルが用意されています。

ダウンロードしたソースをドキュメントルート以下に配置してアクセスしてみたら、使えるグラフのサンプルとそれを書くためのソースが表示されます。

サンプルの中のグラフを幾つか紹介。

- 折れ線グラフ

- 棒グラフ

- 円グラフ

- レーダーチャート

- バブルチャート

- 株価チャート


- バーコード（発送ラベル）

この他にも散布図や積み上げの棒グラフなど多くの種類のグラフが作成できます。

また、各グラフにはラベルを付けられたり、複数のグラフを合わせて表示するといった画像も作れるようです。

バーコードやそれを加工したラベルのような画像が作れるのはかなりユニークですよね。

これだけ豊富なサンプルが用意されているので、プログラムを書くのもそこまでてこずらずに済みそう、とは思うのですがさらに凄いのは、グラフを作るためのユーザーインターフェースが用意されていること。

先ほどのpChartのトップ画面から「Sandbox」メニューをクリックすると表示されます。

「General settings」メニューで画像サイズや背景色などの一般的な設定を、「Data」メニューでグラフの元になるデータを、「Scale」メニューでグラフの軸やメモリなどの設定を、「Legend, thresholds & Misc」メニューで注釈の表示位置や閾値の設定などができます。

全ての設定が完了したら右上にある「Render picture」でグラフを描画してくれます。

また、そのグラフを作るためのソースコードを「Show code」で表示することが出来ますので、サーバー上に保存すればいつでも呼び出すことが可能です。

ある程度こういうグラフを作りたいって場合も、この機能でソースコードを出力してから改修していけば効率的にプログラミングできるかもしれません。

ただ、デフォルトでは日本語フォントが選択できなかったりするので、使いたい場合はサンドボックスのプログラムに多少手を入れてあげる必要があります。

- サンドボックスで日本語を使う場合

まず最初に、日本語フォントをpChartのfontsディレクトリに格納します。

今回は、CentOS標準で使えるsazanami-gothicフォントを使います。

フォント用のttfファイルをfontsディレクトリにコピーするか下記のようにシンボリックリンクを作成します。

ln -s /usr/share/fonts/japanese/TrueType/sazanami-gothic.ttf sazanami-gothic.ttf

次に、pChartのディレクトリ内にあるexamples/sandbox/index.phpの623行目に定義されているlistfonts関数内に、さざなみフォントを出力するようにoptionタグを追加します。

echo "<option value='advent_light.ttf'>advent_light</option>";
echo "<option value='sazanami-gothic.ttf'>Sazanami</option>";
echo "<option value='Bedizen.ttf'>Bedizen</option>";

これで、サンドボックスからでも下記のようにキャプションに日本語フォントを使用することができます。

で、実際にサンドボックスから書いてみた棒グラフ。

上記のグラフを書くために自動生成されたPHPのソースコードは下記。

<?php
include("class/pData.class.php");
include("class/pDraw.class.php");
include("class/pImage.class.php");

$myData = new pData();
$myData->addPoints(array(12,11,32,4,90,48),"Serie1");
$myData->setSerieDescription("Serie1","Aさん");
$myData->setSerieOnAxis("Serie1",0);

$myData->addPoints(array(22,60,3,0,15,22),"Serie2");
$myData->setSerieDescription("Serie2","Bさん");
$myData->setSerieOnAxis("Serie2",0);

$myData->addPoints(array("1月","2月","3月","4月","5月","6月"),"Absissa");
$myData->setAbscissa("Absissa");

$myData->setAxisPosition(0,AXIS_POSITION_LEFT);
$myData->setAxisName(0,"1st axis");
$myData->setAxisUnit(0,"");

$myPicture = new pImage(500,230,$myData);
$Settings = array("R"=>170, "G"=>183, "B"=>87, "Dash"=>1, "DashR"=>190, "DashG"=>203, "DashB"=>107);
$myPicture->drawFilledRectangle(0,0,500,230,$Settings);

$Settings = array("StartR"=>219, "StartG"=>231, "StartB"=>139, "EndR"=>1, "EndG"=>138, "EndB"=>68, "Alpha"=>50);
$myPicture->drawGradientArea(0,0,500,230,DIRECTION_VERTICAL,$Settings);

$myPicture->drawRectangle(0,0,499,229,array("R"=>0,"G"=>0,"B"=>0));

$myPicture->setShadow(TRUE,array("X"=>1,"Y"=>1,"R"=>50,"G"=>50,"B"=>50,"Alpha"=>20));

$myPicture->setFontProperties(array("FontName"=>"fonts/sazanami-gothic.ttf","FontSize"=>14));
$TextSettings = array("Align"=>TEXT_ALIGN_MIDDLEMIDDLE
, "R"=>255, "G"=>255, "B"=>255);
$myPicture->drawText(250,25,"販売実績",$TextSettings);

$myPicture->setShadow(FALSE);
$myPicture->setGraphArea(50,50,475,190);
$myPicture->setFontProperties(array("R"=>0,"G"=>0,"B"=>0,"FontName"=>"fonts/sazanami-gothic.ttf","FontSize"=>8));

$Settings = array("Pos"=>SCALE_POS_LEFTRIGHT
, "Mode"=>SCALE_MODE_ADDALL_START0
, "LabelingMethod"=>LABELING_DIFFERENT
, "GridR"=>255, "GridG"=>255, "GridB"=>255, "GridAlpha"=>20, "TickR"=>0, "TickG"=>0, "TickB"=>0, "TickAlpha"=>50, "LabelRotation"=>0, "CycleBackground"=>1, "DrawXLines"=>1, "DrawSubTicks"=>1, "SubTickR"=>255, "SubTickG"=>0, "SubTickB"=>0, "SubTickAlpha"=>50, "DrawYLines"=>ALL);
$myPicture->drawScale($Settings);

$myPicture->setShadow(TRUE,array("X"=>1,"Y"=>1,"R"=>50,"G"=>50,"B"=>50,"Alpha"=>10));

$Config = array("DisplayValues"=>1, "Gradient"=>1, "AroundZero"=>1);
$myPicture->drawBarChart($Config);

$Config = array("FontR"=>0, "FontG"=>0, "FontB"=>0, "FontName"=>"fonts/sazanami-gothic.ttf", "FontSize"=>8, "Margin"=>6, "Alpha"=>30, "BoxSize"=>5, "Style"=>LEGEND_ROUND
, "Mode"=>LEGEND_VERTICAL
);
$myPicture->drawLegend(50,15,$Config);

$myPicture->stroke();
?>

プログラムが書けなくてもここまでのことができますし、高度な画像編集ソフトを使う必要も無く、おまけにデザインも綺麗に仕立ててくれて、ライセンスはGPL v3となんか嘘みたいなライブラリになっています。

ただし、このUIを使って描画するには投入できるデータの項目数に限りがあったり、出力できるグラフが限定されていたりというような制限があるので、大規模なデータを使って色んなグラフを書きたいという場合は、やはりプログラミングするしかないかと思いますが。

pChartを使ったプログラミング方法については、次の機会に紹介したいと思います。

[PR]お名前.comのホームページ作成ツール★誰でも簡単にWebクリエイターに

[PR]光ファイバー/ADSLを楽しむなら「安心」「安全」の@nifty！

[PR]SSLサーバ証明書なら[ドメインキーパー]◆VeriSign/GlobalSign/他取り扱い