javascript - gRaphael - 动画折线图失败

标签 javascript jquery raphael conflict graphael

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

我正在从一个包含五列(分钟数、时间、等待时间、治疗中、关闭、就位)的 CSV 文件构建折线图。

以前我已经能够在没有动画的情况下绘制完整的图表。它正确地包含所有四行等。

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

Uncaught TypeError: Object # has no method 'animate'

我假设 jQuery 以某种方式扰乱了 animate 函数,并试图控制它。

        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. 拉斐尔-min.js
  2. g.raphael-min.js
  3. g.line.min.js
  4. jquery.js

在此先感谢您的帮助。

更新: 问题出在动画方法中。即使我在路径元素上调用该方法,我也会收到错误消息。我仍然不知道为什么 Raphael 不将路径元素识别为路径元素。

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

最佳答案

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

关于javascript - gRaphael - 动画折线图失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12691918/

相关文章:

javascript - 在移动平台上支持 SVG

javascript - Raphael JS 动画问题

Javascript Raphael 动画路径

javascript - 如何根据另一个div使一个div处于左侧位置?

javascript - 当超出文本框限制时以视觉方式向用户指示

javascript - OTP Owncloud 标签隐藏

javascript - 使用 for 循环而不是大型 if 语句通过 jQuery 附加信息

javascript - 计算 jQuery 中动态变化的元素

jquery - 将src文件动态插入音频标签,并将src名称存储在html代码中

jquery - 将元素设置为不可点击,然后设置为可点击