гистограмма g.raphael и обновление / анимация значений

Question

Я работаю над некоторыми гистограммами и мне нужно обновить значения графиков. Единственный способ сделать это - перерисовать все это. Разве нет способа простого обновления баров? И если так, то, что я действительно надеюсь сделать, это оживить это изменение. Есть предложения?

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

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

Надеюсь, это поможет!