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

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

sponsors

使用方法

PlotKitからファイル一式とMochiKitからMochiKit.jsをダウンロードします。
ダウンロードしたファイルからMochiKit.jsBase.jsLayout.jsCanvas.jsSweetCanvas.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);#円グラフの場合は「pie」、棒グラフは「bar」を指定
  layout.addDataset("sqrt", [[0, 0], [1, 20], [2, 35], [3, 40], [4, 15]]);#[項目順,数値]
  layout.evaluate();
  var canvas = MochiKit.DOM.getElement("graph");#"canvasで指定したid名"
  var plotter = new PlotKit.SweetCanvasRenderer(canvas, layout, {});
  plotter.render();

}
MochiKit.DOM.addLoadEvent(drawGraph);
</script>
以上で円グラフを作成することができます。
なお、項目にラベルをつけたい場合は以下をグラフの内容の前に書き込む必要があります。
var options = {
"IECanvasHTC": "/plotkit/iecanvas.htc",
"colorScheme": PlotKit.Base.palette(PlotKit.Base.baseColors()[0]),
"padding": {left: 0, right: 0, top: 10, bottom: 30},
#項目ラベルの指定
"xTicks": [{v:0, label:"zero"},
{v:1, label:"19歳以下"},
{v:2, label:"20-29歳"},
{v:3, label:"30-39歳"},
{v:4, label:"40歳以上"}],
"drawYAxis": false
};
IEではoptionsでiecanvas.htcを挿入しなければなりません。

sponsors

Javascriptサンプルページ一覧
skuare.net