jQuery flotr2 〜グラフ〜

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

rick No33です。
今回は、jQueryのプラグインflotr2を使用して簡単にきれいなグラフを作成します

環境

jQuery　2.1.1

インストール

http://humblesoftware.com/flotr2/よりダウンロード

手順

ダウンロードした中のflotr2.min.jsを読み込む

＜!– 出力先 –＞
＜div id=”graph1″ style=”width:800px;height:300px;”＞＜/div＞

＜!– グラフ作成 –＞
＜script＞
$(document).ready(function(){
var graph=[{data: [[1,10], [2,20], [3, 5]], label: “グラフ1”, yaxis: 1}, {data: [[1,30], [2,1], [3, 15]], label: “グラフ2”, yaxis: 1}];
var option={
title: “グラフ名”,
legend: {
position: “se” //ラベル表示位置(右下)
},
xaxis: {
title: “x軸名”,
ticks: [[1,”1個目”], [2, “2個目”], [3, “3個目”]]
}
}
Flotr.draw($(#graph1)[0], graph, options);
})
＜/script＞

これだけです。 他にも色々グラフがあるので試してみてください。