Raphaelで作成したグラフにホバーイベントを追加する

Raphaelで作成したグラフにオンマウス時になにか処理を追加してみます。

サンプルコード

HTML

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

CSS

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

JavaScript

// 棒グラフのデータ
var barData = [110, 450, 870, 300, 630];
var barColor = ['#E74C3C', '#3498DB', '#2ECC71', '#9B59B6', '#34495e'];

// 円グラフのデータ
var pieData = [110, 450, 870, 300, 630];
var pieLabel = ['dataA', 'dataB', 'dataC', 'dataD', 'dataE'];
var pieColor = ['#E74C3C', '#3498DB', '#2ECC71', '#9B59B6', '#34495e'];

// 折れ線グラフのデータ
var lineDataX = [
	[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
];
var lineDataY = [
	[-3.6, -3.1, 0.6, 7.1, 12.4, 16.7, 20.5, 22.3, 18.1, 11.8, 4.9, -0.9],
	[17.0, 17.1, 18.9, 21.4, 24.0, 26.8, 28.9, 28.7, 27.6, 25.2, 22.1, 18.7]
];
var lineColor = ['#3498DB', '#E74C3C'];

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

	// 棒グラフ
	r.text(150, 10, '棒グラフ');
	r.barchart(10, 10, 280, 280, barData, {
		colors: barColor
	}).hover(function() {
		// 棒グラフオンマウス時のイベント
		this.flag = r.popup(this.bar.x, this.bar.y, this.bar.value).insertBefore(this);
	}, function() {
		// 棒グラフマウスアウト時のイベント
		this.flag.animate({
			opacity: 0
		}, 300, function() {
			this.remove();
		});
	});

	// 円グラフ
	r.text(430, 10, '円グラフ');
	r.piechart(430, 120, 90, pieData, {
		colors: pieColor,
		legend: pieLabel,
		piechart: 'east'
	}).hover(function() {
		// 円グラフオンマウス時のイベント
		this.sector.stop();
		this.sector.scale(1.1, 1.1, this.cx, this.cy);

		if(this.label) {
			this.label[0].stop();
			this.label[0].attr({
				r: 7.5
			});
			this.label[1].attr({
				'font-weight': 'bold'
			});
		}
	}, function() {
		// 円グラフマウスアウト時のイベント
		this.sector.animate({
			transform: 's1 1 ' + this.cx + ' ' + this.cy
		}, 500, 'bounce');

		if(this.label) {
			this.label[0].animate({
				r: 5
			}, 500, 'bounce');
			this.label[1].attr({
				'font-weight': 'normal'
			});
		}
	});

	// 折れ線グラフ
	r.text(300, 300, '折れ線グラフ');
	var lines = r.linechart(10, 310, 580, 280, lineDataX, lineDataY, {
		colors: lineColor,
		axis: '0 0 1 1',
		smooth: true,
		symbol: 'circle'
	}).hoverColumn(function() {
		// 折れ線グラフオンマウス時のイベント
		this.tags = r.set();
		for (var i = 0, ii = this.y.length; i < ii; i++) {
			this.tags.push(r.tag(this.x, this.y[i], this.values[i], 160, 10).insertBefore(this).attr([
				{
					fill: '#fff'
				}, {
					fill: this.symbols[i].attr('fill')
				}
			]));
		}
	}, function() {
		// 折れ線グラフマウスアウト時のイベント
		this.tags && this.tags.remove();
	});
	lines.symbols.attr({
		r: 4
	});
};

オンマウス時に処理追加のデモページ
　

【参考サイト】

• gRaphaël Dynamic Bar Chart
• g·Raphaël Dynamic Pie Chart
• gRaphaël Line Charts