0

我正在尝试使用 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);
}

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

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

画线的功能是：

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

1 回答 1

0

只需构造完整的字符串并调用 paper.path 一次。

var s = "M" + x1 + "," + x2;
for(var i=2;i<pts.length-1;i+=2){
  s += " L" + x2 + "," + y2;
}
paper.path(s);
于 2013-11-01T08:32:26.830 回答