我正在處理一些條形圖並需要更新圖表值。我發現要做到這一點的唯一方法就是重繪整個事情。有沒有辦法簡單地更新酒吧?如果是這樣,我真正希望做的是讓這種變化生動起來。有什麼建議麼?g.raphael條形圖和更新/動畫值
http://jsfiddle.net/circlecube/MVwwq/
我正在處理一些條形圖並需要更新圖表值。我發現要做到這一點的唯一方法就是重繪整個事情。有沒有辦法簡單地更新酒吧?如果是這樣,我真正希望做的是讓這種變化生動起來。有什麼建議麼?g.raphael條形圖和更新/動畫值
http://jsfiddle.net/circlecube/MVwwq/
這裏有你想要的東西(更新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();
}
這是不完整的,因爲我們還沒有動畫的傳說,以匹配新的圖表,但適用於標籤這種技術應該讓你那裏。基本上,我們需要重新映射懸停以顯示新標籤(並刪除舊標籤)。
希望這應該像你希望的那樣工作。如果您有任何問題,請告訴我。請享用!
我不得不去適應上面的代碼得到這個與拉斐爾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();}
希望這有助於!
感謝,似乎這樣做! – circlecube
我做了一個新的小提琴與g.Raphael 0.5(http://jsfiddle.net/MVwwq/86/) –
@ ghayes小提琴不起作用:( – Muhammed