グラフを作成するjavascript「PlotKit」 : skuare.net

グラフを作成するjavascript「PlotKit」

2007

07/07

Javascriptでグラフ作成する「WebFX」で紹介した「WebFX」は棒グラフや積み上げグラフが作成できましたが、円グラフが作成できませんでした。
liquidx.netでは、PlotKitという円グラフも作成できるJavascriptを紹介しています。

使用方法
PlotKitからファイル一式とMochiKitからMochiKit.jsをダウンロードします。
ダウンロードしたファイルからMochiKit.js、Base.js、Layout.js、Canvas.js、SweetCanvas.jsをhead内に挿入。
グラフを表示したい場所に以下を書きます。
<div><canvas id="graph" height="300" width="300"></canvas></div>
ここで指定した高さと幅が表示されるグラフの大きさになります。
次にグラフの指定です。
<script type="text/javascript"> function drawGraph() { 　　var layout = new PlotKit.Layout("pie", options); 　　layout.addDataset("sqrt", [[0, 0], [1, 20], [2, 35], [3, 40], [4, 15]]);#[項目順,数値] 　　layout.evaluate(); 　　var canvas = MochiKit.DOM.getElement("graph"); 　　var plotter = new PlotKit.SweetCanvasRenderer(canvas, layout, {}); 　　plotter.render(); } MochiKit.DOM.addLoadEvent(drawGraph); </script>
以上で円グラフを作成することができます。
　#var canvasの()内は上記canvasで指定したid名を明記
　#棒グラフの作成は「pie」の部分を「bar」に変更
なお、項目にラベルをつけたい場合は以下をグラフの内容の前に書き込む必要があります。
var options = { "xTicks": [{v:0, label:"項目0"}, {v:1, label:"項目1"}, {v:2, label:"項目2"}, {v:3, label:"項目3"}, {v:4, label:"項目4"}], "drawYAxis": false };
グラフを作成するjavascript「PlotKit」サンプル
追記：IEではoptionsで
"IECanvasHTC": "iecanvas.htc",
を挿入しなければなりません。