在图表 svg 条形图上的值之间设置动画转换

Animate transition between values on amcharts svg bar graph

本文关键字：之间 设置 动画 转换 svg 条形图      更新时间：2023-09-26

我有一个使用"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

干杯！！

您可以使用amCharts自己的Animate插件。

它为图表对象添加了一个新方法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 } );
}

这是您更新的工作演示。

相关文章：