raphaeljs餡餅動態值陣列變化

Question

我使用聖拉斐爾JS餅圖插件

http://raphaeljs.com/pie.html

我需要刷新每5秒圖表值陣列（需要重畫的餡餅） - 我的問題是以下代碼也創建了新的餅圖，而不僅僅是用新值更新現有的 - 簡而言之：我無法只傳遞「值」數組。

var labels = [], 
    values = [60,0], 
    i=60, 
    j=0 
window.setInterval(function(){ 
     i--; 
     j=j+1; 
     if(j>60){ 
      i=60; 
      j=0 
     } 

     values = [i,j]; 

     Raphael("holder", 700, 700).pieChart(350, 350, 250, values, labels, "#fff"); 

}, 5000); 

我只需要用新值更新餅也不要創建新餅。

謝謝！

Answer 1

明智的做法是初始化畫布一次。如果要重繪餅圖，請清除畫布（請參閱文檔中的Paper.clear（）），然後在同一個畫布元素上再次調用pieChart。

例子： http://jsfiddle.net/5DRUh/

(function() { 

    var labels = ['value1', 'value2'], 
     values = [60, 0], 
     i = 60, 
     j = 0; 

    // Setup the canvas just once 
    paper = Raphael('holder', 700, 700); 

    window.setInterval(draw, 5000); 

    // Draw the piechart when the page loads 
    draw(); 

    function draw(){ 
     i--; 
     j = j + 1; 
     if (j > 60) { 
      i = 60; 
      j = 0; 
     } 

     values = [i, j]; 
     paper.clear(); 
     paper.pieChart(350, 350, 200, values, labels, '#fff'); 

    } 
}()); 

Answer 2

其實paper.clear（）可能是不夠的，因爲它沒有爲我工作。

piechart（）函數將一個值數組作爲輸入，但在此調用返回後，您的數組不再相同。

我所做的就是將數組的一個克隆傳遞給piechart（）方法，這樣我的數據就不會被piechart（）函數破壞。