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 });//节点半径 });
Raphael 曲线图使用示例
猜你喜欢
转载自erntoo.iteye.com/blog/2334996
今日推荐
周排行