後編では、Chart Usage(WebFX)、CSS FOR BAR GRAPHS(Apples To Oranges)、 Artichowを紹介します。
・Chart Usage(WebFX) http://webfx.eae.net/dhtml/chart/usage.html
最初は、JavaScriptのみを使用してグラフを生成してしまうライブラリです。 全ての処理をクライアント側で行うため、グラフを表示するだけならサー バー側のスクリプトは必要はありません。 あらかじめ必要なjsファイル、CSSファイルを読み込んでおき、グラフを出力し たい場所にid付きの<div>タグを設置しておきます。
以下の例では id="chart" の<div>タグ内にグラフが表示されます。 現在このライブラリは、Apache Software License 2.0 に基づいて自由に使用す ることができます。 基本的な作成方法は以下のようになります。
<script type="text/javascript" src="chart/includes/excanvas.js"></script>
<script type="text/javascript" src="chart/includes/chart.js"></script>
<script type="text/javascript"
src="chart/includes/canvaschartpainter.js"></script>
<link rel="stylesheet" type="text/css"
href="chart/includes/canvaschart.css" />
<div id="chart" class="chart" style="width: 400px; height: 200px;"></div>
<script type="text/javascript">
function draw() {
var c = new Chart(document.getElementById('chart'));
var data = new Array(1,2,3,4,5,6,7,8,9,10,11,12);
c.setDefaultType(CHART_BAR);
c.setGridDensity(12, 5);
c.setBarWidth(10);
c.setBarDistance(0);
c.setShowLegend(false);
c.setHorizontalLabels(['', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
c.add('', 'blue', data);
c.draw();
}
draw();
</script>
HTML-GRAPHs(PHP)やWebFXは画像を出力する形式ではないので、JavaScriptと組 み合わせれば凝った仕掛けが導入できるかも知れません。
・CSS FOR BAR GRAPHS(Apples To Oranges) http: //applestooranges.com/blog/post/css-for-bar-graphs/
次はライブラリではなく、CSSを使ったテクニックでグラフを描画する方法です。 CSSを使用しているため、スクリプトファイルは何も用意する必要がありません。 とは言いながら、実はグラフの背景画像、プロットの元画像が必要になります。 このままではそれほど多くの場面で活用できそうにはありませんが、とりあえず グラフが表示したいという場面では役に立つかもしれません。 CSSのテクニックの一つとして頭に入れておくとよいでしょう。 コードは以下の通りです。
<style>
#vertgraph {
width: 378px;
height: 207px;
position: relative;
background: url("css_graph/g_backbar.gif") no-repeat;
}
#vertgraph ul {
width: 378px;
height: 207px;
margin: 0;
padding: 0;
}
#vertgraph ul li {
position: absolute;
width: 28px;
height: 160px;
bottom: 34px;
padding: 0 !important;
margin: 0 !important;
background: url("css_graph/g_colorbar3.jpg") no-repeat !important;
text-align: center;
font-weight: bold;
color: white;
line-height: 2.5em;
}
#vertgraph li.critical { left: 24px; background-position: 0px bottom
!important; }
#vertgraph li.high { left: 101px; background-position: -28px bottom
!important; }
#vertgraph li.medium { left: 176px; background-position: -56px
bottom !important; }
#vertgraph li.low { left: 251px; background-position: -84px bottom
!important; }
#vertgraph li.info { left: 327px; background-position: -112px bottom
!important; }
</style>
<div id="vertgraph">
<ul>
<li class="critical" style="height: 150px;">22</li>
<li class="high" style="height: 80px;">7</li>
<li class="medium" style="height: 50px;">3</li>
<li class="low" style="height: 90px;">8</li>
<li class="info" style="height: 40px;">2</li>
</ul>
</div>
・Artichow http://www.artichow.org/
フランス製のグラフ生成ライブラリです。フランス語が読めないので詳細につ いてはほとんどわかりません。 PHP4・PHP5に対応し、10種類ほどのグラフ形式が描画できるようです。 examples/内にサンプルスクリプトがたくさん入っているので、ドキュメントが 読めない方はこちらを参考にしましょう。
スクリプト内を見ると中身のないメソッドも多く、まだ開発段階という印象を受 けますが、ライセンス形態は public domain となっています。 スクリプトは以下のように記述します。
<?php
require_once "Artichow/BarPlot.class.php";
$graph = new Graph(400, 400);
$graph->setAntiAliasing(TRUE);
$values = array(19, 2, 15, 10, 3, 32, 23, 16, 3, 1, 32, 15);
$month_list = array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul",
"Aug", "Sep", "Oct", "Nov", "Dec");
$plot = new BarPlot($values);
$plot->setBarColor( new Color(50, 50, 180));
$plot->xAxis->setLabelText($month_list);
$graph->add($plot);
$graph->draw();
?>
これを<img>タグから呼び出すことになります。
ここで紹介したもの以外にも多くのグラフ作成ライブラリがあります。 これらを試して自分好みのライブラリを見つけてみてはいかがでしょうか。
※なお、上記の各ライブラリで実際に表示した サンプルがこちらhttp://www.phppro.jp/phptips/sample/graph/です。