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();} 

希望这有助于！