Raphael 曲线图使用示例

原创于 2016-11-03 00:53:42 发布 · 524 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Raphael #曲线图 #g.raphael #linechart

js 专栏收录该内容

2 篇文章

订阅专栏

本文介绍使用Raphael JavaScript库创建交互式折线图的方法。包括定义数据集、配置图表选项、实现鼠标悬停提示等功能。

var linesComment=['a','b','c'];///数据线条说明

var dataY=[
           [0, 0, 406, 254, 171, 47, 24, 58, 104, 255, 396, 264],
			[0,0,300,400,300,282,70,50,90,100,110,120],
			[0,0,100,200,300,382,170,150,190,200,210,220]
		];//Y 轴坐标值
var dataX=['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

var dataXS=[0,1,2,3,4,5,6,7,8,9,10,11]; //要显示的第n个 X轴 对应的Y轴值

var options = {
	axis: "0 0 1 1", // 坐标 上 右 下 左
	axisxstep: 11, // X 轴线坐标数  不算坐标原点
	axisxlables: dataX, //X轴坐标值
	axisystep: 4, //Y 轴坐标数   不算坐标原点
	shade:false, // true, false
	smooth:false, //曲线
	nostroke:false,
	width:1,//线条宽度
	dash:false,
	symbol:"circle"
};

$(function () {
	// Make the raphael object
	var r = Raphael("chartHolder"); 
	var lines = r.linechart(
		30, // 图片左边距
		20, // 图片上边距
		600, //图片宽度
		200, // 图片高度
		dataXS, // 要显示的Y 轴
		dataY, // Y 轴
		options // opts object
	).hoverColumn(function () {
        this.tags = r.set();

		var box_x = this.x, box_y = 20,
			box_w = 60, box_h = 13*linesComment.length;
		if (box_x + box_w > r.width) box_x -= box_w;
		//var box = r.rect(box_x,box_y,box_w,box_h).attr({stroke: "#f00", "stroke-width": 1, r:3}); //显示提示数据框
		//this.tags.push(box);//销毁提示数据框
		
        for (var i = 0; i < this.y.length; i++) {
			var t = r.blob(this.x, this.y[i], linesComment[i]+": "+this.values[i]).insertBefore(this).attr([{ fill: "#fff", stroke: "#f0f"}, { fill: this.symbols[i].attr("fill") }]);
        	//var t = r.text(box_x+30, box_y+10 + i*10,linesComment[i]+": "+this.values[i]).attr({fill: this.symbols[i].attr("fill")})
        	this.tags.push(t);
        }
        
    }, function () {
        this.tags && this.tags.remove();
    });

    lines.symbols.attr({ r: 2 });//节点半径
});