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ël2.1.0とg.Raphael0.51およびJQuery1.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();}

お役に立てれば！