Question

我正在尝试使用SVG Raphael制作折线图。这已经使用canvas执行了。在画布中绘制线条曲线时，会执行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);
}

我知道上面的语法是完全错误的，但这就是要做的最基本的想法。有没有办法执行这个？

编辑：使用的实际代码如下，它给出了错误Object＃没有方法'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
                                        }]    
                                }];

绘制线的功能是：

        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});
         }
        }

Answer 1

只需构造完整的字符串并调用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路径后使用for循环绘制线条

1 个答案: