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

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

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

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

準備

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

try-to-create-a-bar-chart-with-raphael01

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

try-to-create-a-bar-chart-with-raphael02

今回は棒グラフを作成するので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
	});
};

棒グラフのデモページ
 

Paper.text(x, y, text) テキストを描画。
x,yがテキストの表示座標、textが描画するテキストを指定。
Paper.barchart(x, y, width, height, values, opts) 棒グラフを作成。
x,yがグラフの左上の座標、widthとheightがグラフのサイズ、valuesがグラフのデータ、optsがグラフのオプションを指定。

 

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

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

Paper.hbarchart(x, y, width, height, values, opts) 横向きの棒グラフを作成。
指定方法は基本的にはbarchart()と同じです。

 

【参考サイト】

 

コメントを残す

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

▲PAGE TOP