チャートライブラリー jqPlot
jqPlotは無料のチャートライブラリーで
株価チャートなども扱える
ライセンスはGPL ver2になり
商用プロダクトやオープンソースで使える
http://www.jqplot.com
からダウンロードできる
ダウンロードしたら解凍し
この中で使うのは
jquery.jqplot.min.js
jquery.jqplot.min.css
pluginフォルダー
まずは簡単なグラフから
jqPlotは、プラグインを組み合わせて
グラフの描画をする
プラグインは
レンダラと呼ばれるグラフや
線を描画するプラグインと
その他のプラグインがある
チャート用のレンダラには
棒グラフ、円グラフを担当
軸ラベル用のレンダラは、x,y軸を担当
メモり用のレンダラは、日付、対数、斜め描画を担当
その他のプラグインでは、
ズーム、値の表示、トレンド線などを担当する
jqPlotでは、これらのプラグインを組み合わせて、いろいろなグラフを描画する
簡単な線を書くには
まず、HTMLファイルで
<link rel="stylesheet" href="js/jqplot/jquery.jqplot.min.css"> <script src="js/jquery.jqplot.min.js"></script> <script src="js/jqplot/plugins/jqplot.canvasTextReaderer.min.js"></script> <script src="js/jqplot/plugins/jqplot.canvasAxisLabelReaderer.min.js"></script> <script src="js/jqplot/plugins/jqplot.curssor.min.js"></script> <script src="js/jqplot/plugins/jqplot.mobile.min.js"></script> <script src="js/jqplot/plugins/custom-basicchart.js"></script>
で必要なライブラリーを読み込む
表示領域については
<div data-role="page" id="chartbasic"> <div data-role="header"> <h1>jqPlotの基本</h1> </div> <div data-role="content"> <div id="chart"></div> </div> </div>
となる
Javascript部分は
custom-basicchart.jsで書く
var data = [
[[1,1],[2,2],[3,5],[4,2],[5,4]], //データ1
[[1,6],[2,4],[3,3],[4,4],[5,5]] //データ2
];
//プラグインの有効化
$.jqplot.configenablePlugins = true;
var opts={
title:’グラフタイトル’,
series:[
{label:’データ1′,
showMarker:false},
{label:’データ2′,
showMarker:false},
],
legend:{
show:true;
location:’ne’,
},
xaxis:{
label:’x軸ラベル’,
labelReaderer:$.jqplot.CanvasAxisLabelReaderer,
tickReaderer:$.jqplot.CanvasAxisTickReaderer,
tickOptions:{angle- 30}
},
yaxis:{
label:’y軸ラベル’,
labelReaderer:$.jqplot.CanvasAxisLabelReaderer,
tickReaderer:$.jqplot.CanvasAxisTickReaderer,
}
},
cursor:{zoom:true}
};
$(document).on(“pageshow”,”#chartbasic”,function(e){
plot = $.jqplot(“chart”,data,opts);
});
$(window).on(“orientationchange”,function(e){
plot.replot();
});
$(document).on(“pagehide”,”#chartbasic”,function(e){
plot.destroy();
});
なんとなく書き方はGoogle chart に似ている
では、解説
まず、スタイルの
jquery.jqplot.min.css
jqPlot本体になる
jquery.jqplot.min.js
そして、プラグインの
jqplot.xxx
で始まるプラグインを読み込む
ここで軸とか目盛りのカスタマイズに必要なプラグインを読み込んでいる
スマートフォンで利用するときに便利なプラグインとして
jqplot.cursor
jqplot.mobile
を入れておく
これは、スマートフォンだと
グラフの描画領域が狭くなるけど
この2つのプラグインを入れることで
グラフをタッチしてなぞると指定領域の拡大表示が可能になる
次に、jqplotでのグラフ作成
処理のJavascriptは
$.jqplot.config.enablePlugins = true;
plot = $.jqplot("chart",data,opts);
描画領域は
<div id="chart"></div>
となる
$.jqplot.config.enablePlugins
は、プラグインの利用設定
これは、ほとんどの場合プラグインは使うから true
plot = $.jqplot(“chart”,data,opts);
の
一番目の引数の
“chart”は、グラフを描画する要素のid
つまり、今回なら
<div id="chart"></div>
で id=”chart”になっているから
2番目の引数はデータ
3番目の引数はオプションになる