g.raphael條形圖和更新/動畫值

Question

我正在處理一些條形圖並需要更新圖表值。我發現要做到這一點的唯一方法就是重繪整個事情。有沒有辦法簡單地更新酒吧？如果是這樣，我真正希望做的是讓這種變化生動起來。有什麼建議麼？

http://jsfiddle.net/circlecube/MVwwq/

Answer 1

這裏有你想要的東西（更新Fiddle）。

您正在創建新的條形圖的正確軌道上。唯一的問題是，你不想「顯示」該條形圖，但是你想用它的條形圖進行動畫。雖然這確實產生了一個我們後來拋棄的新圖（使用remove()），但它似乎是拉斐爾的最佳實踐。

function b_animate(){ 
    //First, create a new bar chart 
    var c2 = bars.g.barchart(200, 0, 300, 400, [bdata], {stacked: false, colors:["#999","#333","#666"]}); 

    //Then for each bar in our chart (c), animate to our new chart's path (c2) 
    $.each(c.bars[0], function(k, v) { 
    v.animate({ path: c2.bars[0][k].attr("path") }, 200); 
    v.value[0] = bdata[k][0]; 
    }); 

    //Now remove the new chart 
    c2.remove(); 
} 

這是不完整的，因爲我們還沒有動畫的傳說，以匹配新的圖表，但適用於標籤這種技術應該讓你那裏。基本上，我們需要重新映射懸停以顯示新標籤（並刪除舊標籤）。

希望這應該像你希望的那樣工作。如果您有任何問題，請告訴我。請享用！

Answer 2

我不得不去適應上面的代碼得到這個與拉斐爾2.1.0和g.Raphael 0.51和JQuery 1.9.1工作：

function b_animate(){ 
var c2 = bars.barchart(10, 10, 500, 450, bdata, { colors:custom_colors}); 
$.each(c.bars, function(k, v) { 
    v.animate({ path: c2.bars[k][0].attr("path") }, 500); 
    v[0].value = bdata[k][0]; 
}); 
c2.remove();} 

希望這有助於！