Question

我正在制作一些条形图，需要更新图表值。我发现这样做的唯一方法是重绘整个事情。有没有办法简单更新吧？如果是这样，我真正希望做的就是改变这种变化。有什么建议吗？

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

我必须调整上面的代码才能使用Raphaël2.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();}

希望这有帮助！

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

2 个答案: