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

这并不完整，因为我们还没有对图例进行动画处理以匹配新图表，但是这种应用于标签的技术应该可以帮助您实现目标。基本上，我们需要重新映射悬停以显示新标签(并删除旧标签)。

希望这应该像您希望的那样工作。如果您有任何问题，请告诉我。享受!