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

Question

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

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

Answer 1

这就是你想要的(更新的小提琴).

您正在创建新条形图的正确轨道上.唯一的问题是,您不希望"显示"该条形图,但您想将其条形图用于动画.虽然这确实产生了一个我们后来扔掉(使用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();
}

这还不完整,因为我们没有动画传说以匹配新图表,但应用于标签的这种技术应该可以帮到你.基本上,我们需要重新映射悬停以显示新标签(并删除旧标签).

希望这应该像你希望的那样工作.如果您有任何问题,请告诉我.请享用!