[PHP] pChartの使い方 - 棒グラフとレーダーチャートを描いてみる | A Day In The Boy's Life
AmebaAmeba 20th Anniv.ホームピグアメブロ
芸能人ブログ人気ブログ
新規登録
ログイン

A Day In The Boy's Life

とあるエンジニアのとある1日のつぶやき。

[PHP] pChartの使い方 - 棒グラフとレーダーチャートを描いてみる

前回の「ノンプログラミングでも利用可能！PHPで多様なグラフを作れるpChart 」で、pChartの概要を書いてみましたが、多種多様でおまけにスタイリッシュなグラフを簡単に書くことができます。

前回はプログラムについて深く突っ込みませんでしたが、今回はpChartのライブラリを使ってPHPからグラフを描き出す方法について書いてみたいと思います。

 

 

pChartのライブラリを使うための準備

 

pChartのサンプルやサンドボックスを見たい場合は、pChartのソースをそのままドキュメントルート以下に設置するというやり方でも問題ありませんが、クラスライブラリだけを使いたい場合は、ドキュメントルート外におくだけでなく不要なファイルも消しておいたほうがよいでしょう。

まず、pChartのソースの中でクラスライブラリとして利用するにあたって必要なディレクトリは下記のものです。

 

.
`-- pchart
    |-- cache
    |-- class
    |-- data
    `-- fonts

 

各フォルダの中身のファイルはそのままにしておきます。

前回書いたように、日本語フォントを使い他場合は、fontsディレクトリに使いたいフォントのttfファイルを格納しておきましょう。

これらのディレクトリを、php.iniで定義されているinclude_path内に設置しておけば、プログラム側の呼び出し方も簡略化できます。

 

 

pChartで棒グラフを描いてみる

 

サンプルを見てもわかるように、pChartはかなり豊富なオプションがあるので、それらを全て網羅できるようなプログラムを書くのは骨が折れますが、シンプルな棒グラフであれば下記のようにして書くことができます。

 

<?php

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

// データセット用オブジェクトの生成
$myData = new pData();

// データセット1を追加
$myData->addPoints(array(7,2,6,27,47,3,26,28),"Serie1");
// データセット1のラベル
$myData->setSerieDescription("Serie1","チームA");
$myData->setSerieOnAxis("Serie1",0);

// データセット2を追加
$myData->addPoints(array(42,35,42,14,37,18,42,38),"Serie2");
// データセット2のラベル
$myData->setSerieDescription("Serie2","チームB");
$myData->setSerieOnAxis("Serie2",0);

// Y軸に表示する項目
$myData->addPoints(array("1月","2月","3月","4月","5月","6月","7月","8月"),"Absissa");
$myData->setAbscissa("Absissa");

// グラフのサイズとデータセットを引数に渡してpChartオブジェクトを生成
$myPicture = new pImage(500,230,$myData);

// フォントとサイズを指定
$myPicture->setFontProperties(array("FontName"=>"pchart/fonts/sazanami-gothic.ttf","FontSize"=>16));

// グラフの出力位置と大きさを指定(右からX軸、Y軸、幅、高さ)
$myPicture->setGraphArea(60,60,450,190);

// 背景色と背景色に入れる斜線の色を指定
$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"=>210, "StartG"=>252, "StartB"=>197,
    "EndR"=>138, "EndG"=>143, "EndB"=>106,
    "Alpha"=>70);
// 背景を描く
$myPicture->drawGradientArea(0,0,700,230,DIRECTION_VERTICAL,$Settings);

// テキストの出力位置と文字の色を指定
$TextSettings = array("Align"=>TEXT_ALIGN_MIDDLEMIDDLE, "R"=>0, "G"=>0, "B"=>0);
// テキストの出力位置、文字列とフォントの情報を引数にしてタイトルを出力
$myPicture->drawText(250,25,"販売実績",$TextSettings);

