Drawing lines using a for loop after positioning SVG path
I am trying to make a line chart using SVG Raphael. This has already been executed using canvas. While drawing the line curves in canvas a moveTo is done to position the first point of the line, and then a for loop applied for consecutive points to draw a line using lineTo. But I have no idea how to apply this in Raphael. Would it be possible to insert a for loop in the paper.path method? The data are as follows:
var x1 = pts[0],
y1 = pts[1],
x2 = pts[i]*scaleX,
y2 = pts[i+1]*scaleY;
The code should follow this idea:
paper.path("M" + x1 + "," + x2);
//then a for loop
for(var i=2;i<pts.length-1;i+=2){
paper.path("L" + x2 + "," + y2);
}
I know the syntax is completely wrong for the above but thats the basic idea of whats to be done. Is there any way to execute this?
EDIT: The actual code used is as follows which gives the error Object # has no method 'path'
var linedataline = [{dataPoints : [{ x: 0,
y: 0
}, {
x: 20,
y: 20
}, {
x: 35,
y: 25
}, {
x: 26,
y: 32
}, {
x: 47,
y: 40
}, {
x: 42,
y: 47
}, {
x: 65,
y: 68
}, {
x: 85,
y: 88
}, {
x: 110,
y: 120
}]
},
{dataPoints : [{ x: 0,
y: 0
}, {
x: 5,
y: 40
}, {
x: 15,
y: 70
}, {
x: 25,
y: 90
}, {
x: 36,
y: 110
}, {
x: 55,
y: 125
}, {
x: 68,
y: 135
}, {
x: 75,
y: 100
}, {
x: 120,
y: 30
}]
}];
And the function for drawing the line is:
function drawCurveLine(paper, dataline, series, name){
for(var i=0; i<dataline.length; i++){
var x1 = dataline[i].dataPoints[i].x * paper.scaleX,
y1 = dataline[i].dataPoints[i].y * paper.scaleY;
var s = "M" + x1 + "," + y1;
for(var j=0; j<dataline[i].dataPoints.length;j++){
var x2 = dataline[i].dataPoints[j].x * paper.scaleX,
y2 = dataline[i].dataPoints[j].y * paper.scaleY;
s += " L" + x2 + "," + y2;
}
paper.path(s).attr({stroke: "000", "stroke-width": 3});
}
}
只需构造完整的字符串并调用paper.path一次。
var s = "M" + x1 + "," + x2;
for(var i=2;i<pts.length-1;i+=2){
s += " L" + x2 + "," + y2;
}
paper.path(s);
上一篇: SVG标记在Highcharts路径上
下一篇: 定位SVG路径后使用for循环绘制线