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

Posted 2023-04-14

【中文标题】amcharts svg条形图上的值之间的动画转换

【英文标题】：Animate transition between values on amcharts svg bar graph

【发布时间】：2016-02-15 16:07:45

【问题描述】：

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

干杯！！

【参考方案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。

【讨论】：

嗯，由于某种原因，现在（有时）图表数据值添加了很多小数点，这意味着当我在真实图表的列上添加标签时，有些不会显示。我认为这是一个 json 字符串化的东西..？虽然我尝试添加这个***.com/a/9340239/4517209（减少数字重要性）但结果仍然相同，这让我认为它是 animateData() - 或者缺少 validateData() ...imgur.com/o2WUJX0

嗯，我似乎无法重现这个。你有可以分享这种行为的演示吗？

不会发生 100% 的情况，但总是在数据之间切换几次后，不知道为什么，但看起来确实像某种字符串问题。 codepen.io/bananafarma/pen/ONPydR 。我发现这个属性会有所帮助，但是给它赋值 -1 会在一些数字中间返回 undefined （值 0 是否按预期工作？） "numberFormatter": precision:-1 （在第 51 行注释掉）非常感谢！