PHPとjQueryライブラリ「jqPlot」で綺麗なグラフを描画する【5/10】
さて、折れ線グラフのデータを元に、まずは棒グラフを作成してみよう。
最初にほぼプレーンな折れ線グラフを描画してみる。分かりやすいように、読み込むライブラリは最低限にしておく。
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.jqplot.min.js"></script>
データなどの定義はこのようにしてみた。
$(document).ready(function(){
var data1 = [8,5,7,6,9,12,5,1,2,4,3,7,1,2,1,3,4,6,9];
plot = $.jqplot('graph', [data1]);
});
少々x軸方向へのデータが多いので、HTMLで作成した描画エリアも多少サイズを変更しておいた。
<h1>jqPlot Test 2</h1>
<div id="graph" style="width:600px;height:200px;margin:30px;"></div>
これをブラウザで表示させると、以下のようになった。
これを折れ線グラフから、棒グラフへ変更してみる。
デフォルトでは折れ線だが、そのほかの形式へ変更するには、都度プラグインを読み込む必要がありそうだ。棒グラフの場合、barRendererプラグインになる。
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.jqplot.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.barRenderer.min.js"></script>
これで棒グラフを描画する準備が整った。
次に、plotに対して例によってオプションを指定しよう。グラフ全体に関わるデフォルト値として、seriesDefaultというプロパティが用意されているので、早速追記しておく。
plot = $.jqplot('graph', [data1], {
seriesDefaults: {
}
});
さて、このseriesDefaultに何を指定するのか、だ。このままでは折れ線グラフは棒グラフにはならない。よって、グラフの形態を変更するためのrendererプロパティをまずは記述しようじゃないか。
plot = $.jqplot('graph', [data1], {
seriesDefaults: {
renderer:$.jqplot.BarRenderer
}
});
これで棒グラフが描画されるはずだ。早速ブラウザで見てみる。
棒グラフにはなったはなったが、なんじゃこれは。使い物になるレベルではない。これではよろしさが皆無である。
』だ。
