gRaphael - 動畫折線圖失敗

我遇到了gRaphael javascript折線圖庫的問題。gRaphael - 動畫折線圖失敗

我從包含五列（分鐘數，時間，等待時間，處理中，關閉，位置）的CSV文件構建折線圖。

此前我已經能夠繪製完整的圖表，無需動畫。它正確地有所有四條線等

現在我的代碼在動畫功能上失敗。這裏是錯誤：

Uncaught TypeError: Object # has no method '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

我有以下的庫加載，依次是：

拉斐爾-min.js
g.raphael-min.js
g.line.min.js
jquery.js

在此先感謝您的幫助。

更新： 問題在於動畫方法。即使我在路徑元素上調用方法，我也會收到錯誤。我仍然不知道Raphael爲什麼不認識路徑元素作爲路徑元素。

我試圖禁用jQuery（並用香草javascript替換它的ajax函數），但它沒有幫助。

來源

2012-10-02 Klemola

你可以做一個jsfiddle.net例子 – Neil

並試圖找出elem是什麼類型，最有可能它不是一個拉斐爾路徑對象 – Qnan

該元素是一個路徑元素。它不在jQuery名稱空間中，但似乎jQuery仍然試圖在元素上運行它自己的animate（）函數。我不能輕易做一個小提琴，因爲我需要上傳CSV並且該示例使用4個庫。我會看看我是否可以在某處發佈當前文件。 – Klemola

你可能有一個SVG路徑元素，而不是一個Raphael路徑元素。這可能是elem = chart.lines[i][0];末尾的[0]。

來源

2012-10-03 08:07:02 Plynx

謝謝，就是這樣。我感覺有點蠢，但也鬆了一口氣。 – Klemola

@Klemola我們都在那裏:) – Plynx

有人可以詳細說明這一點嗎？ pastebin鏈接不起作用。我正在嘗試使用相同的技術爲gRaphael線條圖製作動畫。 – AndrewHenderson

gRaphael - 動畫折線圖失敗

回答

相關問題