Raphaelで折れ線グラフを作成してみる

Raphaelで折れ線グラフを作成してみます。

サンプルコード

HTML

<div id="graph"></div>

CSS

#graph {
	width: 600px;
	height: 300px;
	margin: 0 auto;
}

JavaScript

var dataArrX = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
var dataArr = [
	[116.6, 122.4, 128.2, 133.6, 139.0, 145.0, 152.3, 159.5, 165.0, 168.3, 169.9, 170.7],
	[115.6, 121.6, 127.3, 133.6, 140.1, 146.8, 151.8, 154.8, 156.5, 157.0, 157.6, 158.0]
];
var colorArr = ['#3498DB', '#E74C3C'];
window.onload = function () {
	var r = Raphael('graph');

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

	r.linechart(10, 10, 580, 280, dataArrX, dataArr, {
		colors: colorArr
	});
};

折れ線グラフのデモページ
　

サンプルコード2

グラフにメモリを追加してみます。

JavaScript

var dataArrX = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
var dataArr = [
	[116.6, 122.4, 128.2, 133.6, 139.0, 145.0, 152.3, 159.5, 165.0, 168.3, 169.9, 170.7],
	[115.6, 121.6, 127.3, 133.6, 140.1, 146.8, 151.8, 154.8, 156.5, 157.0, 157.6, 158.0]
];
var colorArr = ['#3498DB', '#E74C3C'];
window.onload = function () {
	var r = Raphael('graph');

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

	var lines = r.linechart(10, 10, 580, 280, dataArrX, dataArr, {
		colors: colorArr,
		axis: '0 0 1 1'
	});
};

linechart()オプションのaxisで指定します。
折れ線グラフのデモページ2
　

サンプルコード3

グラフの線を滑らかにしてみます。

JavaScript

var dataArrX = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
var dataArr = [
	[116.6, 122.4, 128.2, 133.6, 139.0, 145.0, 152.3, 159.5, 165.0, 168.3, 169.9, 170.7],
	[115.6, 121.6, 127.3, 133.6, 140.1, 146.8, 151.8, 154.8, 156.5, 157.0, 157.6, 158.0]
];
var colorArr = ['#3498DB', '#E74C3C'];
window.onload = function () {
	var r = Raphael('graph');

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

	var lines = r.linechart(10, 10, 580, 280, dataArrX, dataArr, {
		colors: colorArr,
		axis: '0 0 1 1',
		smooth: true
	});
};

linechart()オプションのsmoothで指定します。
折れ線グラフのデモページ3
　

サンプルコード4

グラフの頂点に●を付けてみます。

JavaScript

var dataArrX = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
var dataArr = [
	[116.6, 122.4, 128.2, 133.6, 139.0, 145.0, 152.3, 159.5, 165.0, 168.3, 169.9, 170.7],
	[115.6, 121.6, 127.3, 133.6, 140.1, 146.8, 151.8, 154.8, 156.5, 157.0, 157.6, 158.0]
];
var colorArr = ['#3498DB', '#E74C3C'];
window.onload = function () {
	var r = Raphael('graph');

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

	var lines = r.linechart(10, 10, 580, 280, dataArrX, dataArr, {
		colors: colorArr,
		axis: '0 0 1 1',
		smooth: true,
		symbol: 'circle'
	});
	lines.symbols.attr({
		r: 4
	});
};

linechart()オプションのsymbolで指定します。
折れ線グラフのデモページ4
　

サンプルコード5

折れ線グラフの下部をグラフと同系の色で塗りつぶしてみます。

JavaScript

var dataArrX = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
var dataArr = [
	[116.6, 122.4, 128.2, 133.6, 139.0, 145.0, 152.3, 159.5, 165.0, 168.3, 169.9, 170.7],
	[115.6, 121.6, 127.3, 133.6, 140.1, 146.8, 151.8, 154.8, 156.5, 157.0, 157.6, 158.0]
];
var colorArr = ['#3498DB', '#E74C3C'];
window.onload = function () {
	var r = Raphael('graph');

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

	var lines = r.linechart(10, 10, 580, 280, dataArrX, dataArr, {
		colors: colorArr,
		axis: '0 0 1 1',
		smooth: true,
		symbol: 'circle',
		shade: true
	});
	lines.symbols.attr({
		r: 4
	});
};

linechart()オプションのshadeで指定します。
折れ線グラフのデモページ5
　

shadeがtrueになっているときにnostrokeをtrueに設定すると、グラフの線と同じ色でベタ塗りになります。

JavaScript

var dataArrX = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
var dataArr = [
	[116.6, 122.4, 128.2, 133.6, 139.0, 145.0, 152.3, 159.5, 165.0, 168.3, 169.9, 170.7],
	[115.6, 121.6, 127.3, 133.6, 140.1, 146.8, 151.8, 154.8, 156.5, 157.0, 157.6, 158.0]
];
var colorArr = ['#3498DB', '#E74C3C'];
window.onload = function () {
	var r = Raphael('graph');

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

	var lines = r.linechart(10, 10, 580, 280, dataArrX, dataArr, {
		colors: colorArr,
		axis: '0 0 1 1',
		smooth: true,
		symbol: 'circle',
		shade: true,
		nostroke: true
	});
	lines.symbols.attr({
		r: 4
	});
};

折れ線グラフのデモページ6
　

【参考サイト】

• gRaphaël Line Charts
• g.Raphaël Reference