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

我已经搜索了文档和谷歌，但找不到任何帮助，有人有任何想法或指向正确方向吗？是否可以？这是代码笔：

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。