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

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

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


animation graph raphael graphael
person circlecube    schedule 02.09.2011    source источник

Ответы (2)


arrow_upward
6
arrow_downward

Вот что вам нужно (обновлено 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();
}

Это не завершено, так как мы не анимировали легенды, чтобы они соответствовали новой диаграмме, но этот метод, примененный к меткам, должен помочь вам в этом. По сути, нам нужно переназначить ховеры, чтобы отображались новые метки (и удалить старые метки).

Надеюсь, это должно работать именно так, как вы надеялись. Дайте мне знать, если у вас есть какие-либо проблемы. Наслаждаться!

person ghayes    schedule 02.09.2011
comment
Я сделал новый Fiddle, который работает с g.Raphael 0.5 (jsfiddle.net/MVwwq/86) - person Tim Swast; 15.02.2012
comment
Рафаэль, похоже, претерпел довольно много изменений с тех пор, как на него был дан ответ (полтора года назад). Не уверен, насколько это применимо к новой библиотеке. - person ghayes; 21.05.2013
comment
Вот обновленная версия, надеюсь, она кому-нибудь поможет: jsfiddle.net/trichask/4NzG2 - person kostas trichas; 30.01.2014

arrow_upward
0
arrow_downward

Мне пришлось адаптировать приведенный выше код, чтобы заставить его работать с Raphael 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();}

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

person Alistair Colling    schedule 26.05.2013