jQueryで動的にグラフを作れる「jqPlot」が使いやすい！
CloudPaperの改良で年間売上グラフを入れようと思い、動的に使えるjQueryプラグインを探していたところ「jqPlot」という素敵なプラグインを見つけました。かんたんに導入方法をご紹介します。
色など自由にカスタマイズできるのですが、かんたんな折れ線グラフだとこんな感じで生成できます。ほかにも棒グラフや円グラフもつくれます。
デモはこちら
jqPlotでグラフを作る
jqPlotからまずはファイル一式をダウンロード。解凍するとファイルがたくさんありますが、最低限必要なものはjquery.jqplot.min.jsとjquery.jqplot.min.cssの2つです。ちょっと複雑なことをやろうとするなら、必要に応じてこれら以外のファイルを使います。
<link rel="stylesheet" type="text/css" href="jquery.jqplot.min.css" media="screen,print" title="default">
<!--[if lt IE 9]><script src="excanvas.min.js"></script><![endif]-->
<script type="text/javascript" src="jquery.jqplot.min.js"></script>
<script type="text/javascript" src="jqplot.dateAxisRenderer.min.js"></script>
<script type="text/javascript" src="jqplot.highlighter.min.js"></script>
<div id="line"></div>
<script>
$(document).ready(function(){
// オプション
options = {
highlighter: { //折れ線ポイントにマウスをのせると数値を表示する
show: true,
sizeAdjust: 7.5
},
grid: { //グリッドのカスタマイズ
drawGridLines: false,
gridLineColor: '#eee',
borderColor: '#ccc',
background: '#fff',
shadow: false
},
seriesDefaults: { //シャドウをOFF
shadow: false
},
seriesColors:['#428BCA'], //グラフの色
title:{text:"年間売上"}, //タイトル
axes:{ // 軸
// 横軸(x軸)
xaxis:{
renderer:$.jqplot.DateAxisRenderer,// プラグイン
min: '2014-01-01', // 軸開始の値
max: '2014-12-01', // 軸終了の値
tickInterval:'1 months', // 目盛りの間隔
tickOptions:{formatString:'%Y/%m'} // 表示フォーマット
}
},
axesDefaults: {
min:0 //目盛は0以上を表示
}
}
// 表示データ
data = [[
['2014-01-01',3],
['2014-02-01',1],
['2014-03-01',0],
['2014-04-01',45],
['2014-05-01',0],
['2014-06-01',0],
['2014-07-01',0],
['2014-08-01',0],
['2014-09-01',0],
['2014-10-01',0],
['2014-11-01',0],
['2014-12-01',0]
]]
plot1 = $.jqplot(
"line",
data, // 表示データ
options // オプション
);
});
</script>
そうすると、このようにグラフができあがります。
excanvas.min.jsはIE9未満へ対応するためのライブラリです。
plot1 = $.jqplotが実際にグラフを生成している関数で、データやオプションを私、idがlineの部分にグラフを表示しています。
optionは豊富に用意されているので、自由にカスタマイズできていいですね。
[sc name=”engeneer”]