サイト制作に関するメモ書き

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

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
	});
};

円グラフのデモページ
 

Paper.piechart(cx, cy, r, values, opts) 円グラフを作成。
cx,cyがグラフの中心の座標、rがグラフの半径、valuesがグラフのデータ、optsがグラフのオプションを指定。

 

サンプルコード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
 

【参考サイト】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP