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

RaphaelとgRaphaelを使って、棒グラフを作成してみます。

準備

RaphaelのサイトからRaphael本体をダウンロードします。

次にgRaphaelのサイトからグラフ作成用のRaphaelのプラグインを2つダウンロードします。

今回は棒グラフを作成するのでg.bar.jsをダウンロードしますが、作成するグラフの種類によって変更してください。
ダウンロードしたファイルをHTML内で読み込みます。

<script src="./raphael-min.js"></script>
<script src="./g.raphael-min.js"></script>
<script src="./g.bar-min.js"></script>

これで準備完了です。
　

サンプルコード

HTML

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

CSS

#chart {
	width: 320px;
	height: 240px;
	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.barchart(10, 10, 300, 220, dataArr, {
		colors: colorArr
	});
};

棒グラフのデモページ
　

サンプルコード2

上記のサンプルをベースにいくつか調整を行ってみます。

JavaScript

データを2次元配列にしてみます。

var dataArr = [
	[110, 450, 870, 300, 630],
	[150, 320, 480, 560, 600]
];
var colorArr = ['#E74C3C', '#3498DB'];

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

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

	// グラフ作成
	r.barchart(10, 10, 300, 220, dataArr, {
		colors: colorArr
	});
};

2つのデータを比較する棒グラフになりました。
棒グラフのデモページ2
　

JavaScript

barchart()のオプションstackedを設定してみます。

var dataArr = [
	[110, 450, 870, 300, 630],
	[150, 320, 480, 560, 600]
];
var colorArr = ['#E74C3C', '#3498DB'];

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

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

	// グラフ作成
	r.barchart(10, 10, 300, 220, dataArr, {
		colors: colorArr,
		stacked: true
	});
};

2つのデータを合算した形の棒グラフになりました。
棒グラフのデモページ3
　

JavaScript

さらにオプションのtypeを設定してみます。

var dataArr = [
	[110, 450, 870, 300, 630],
	[150, 320, 480, 560, 600]
];
var colorArr = ['#E74C3C', '#3498DB'];

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

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

	// グラフ作成
	r.barchart(10, 10, 300, 220, dataArr, {
		colors: colorArr,
		stacked: true,
		type: 'round'
	});
};

棒グラフが角丸になりました。
棒グラフのデモページ4
　

サンプルコード3

横向きの棒グラフを作成してみます。

HTML

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

CSS

#chart {
	width: 320px;
	height: 240px;
	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.hbarchart(10, 10, 300, 220, dataArr, {
		colors: colorArr
	});
};

横向きの棒グラフのデモページ
　

【参考サイト】

• g·Raphaël Static Bar Charts
• g.Raphaël Reference