jQueryベースでクールなグラフを作成するjavascript「Flot」

PlotkitやPlotorなど各ライブラリにはそれぞれ奇麗なグラフを作成できるプラグインがありました。
jQueryでもFlotとよばれるクールなグラフを作成できるプラグインが登場しました。
jFlot

使用方法
Flotからjquery.flot.jsをjQueryからjquery.js(v1.2.1)をダウロードします。
<script type="text/javascript" src="http://yourdomain/jquery.js"></script>
<script type="text/javascript" src="http://yourdomain/jquery.flot.js"></script>

さらにグラフを表示させたい場所に以下を記述します。
<div id="placeholder" style="width:横幅;height:高さ;"></div>
最後にグラフの数値や種類を書き込むと完成です。
<script type="text/javascript">
$(function () {
var Demo = [[0, 3], [4, 8], [8, 5], [10, 13]]; //Demoの部分は自由です
$.plot($("#placeholder"), [
{ label : "項目名", data: Demo, //Demoは上記で記述したものです
lines: { show: true} //線グラフ:lines、棒グラフ:bars、点:points
},
]);
});
</script>

jQueryベースでクールなグラフを作成するjavascript「Flot」サンプル

sponsors

「jQueryベースでクールなグラフを作成するjavascript「Flot」」をシェアする

記事作成:
記事URL:

TOP > > > jQueryベースでクールなグラフを作成するjavascript「Flot」