JavaScriptで簡単な円グラフを作成するサンプル : アシアルブログ

2007/04/12 │カテゴリ： Tech　 JavaScript　

JavaScriptで簡単な円グラフを作成するサンプル

最近、巷ではグラフが流行っていますね。
そこで今日は、今、流行の円グラフのJavaScriptでの作成方法を簡単にご紹介しようと思います。

で、JavaScriptで線とか点はCSSを使って強引に書くこともできるかと思いますが、
そういった場合にはグラフィック用に用意されているものを使うほうが断然、楽ができます。
グラフィック用に用意されているものには、『VML』、『SVG』、『CANVAS』があります。
これらのタグはブラウザ依存があり、それぞれのブラウザを意識したコーディングをすることになってきて面倒くさいものです。
とりあえず、IE6以上、Firefox1.5以上、Opera9.0以上、Safari1.3以上、この辺はカバーすることが最低条件です。
この場合、VMLはIEのみ対応ですので問題外です。
次に、SVGはFirefox、Operaに対応していますが、現在、IEとSafariに対応していません。
最後の頼み、CANVASですが、Firefox、Opera、Safariには対応しているのですが、肝心のIEに対応していません。
これではそれぞれ、ブラウザによって使いわける必要があるのかと思いますが、
世の中には便利なものがあるものです。『ExplorerCanvas』です。
これは、このexcanvas.jsをひとつ読み込んでおくだけで、IEでもCANVASを操作できるようにしてくれます。
実際にはIEではVMLで描画されるのですが、スクリプトはCANVASを操作するのとほぼ同じように書くことができます。

※こういった理由から先日リリースしたJSChartではCANVASを使用してグラフを作成しています。

以下、簡単な円グラフのJavaScriptサンプルを作ってみました。

※HTML中に<canvas>タグはあらかじめ書いておく必要があるようです。（IE対策）
●sample.html

<html>
<head>
<script type="text/javascript" src="excanvas.js"></script>
<script type="text/javascript" src="betsuyakuchart.js"></script>
<script type="text/javascript">
window.onload = function() {
var bChart = new BetsuyakuChart("my-canvas", {"fillStyle": "#ff8800"});
bChart.add("データ1", 120);
bChart.add("データ2", 20);
bChart.add("データ3", 10);
bChart.add("データ4", 50);
bChart.stroke();
}
</script>
</head>
<body>
<canvas id="my-canvas" width="200" height="200"></canvas>
</body>
</html>

●betsuyakuchart.js

var BetsuyakuChart = function() {
this.initialize.apply(this,arguments);
};
BetsuyakuChart.prototype.initialize = function(id, options) {
this.canvas = document.getElementById(id);
this.pList = [];
this.sum = 0;
this.margin = 5;
this.options = {"strokeStyle": "#ffffff", "fillStyle": "#dddddd"};
for (var i in options) {
this.options[i] = options[i];
}
};
BetsuyakuChart.prototype.add = function(key, value) {
this.sum += value;
var p = {"key":key,"value": value};
this.pList.push(p);
};
BetsuyakuChart.prototype.stroke = function() {
this.size = {w: this.canvas.offsetWidth, h: this.canvas.offsetHeight};
this.center = {x: this.size.w/2, y: this.size.h/2};
this.radius = Math.min(this.size.w/2, this.size.h/2) - this.margin;
this._oneStroke("fill");
this._oneStroke("stroke");
this._createText();
};
BetsuyakuChart.prototype._oneStroke = function(type) {
var c = this.center;
var context = this.canvas.getContext("2d");
context[type + "Style"] = this.options[type + "Style"] || "#888888";
context.moveTo(c.x, c.y);
context.lineWidth = 2;
var sa = 0;
for (var i = 0; i < this.pList.length; i++) {
var v = this.pList[i].value;
var ea = Math.PI * 2 * v / this.sum;
context.arc(c.x, c.y, this.radius, sa, sa + ea, 0);
context.lineTo(c.x, c.y);
sa += ea;
}
context[type]();
};
BetsuyakuChart.prototype._createText = function() {
//
}

このサンプルでは、凡例がなく、項目名・値もでません^^;
また、色も一色しか表示していませんが、この辺はCANVASのスクリプト操作に慣れれば結構簡単にできるのではないでしょうか。

と、このようにCANVASと『excanvas.js』を使えばブラウザを意識しないでスクリプトを書くことができ非常に簡単に円グラフが作成できます。
PHP等のサーバサイドで画像のグラフを作成する方法や、FLASHを使う方法もありますが
このようにJavaScriptで手軽に作成する方法も試してみてはいかがでしょうか。

参考サイト
・ http://developer.mozilla.org/ja/docs/Canvas_tutorial
・ http://www.openspc2.org/HTML/appendix/canvas_param/