あかつきのお宿

はい、そーゆーわけで今回は棒グラフを書いてみましょう。

例のごとく、ソースは基本的にはサンプルサイトのほぼパクリです。ご勘弁。

あまりパクリパクリって公言してると、そのうち本家さんに怒られるかな…？　やっぱりここは影響を受けただけって言っておいた方が良いかな？　かな？

男は黙って棒を出せ

決して性的な意味ではないですぞ。四の五の言わずにとりあえず棒グラフを出力しようぜってことです。

今回も出力結果のページを用意しました。

require_once ('jpgraph/jpgraph.php');
require_once ('jpgraph/jpgraph_bar.php');

// Some data
$databary=array(12,7,16,5,7,14,9,3);

// New graph with a drop shadow
$graph = new Graph(900,400);
$graph->SetShadow();

// Use a "text" X-scale
$graph->SetScale("textlin");

// Set title and subtitle
$graph->title->Set("Bar Graph Sample");

// Use built in font
$graph->title->SetFont(FF_FONT1,FS_BOLD);

// Create the bar plot
$b1 = new BarPlot($databary);

// The order the plots are added determines who's ontop
$graph->Add($b1);

// Finally output the  image
$graph->Stroke();

出力結果

やっていることは前回の折れ線グラフのときと同じです。入力したいデータを用意し、タイトルとか設定したりするとそれがグラフになりますよっと。

これといって難しいことはやってません。単純な棒グラフで良ければ、これだけ書けば描画できます。

iframeを使ってページ内に画像を出力する話は前回したので、今回は省略です。

X軸の値を変える

と・こ・ろ・で。

前回の出力結果もそうでしたが、Y軸の数字はデータの値によって自動的に変わっていまいたが、X軸の方はずっと数字の1から要素の数だけ数字が割り振られてるだけでしたよね。

これはデフォルトがそう出力されるようになっているだけで、もちろんこの設定も変更可能です。

例えば、要素の数を7つにして、曜日を割り当ててみましょうか。

require_once ('jpgraph/jpgraph.php');
require_once ('jpgraph/jpgraph_bar.php');

// Some data
$databary=array(12,7,16,5,7,14,9);

// New graph with a drop shadow
$graph = new Graph(900,400);
$graph->SetShadow();

// Use a "text" X-scale
$graph->SetScale("textlin");

// Set title and subtitle
$graph->title->Set("Bar Graph Sample");

// Use built in font
$graph->title->SetFont(FF_FONT1,FS_BOLD);

//今回追加したコード
$labels = array('月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日', '日曜日');
$graph->xaxis->SetFont(FF_GOTHIC);
$graph->xaxis->SetTickLabels($labels);

// Create the bar plot
$b1 = new BarPlot($databary);

// The order the plots are added determines who's ontop
$graph->Add($b1);

// Finally output the  image
$graph->Stroke();

出力結果

基本的にはほぼ一緒ですが、3行ほどコードが追加されてますね（21～23行目）

気をつけなきゃいけないのは、X軸のラベルは配列のキーが数字の0から順に処理されていくみたいなので、キーを1以降から割り振ったり数字じゃないキーで連想配列を作ったりすると、上手く表示されません。

例えばこんな感じですね。

//数字の1からキーを割り振る
$labels = array('1' => '月曜日', '2' => '火曜日', '3' => '水曜日', '4' => '木曜日', '5' => '金曜日', '6' => '土曜日', '7' => '日曜日');

//アルファベットをキーとした連想配列
$labels = array('a' => '月曜日', 'b' => '火曜日', 'c' => '水曜日', 'd' => '木曜日', 'e' => '金曜日', 'f' => '土曜日', 'g' => '日曜日');

日本語の表示

上のグラフを見ると曜日を日本語で出力していますね。でもデフォルトでは日本語用のフォントファイルがないため、日本語が上手く表示できません。

日本語の表示を可能にするには、こちらのサイトからIPAフォントっていうのをダウンロードする必要があります。

JpGraphのライブラリを丸ごとそのままアップロードした場合は、たぶん『fonts』っていうディレクトリがあるはずなので、そこにダウンロードしたフォントファイル（ipag.ttfとかipam.ttfとかってファイル）をそのディレクトリの中に入れれば日本語フォントも使えるようになります。

グラフの中に値を表示する

さて、前回に引き続き、今回僕が（これも無駄に）つまづいたところです。

何はさておき、とりあえずこちらのサンプルページを見てください。

各棒グラフの上の部分に、数字が出てますよね。

でもね、これがどういうわけだかよく分からないんですけど（ソースを片っ端から調べれば分かるんでしょうけどめんどいのでそれは勘弁願う方向で）、このソースをそのままコピーしても、数字が出ないんですよ。数字どころか、グラフの色とかもオレンジにならない。初期値のまま。

たぶん、このサンプルで使ってるライブラリと僕が落としたライブラリのバージョンが違うせいなんじゃないかと思うんですが、この通りにやっても僕と同じように数字とか出ねぇって場合は、ソースの中身をこんな風に書き換えると上手く行きます。

//サンプルのソース
require_once ("jpgraph/jpgraph.php");
require_once ("jpgraph/jpgraph_bar.php");

$datay=array(12,8,19,3,10,5);

// Create the graph. These two calls are always required
$graph = new Graph(300,200);    
$graph->SetScale("textlin");

// Add a drop shadow
$graph->SetShadow();

// Adjust the margin a bit to make more room for titles
$graph->img->SetMargin(40,30,20,40);

// Create a bar pot
$bplot = new BarPlot($datay);

// Adjust fill color
$bplot->SetFillColor('orange');
$bplot->value->Show();
$graph->Add($bplot);

// Setup the titles
$graph->title->Set("Bar graph");
$graph->xaxis->title->Set("X-title");
$graph->yaxis->title->Set("Y-title");

$graph->title->SetFont(FF_FONT1,FS_BOLD);
$graph->yaxis->title->SetFont(FF_FONT1,FS_BOLD);
$graph->xaxis->title->SetFont(FF_FONT1,FS_BOLD);

// Display the graph
$graph->Stroke();


=================================


//21～23行目を書き換える
$graph->Add($bplot);
$bplot->SetFillColor('orange');
$bplot->value->Show();

やっていることはコードの順番を変えただけです。『$graph->Add()』の前に書いてあったのを、後に持って来てます。

たぶんなんですけど、『$graph->Add()』の時点で設定が初期化されてるんじゃないかと思うんですよね。だからグラフの色を変えたりするのはそれをやった後にすれば解決……ってことなんじゃないかなぁ。

何にせよ、僕の場合はこれで上手くいきました。




というわけで、今回は棒グラフ編でした。

折れ線グラフや棒グラフだけじゃなく、サンプルを見る限りはほんとにいろんなグラフを作成・描画することができるみたいなので、興味があればぜひお試しあれ～。


ちなみに、サンプルの中にはこんなのもあるんだけど……

これ、グラフじゃなくね？