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

发布于 2024-12-02 18:58:27 字数 206 浏览 2 评论 0原文

我正在处理一些条形图,需要更新图表值。我发现做到这一点的唯一方法是重画整个事情。有没有一种方法可以简单地更新栏?如果是这样,我真正希望做的就是推动这种变化。有什么建议吗?

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

I'm working on some bar charts and need to update the chart values. The only way I've found to do this is to redraw the whole thing. Isn't there a way to simple update the bars? And if so what I'm really hoping to do is animate that change. Any suggestions?

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

独木成林 2024-12-09 18:58:27

这就是你想要的(更新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();
}

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

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

Here's what you want (updated Fiddle).

You were on the right track for creating a new bar chart. The only issue is, you don't want to "display" that bar chart, but you want to use its bars for animation. While this does generate a new graph which we later throw away (using remove()), it seems to be Raphael best practice.

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

This is not complete, as we haven't animated the legends to match the new chart, but this technique applied to the labels should get you there. Basically, we need to re-map the hovers to show new labels (and remove the old labels).

Hopefully, this should work exactly like you hoped. Let me know if you have any issues. Enjoy!

℉服软 2024-12-09 18:58:27

我必须调整上面的代码才能使其与 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();}

希望这会有所帮助!

I had to adapt the above code to get this to work with Raphaël 2.1.0 and g.Raphael 0.51 and 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();}

Hope this helps!

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文