2013-11-01 89 views
0

我想使用SVG Raphael制作线条图。这已经使用画布执行了。在画布中绘制直线曲线时,将执行moveTo以定位直线的第一个点,然后对连续点应用for循环以使用lineTo绘制直线。但我不知道如何在Raphael中应用这个。 是否可以在paper.path方法中插入for循环?该数据如下:定位SVG路径后使用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}); 
     } 
     } 

回答

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); 
+0

感谢您的建议。我试了一下,但它给出了错误对象#没有方法'路径'。 –

+0

也许你已经创建了一个名为paper的变量,它隐藏了raphael纸张对象。猜测虽然问题可能在你没有发布的代码中。 –

+0

问题已解决,谢谢您的帮助! –