「PlotKit」でグラフを描こう
「PlotKit」を利用してグラフを描く方法を紹介します。
「PlotKit」はJavaScriptでグラフを書くためのライブラリです。
「PlotKit」を利用するためには、「MochiKit」というJavaScriptのライブラリが必要なります。
インストール方法と簡単なサンプルを示したいと思います。
(A)インストール方法
(1)「PlotKit」をダウンロードします
ダウンロードは「PlotKit」のサイトからできます。
「plotkit-0.9.1」をダウンロードしました。
(2)「MochiKit」をダウンロードします
ダウンロードは「MochiKit」のサイトからできます。
「MonchiKit-1.3.1」をダウンロードしました。
(3)インストールする(展開する)
ダウンロードした2つファイルを、展開します。
展開したら、以下の2つのディレクトリを同じディレクトリ内にコピーします。
ここでは、「js」といディレクトリの中にコピーしたと仮定します。
「MonchiKit-1.3.1/lib/MochiKit」
「plotkit-0.9.1/PlotKit」
次に、「js」ディレクトリにコピーしたディレクトリ名を以下のように変更します。
「MochiKit」-> 「mochikit」
「PlotKit」 -> 「plotkit」
シンボリックリンクを張っていただいても問題ないと思います。
(B)サンプルプログラム
「PlotKit QuickStart」を参考にしてコーディングを進めていきます。
まず、グラフを生成するためのコード「test.js」を示します。
------------------------------- ここから(test.js)
function drawGraph() {
// グラフの形式を指定します(棒グラフを指定しています)
var layout = new PlotKit.Layout("bar", {});
// プロットするデータを指定します([a,b] はxy座標系で(x,y)を意味しています)
layout.addDataset("sqrt", [[0, 0], [1, 1], [2, 1.414], [3, 1.73], [4, 2]]);
// グラフの形式やデータなどからグラフのレイアウトを決定します
layout.evaluate();
// グラフを出力するキャンバスを指定する
// 引数の"graph"は、後で作成するHTMLドキュメント内の<canvas>タグのidと一致させる
var canvas = MochiKit.DOM.getElement("graph");
// グラフを出力するための「renderer」を生成する
var plotter = new PlotKit.SweetCanvasRenderer(canvas, layout, {});
// グラフを出力する
plotter.render();
}
// drawGraphイベントをロードします
MochiKit.DOM.addLoadEvent(drawGraph);
------------------------------- ここまで(test.js)
つづいて、グラフを表示するためのHTMLドキュメント「test.html」を示します。
------------------------------- ここから(test.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>PlotKit</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
// 「Mochikit」 および「PlotKit」ライブラリをロードします
<script src="./js/mochikit/MochiKit.js" type="text/javascript"></script>
<script src="./js/plotkit/Base.js" type="text/javascript"></script>
<script src="./js/plotkit/Layout.js" type="text/javascript"></script>
<script src="./js/plotkit/Canvas.js" type="text/javascript"></script>
<script src="./js/plotkit/SweetCanvas.js" type="text/javascript"></script>
// 「test.js」をロードする
<script src="test.js" type="text/javascript"></script>
</head>
<body>
// グラフを表示する場所に<canvas>タグを指定します
// id="graph"は、「test.js」の「MochiKit.DOM.getElement()」関数に
// 指定した名前と一致させる
<div><canvas id="graph" height="300" width="300"></canvas></div>
</body>
</html>
------------------------------- ここまで(test.html)
(C)グラフの表示を確認
「js」(ディレクトリ)、「test.js」、「test.html」を同じディレクトリに配置して、
「test.html」にアクセスしてください。
棒グラフが表示されれば、ライブラリのインストールとサンプルコーディングは成功です。