// フォンとサイズを切り替え
$myPicture->setFontProperties(array("FontName"=>"pchart/fonts/sazanami-gothic.ttf","FontSi
ze"=>8));

// メモリを描く
$myPicture->drawScale();

// ラベルの説明文のオプションと表示
$Config = array(
    "FontR"=>0, "FontG"=>0, "FontB"=>0, // ラベルのフォントの文字色
    "Margin"=>6, // ラベルのマージン
    "Alpha"=>30, // ラベルの透明度
    "Style"=>LEGEND_ROUND, // ラベル枠の形式(角丸)
    "Mode"=>LEGEND_HORIZONTAL); // ラベル内の文字の表示形式(水平)
$myPicture->drawLegend(380,25,$Config);

// グラフのバーにデータセットの数値を表示する、グラデーションを付けるオプション
$Config = array("DisplayValues"=>1, "Gradient"=>1, "AroundZero"=>1);
// 描くグラフの種類をメソッド名で指定
$myPicture->drawBarChart($Config);

// 描いたグラフの保存
$myPicture->render("mypic.png");
//$myPicture->autoOutput("mypic.png");

echo "<img src='mypic.png' />";

 

上記のプログラムにより出力されるグラフは下記の通りです。


A Day In The Boy&#39;s Life-pchart-棒グラフ.jpg

 

基本的なpChartのライブラリの使い方はコメントの通りですが、幾つか追加で解説が必要なところもありますので、追加で書いてみたいと思います。

- テキスト（グラフタイトル）の追加のオプション

 

// テキストの出力位置と文字の色を指定
$TextSettings = array("Align"=>TEXT_ALIGN_MIDDLEMIDDLE, "R"=>0, "G"=>0, "B"=>0);

 

このAlignという項目で指定している「TEXT_ALIGN_MIDDLEMIDDLE」という定数ですが、文字列の中心に揃えて表示するというもので、他にも幾つか存在し指定の方法によって表示位置が変わってきます。

このオプションは、下記のpChartのマニュアルに詳細が記載されているので、そちらを参照してください。

 

drawText - Write text ＠ pChartマニュアル

 

- 背景とテキスト、オプションの表示順序

 

どうもpChartは指定したオプションや呼び出したメソッドの順番にグラフのパーツを描いていくようで、その順番を間違えたら、思ったとおりのグラフが出来上がりません。

例えば、テキストを書き出した（drawText）後に背景を書く（drawFilledRectangle）とテキストが隠れて表示されません。

また、フォンとサイズなども指定した以降が有効になるため、サイズを変更した場合それ以降の文字の大きさが全て変わってきます。（個別のメソッドの引数としてフォンとサイズが指定できる場合もありますが）

 

- ファイルの書き出しと表示

 

ファイルの書き出しは、render()で行いますが、これはファイルを書き出すだけなので、個別にIMGタグを生成してファイルを画面上に出力しています。

ただ、サーバー上へのファイルの保存が必要ない場合、下記のようにすることで画面に出力することもできます。

（この場合、IMGタグは必要ありません）

 

$myPicture->autoOutput("mypic.png");

 

ただし、autoOutputはheader関数を使ってファイルを出力するようで、事前に出力していた場合はWarningが発生してしまうので注意が必要です。

ちなみに、autoOutputはプログラムをCLIで動かした場合は、自動的にファイルを保存してくれます。

 

 

pChartでレーダーチャートを描いてみる

 

今度は、pChartを使ってレーダーチャートを書く方法です。

 

<?php

include("pchart/class/pData.class.php");
include("pchart/class/pDraw.class.php");
include("pchart/class/pRadar.class.php");
include("pchart/class/pImage.class.php");

// データセット用オブジェクトを生成
$MyData = new pData();

// スコアのデータセット
$MyData->addPoints(array(10,5,6,1,5,7,0),"ScoreA");
$MyData->setSerieDescription("ScoreA","Application A");
$MyData->setPalette("ScoreA",array("R"=>150,"G"=>5,"B"=>217));

// チャートの項目
$MyData->addPoints(array("攻撃力","守備力","魔力","賢さ","すばやさ","運のよさ","魅力"),"Point");
$MyData->setAbscissa("Point");

// グラフのサイズとデータセットを引数に渡してpChartオブジェクトを生成
$myPicture = new pImage(350,350,$MyData);

// 背景色と背景色に入れる斜線の色を指定
$Settings = array("R"=>170, "G"=>183, "B"=>87, "Dash"=>1, "DashR"=>190, "DashG"=>203, "DashB"=>107);
// 背景を描く
$myPicture->drawFilledRectangle(0,0,350,350,$Settings);

// グラフのタイトルをセット
$myPicture->setFontProperties(array("FontName"=>"pchart/fonts/sazanami-gothic.ttf","FontSize"=>8));
// グラフタイトルを書く
$myPicture->drawText(10,18,"勇者のステータス",array("R"=>0,"G"=>0,"B"=>0));

// フォンとサイズ、色のを切り替え
$myPicture->setFontProperties(array("FontName"=>"pchart/fonts/sazanami-gothic.ttf","FontSize"=>8,"R"=>80,"G"=>80,"B"=>80));

// グラフに影を付ける
$myPicture->setShadow(TRUE,array("X"=>5,"Y"=>5,"R"=>0,"G"=>0,"B"=>0,"Alpha"=>10));

// レーダーチャート作成用オブジェクトを生成
$SplitChart = new pRadar();

// レーダーチャートを書くX軸、Y軸、幅、高さ
$myPicture->setGraphArea(45,25,320,320);
// レーダーチャートのオプション
$Options = array(
    "FixedMax"=>10, // データセットの最大値
    "WriteValues"=>TRUE, // データセットの値を表示
    "DrawPoly"=>TRUE, // データセットをつないだ領域を塗りつぶす
    "AxisRotation"=>-90, // グラフの回転角度
    "Layout"=>RADAR_LAYOUT_STAR, // レーダーチャートのレイアウト(星型)
    "LabelPos"=>RADAR_LABELS_HORIZONTAL, // ラベルの表示形式(水平)
    "BackgroundGradient"=> // レーダーチャート内のグラデーション
        array(
            "StartR"=>255,"StartG"=>255,"StartB"=>255,
            "StartAlpha"=>100,
            "EndR"=>207,"EndG"=>125,"EndB"=>227,
            "EndAlpha"=>50)
    );
// レーダーチャートを描く
$SplitChart->drawRadar($myPicture,$MyData,$Options);

// 描いたグラフの保存
$myPicture->render("mypic.png");

echo "<img src='mypic.png' />";

 

上記のプログラムにより出力されるグラフは下記の通りです。


A Day In The Boy&#39;s Life-pchart-レーダーチャート.jpg

 

グラフの種類が変われば、呼び出すクラスライブラリの数からセットするオプションやメソッドまで異なってきます。

注意点としては、棒グラフと同じものもありますがレーダーチャートを作る上での一番のポイントになるのは、レーダーチャートを出力するdrawRadar()の引数となるオプションでしょうか。

かなり数も多いのですが、こちらも下記のマニュアルを参考にしてみてください。

 

drawRadar - Draw radar charts ＠ pChartマニュアル

 

個人的にどうすればいいかわかりづらかった部分を幾つかピックアップしてみます。

 

- チャートのラベルの表示形式

 

チャートの周りのラベル（攻撃力とか防御力とかの部分）がデフォルトだと、チャートの方向にあわせて回転していく表示（RADAR_LABELS_ROTATED）になっていたので、それを水平に表示するためのオプションが下記になります。

 

"LabelPos"=>RADAR_LABELS_HORIZONTAL, // ラベルの表示形式(水平)

 

- グラフを回転させる

 

デフォルトの表示だとうまく最初のラベル（図の攻撃力の部分）が一番上に表示されなかったので、グラフを回転させて調整しています。

 

"AxisRotation"=>-90, // グラフの回転角度

 

- チャートの表示形式

 

レーダーチャートは丸型と星型（デフォルトの表示形式）の2つがあるみたいで（図は星型）、丸型にしたい場合は下記のように指定します。

 

"Layout"=>RADAR_LAYOUT_CIRCLE, // レーダーチャートのレイアウト(丸型)

 

サンプルが豊富にあり、サンドボックスを利用して最初からプログラムを書かなくてもソースを取り出すことも可能なので、そのあたりを参考にしながらオプションを調整していけば、思い通りのグラフが描けるのではないでしょうか。

 

[PR]ビジネスに信頼の無停止レンタルサーバー アイルの「iCLUSTA」

[PR]重いパソコンがサクサク動くウイルス対策ソフト

[PR]海外WiFiレンタルなら！イモトのWiFi

 

関連記事

[JS] 多様なグラフを作ることができるC3.js

 

[jQuery] 組織図が簡単に書けるOrgChart

 

[PHP] 簡単に画像の加工ができるintervention/image

 

PHPで簡単に日付操作ができるライブラリCarbon

 

[PHP] 余計なHTMLタグや属性を消してくれるHTML Purifier

 

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

 

画像からExifの読取り削除するコマンドあれこれ

 

Webページをコマンドラインから一発でPDFや画像に変換する

 

ImageMagickを使ってコマンドラインからCAPTCHAを作ってみる

 

PHPでブラウザのキャッシュを利用させる検証