skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

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

｜ ｜ ｜ ｜ ｜ ｜ ｜

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

使用方法
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」サンプル

記事作成：2007年12月07日

前の記事：Appleぽい画像ギャラリーjavascript「MooFlow」
次の記事：色の変化がわかるカラーピッカーjavascript「Interactive Color Picker」