Raphaelで円グラフを作成してみる

Raphaelで円グラフを作成してみます。

サンプルコード

HTML

<div id="chart"></div>

CSS

#chart {
	width: 320px;
	height: 320px;
	margin: 0 auto;
}

JavaScript

var dataArr = [110, 450, 870, 300, 630];
var colorArr = ['#E74C3C', '#3498DB', '#2ECC71', '#9B59B6', '#34495e'];

window.onload = function () {
	var r = Raphael('chart');

	// グラフタイトル
	r.text(160, 10, 'グラフタイトル');

	// グラフ作成
	r.piechart(160, 160, 140, dataArr, {
		colors: colorArr
	});
};

円グラフのデモページ
　

サンプルコード2

円グラフにラベルを表示してみます。

JavaScript

var dataArr = [110, 450, 870, 300, 630];
var labelArr = ['dataA', 'dataB', 'dataC', 'dataD', 'dataE'];
var colorArr = ['#E74C3C', '#3498DB', '#2ECC71', '#9B59B6', '#34495e'];

window.onload = function () {
	var r = Raphael('chart');

	// グラフタイトル
	r.text(160, 10, 'グラフタイトル');

	// グラフ作成
	r.piechart(120, 120, 100, dataArr, {
		colors: colorArr,
		legend: labelArr,
		piechart: 'east'
	});
};

piechart()のオプションlegendでラベルのテキストを、piechartでラベルの位置を指定しています。
円グラフのデモページ2
　

【参考サイト】

• gRaphaël Static Pie Chart
• g.Raphaël Reference