skuare.net

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」サンプル

｜ ｜ ｜ ｜ ｜ ｜

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

関連記事

• [jQuery]graphTable
• jQueryベースのグラフ作成javascript「Chart Plugin」
• amazonライクにぐるぐる回るJavaScript「3D Image Carousel」
• [jQuery]Confirm
• [jQuery]spinner