javascript - 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 .