gRaphael - 动画线图失败

时间:2012-10-02 14:09:44

标签: javascript jquery raphael conflict graphael

我遇到了gRaphael javascript折线图库的问题。

我正在从CSV文件构建一个折线图,该文件有五列(分钟数,时间,等待时间,处理,关闭,位置)。

以前我能够在没有动画的情况下绘制完整的图表。它正确地拥有了所有四条线等。

现在我的代码在动画功能上失败了。这是错误:

  

未捕获的TypeError:对象#没有方法' animate'

我认为jQuery在某种程度上混淆了动画功能,并试图抓住它的缰绳。

        function animateChart(newX, newW, newInT, newC, newInL){
            var chart2 = paper.linechart(
                20, 20, // padding
                newX.length, 400, // dimensions
                newX, [newW, newInT, newC, newInL] // values
            );

            for (i = 0; i < chart.lines.length; i++){
                elem = chart.lines[i][0];
                elem.animate({ path: chart2.lines[i][0].getAttribute("d") }, 200);
            }

            chart2.remove();
        }

完整代码:

http://pastebin.com/YmvkrmQ3

我按顺序加载了以下库:

  1. raphael-min.js
  2. g.raphael-min.js
  3. g.line.min.js
  4. 的jquery.js
  5. 提前感谢您的帮助。

    更新 问题出在animate方法中。即使我在路径元素上调用方法,我也会收到错误。我仍然不知道拉斐尔为什么不认识路径元素作为路径元素。

    我尝试禁用jQuery(并使用vanilla javascript替换它的ajax函数),但它没有帮助。

1 个答案:

答案 0 :(得分:3)

您可能有一个SVG路径元素而不是Raphael路径元素。它可能是[0]末尾的elem = chart.lines[i][0];