2011-09-29 00:49:05

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

テーマ:PHP

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

(他にも、JpGraph を使ったり、Google Chart ToolsOpen Flash Chart を使うという選択肢もあります)


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

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



pChartを使い始める前にGDライブラリ関連を確認する


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

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


A Day In The Boy's Life-phpinfo-gd


または、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のソースにはかなり豊富なサンプルが用意されています。

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


A Day In The Boy's Life-pchart-1


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


- 折れ線グラフ

A Day In The Boy's Life-pchart-areachartjpg


- 棒グラフ

A Day In The Boy's Life-pchart-barchart.jpg


- 円グラフ
A Day In The Boy's Life-pchart-piechart.jpg

- レーダーチャート
A Day In The Boy's Life-pchart-radar.jpg


- バブルチャート
A Day In The Boy's Life-pchart-bubblechart.jpg


- 株価チャート
A Day In The Boy's Life-pchart-stockchart

- バーコード(発送ラベル)
A Day In The Boy's Life-pchart-barcode.jpg

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

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

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



ノンプログラミングでのpChartの使い方


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


A Day In The Boy's Life-pchart-2


先ほどの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>";

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


A Day In The Boy&#39;s Life-pchart-4.jpg


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


A Day In The Boy&#39;s Life-pchart-3


上記のグラフを書くために自動生成された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を使ったプログラミング方法の詳細については、「[PHP] pChartの使い方 - 棒グラフとレーダーチャートを描いてみる 」を参考にしてみてください。




いいね!した人  |  コメント(0)  |  リブログ(0)

コメント

[コメントをする]

コメント投稿

AD

Ameba人気のブログ

Amebaトピックス

      ランキング

      • 総合
      • 新登場
      • 急上昇
      • トレンド

      ブログをはじめる

      たくさんの芸能人・有名人が
      書いているAmebaブログを
      無料で簡単にはじめることができます。

      公式トップブロガーへ応募

      多くの方にご紹介したいブログを
      執筆する方を「公式トップブロガー」
      として認定しております。

      芸能人・有名人ブログを開設

      Amebaブログでは、芸能人・有名人ブログを
      ご希望される著名人の方/事務所様を
      随時募集しております。