グラフを表示する

説明

JavaScriptでは<canvas>タグをサポートしているブラウザ（Firefox 1.5、Safari 2、Opera 9）では自由にグラフィックを描画することができます。また、Internet Explorerでもキャンバスの処理を動作させるためのライブラリが用意されています。これらを組み合わせてグラフを描画するのがPlotrライブラリです。
グラフを表示するにはHTML文書内に<canvas>タグを指定しておきます。プログラム側では表示するためのグラフ値、グラフの色やラベルなどを指定します。棒グラフを表示する場合はPlotr.BarChart()を使います。パラメータに<canvas>タグのIDと表示オプションを指定します。
表示するデータを設定しrender()メソッドで画面に描画を行います。Plotrライブラリは他にも折れ線グラフや円グラフなどをサポートしています。
JavaScriptテクニック ブック 　詳しい解説などはJavaScriptテクニック ブックを参照してください。

サンプルコード [実行]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>JavaScript Sample</title>
<link rel="stylesheet" type="text/css" href="main.css" media="all">
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="excanvas.js"></script>
<script type="text/javascript" src="Plotr.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<h1>グラフを描く</h1>
<div><canvas id="graph" height="300" width="600"></canvas></div>
<p>前年度対比グラフ</p>
</body>
</html>
window.onload = function(){
var dataset = {
"year2005": [[0, 1], [1, 1], [2, 1.2], [3, 1.5]],
"year2006": [[0, 0.5], [1, 2], [2, 2.15], [3, 4]]
};
var options = {
padding: {left: 50, right: 0, top: 10, bottom: 10},
backgroundColor: "#dbdbdb",
colorScheme: "#550000",
xTicks: [
{v:0, label:"農業"},
{v:1, label:"重工業"},
{v:2, label:"工業"},
{v:3, label:"情報"}
]
};
var bar = new Plotr.BarChart("graph",options);
bar.addDataset(dataset);
bar.render();
}