animation - g.raphael 条形图和更新/动画值

Question

我正在处理一些条形图，需要更新图表值。我发现这样做的唯一方法是重绘整个事物。没有办法简单地更新酒吧吗？如果是这样，我真正希望做的是为这种变化注入活力。有什么建议么？

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

Answer 1

这就是你想要的（更新的Fiddle）。

您在创建新条形图方面走在了正确的轨道上。唯一的问题是，您不想“显示”该条形图，但您想将其条形用于动画。虽然这确实会生成一个我们稍后丢弃的新图（使用remove()），但这似乎是 Raphael 的最佳实践。

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

我必须修改上面的代码才能使其与 Raphaël 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();}

希望这可以帮助！