定位SVG路径后使用for循环绘制线
我正在尝试使用SVG Raphael制作折线图。 这已经使用画布执行了。 在画布中绘制直线曲线时，将执行moveTo以定位直线的第一个点，然后对连续点应用for循环以使用lineTo绘制直线。 但我不知道如何在Raphael中应用这个。 是否可以在paper.path方法中插入for循环？ 数据如下：
var x1 = pts[0],
y1 = pts[1],
x2 = pts[i]*scaleX,
y2 = pts[i+1]*scaleY;
代码应该遵循这个想法：
paper.path("M" + x1 + "," + x2);
//then a for loop
for(var i=2;i<pts.length-1;i+=2){
paper.path("L" + x2 + "," + y2);
}
我知道上面的语法是完全错误的，但这就是要做什么的基本概念。 有什么办法可以执行这个吗？
编辑：使用的实际代码如下，它给出了错误对象＃没有方法'路径'
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
}]
}];
绘制线的函数是：
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);
上一篇: Drawing lines using a for loop after positioning SVG path