amcharts svg 条形图上值之间的动画转换

Question

我有一个使用 'amcharts' 插件构建的条形图。

选择下拉菜单项时图表会更新其值，

我正在尝试让图形在值发生变化时为值之间的过渡设置动画，目前它要么重置整个动画并从“0”开始动画，要么 animateAgain() 被注释掉（js 中的第 142 行) 它跳转到新值。更新值后调用此代码：

// Animate between values instead of resetting animation?
chart.animateAgain();  // Resets animation
chart.validateData(); // redraws the chart with new data

我已经搜索了文档和 google 但找不到任何帮助解决这个问题的方法，有人有任何想法或正确方向的指示吗？可能吗？这是代码笔：

http://codepen.io/bananafarma/pen/yewbJQ

干杯！！

Answer 1

您可以使用 amCharts 自己的 Animate plugin。

它为图表对象添加了一个新方法animateData()。

function updateGraph() {
  var newData = chart.dataProvider.slice();
  if( document.getElementById('data-set').value == 1 ) {
    newData[0].gain= 3.8;
    newData[1].gain= 8.5;
    newData[2].gain= 3;
    newData[3].gain= 1.9;
  }
  else if ( document.getElementById('data-set').value == 2 ) {
    console.log("yo");
    newData[0].gain= 2.6;
    newData[1].gain= 8.6;
    newData[2].gain= 13.8;
    newData[3].gain=  4;
  }
  else if ( document.getElementById('data-set').value == 3 ) {
    newData[0].gain= 4.8;
    newData[1].gain= 10.6;
    newData[2].gain= 15.9;
    newData[3].gain= 16;
  }

  // use Animate plugin
  chart.animateData( newData, { duration: 1000 } );

}

这是您的更新 working demo。

amcharts svg 条形图上值之间的动画转换

Animate transition between values on amcharts svg bar graph

html

javascript

charts

animation

amcharts