« IEでCanvasを使えるようにするライブラリ「ExplorerCanvas」 | トップページ | 選択した画像だけをポップアップしてくれるjQueryのプラグイン »

2011年2月21日 (月)

canvasを利用してグラフを制作するjQueryのプラグイン

Flot

canvasを利用してグラフを制作するjQueryのプラグイン「Flot」をご紹介します。
数値をグラフ化するだけでなく、javascriptのmathオブジェクトを使用してグラフの制作もできます。

デモページ

使用するリソース
jquery.js
jquery.flot.js
excanvas.compiled.js

Internet ExplorerでCanvasを実行するためにexcanvas.compiled.jsも読み込みます。
excanvas.compiled.jsに関してはIEでCanvasを使えるようにするライブラリ「ExplorerCanvas」の記事もご参照ください。

head要素への記入
<script language="javascript" type="text/javascript" src="フォルダ名/jquery.js"></script>
<script language="javascript" type="text/javascript" src="フォルダ名/jquery.flot.js"></script>
<!--[if IE]>
<script type="text/javascript" src="フォルダ名/excanvas.compiled.js"></script>
<![endif]-->

htmlへの記述方法(例)
<div id="ID名" style="width:500px;height:200px"></div>
<script id="source" language="javascript" type="text/javascript">
 $(function () {
 var d1 = [[0, 0], [2, 5], [4, 7], [6, 3], [8, 6], [10, 3], [12, 6], [14, 8]];
 var d2 = [];
  for (var i = 0; i < 14; i += 0.1)
  d2.push([i, Math.sqrt(i * 10)]);

 $.plot($("#ID名"), [
  {data: d1,
  lines: { show: true }},
  {data: d2,
  lines: { show: true }}
  ]);
 });
</script>

var d1 で定義しているグラフが茶色の折れ線グラフとなります。
[x座標, y座標]の数値を入力してカンマで区切ります。

var d2 の数式て定義しているグラフが水色のカーブのグラフとなります。
Mathオブジェクト及びfor文でグラフの数値を決定しています。

lines: { show: true } のlinesは線グラフとして定義しています。
棒グラフにしたい場合は、points: { show: true } とpointsを使用します。

Mathオブジェクトを利用すれば、様々な形のグラフに応用が利きそうですね。

|

« IEでCanvasを使えるようにするライブラリ「ExplorerCanvas」 | トップページ | 選択した画像だけをポップアップしてくれるjQueryのプラグイン »

jQuery」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/1378074/38919813

この記事へのトラックバック一覧です: canvasを利用してグラフを制作するjQueryのプラグイン:

« IEでCanvasを使えるようにするライブラリ「ExplorerCanvas」 | トップページ | 選択した画像だけをポップアップしてくれるjQueryのプラグイン »