查找动画条形图库或组件

Question

我有兴趣制作一个随时间变化的条形图（理想情况下，条形图会平滑地上下移动，以显示数据随时间的变化）。我没想到这会很困难，但也许由于我的搜索方式，我找不到一个预构建的组件或库来完成这项工作。我遇到过其他显示数据随时间变化的动画图（比如https://developers.google.com/chart/interactive/docs/gallery/motionchart和http://www.highcharts.com/demo/dynamic-update)但没有什么能像我在条形图中描述的那样。如果我能找到一个随时间平稳变化的折线图或饼图，这也会起作用，但如果可能的话，我宁愿制作一个条形图来做这件事。

像这样的应用程序、组件或库是否存在（如果存在，你能给我指明正确的方向吗？）？如果出于某种原因，没有这样的东西可用，那么最接近它的东西是什么（生成这个图表需要最少的努力的路径是什么）？

Answer 1

ZingChart应该能够为您做到这一点，而且它非常易于使用。图表配置是使用JSON对象定义的。在绘图对象内部，动画对象可以包含许多不同的动画选项，包括效果、速度、延迟和顺序。更多关于ZingChart动画效果的信息可以在这里找到。调用render方法是为了告诉ZingChart在哪里使用div的唯一ID来渲染图表。在这个例子中，我配置了一个每3000毫秒调用一次的函数，生成一个0到100之间的随机数字数组，并使用setseriesvalues方法更改plotindex 0处的数据。

var oData = {
  "type": "bar",
  "scaleY": {
    "values": "0:100:10"
  },
  "plot": {
    "animation": {
      "effect": "ANIMATION_SLIDE_BOTTOM"
    }
  },
  "series": [{
    "values": [69, 68, 54, 48, 70, 74, 98, 70, 72, 68, 49, 69]
  }]
};
zingchart.render({
  id: 'myChartDiv',
  width: 600,
  height: 400,
  data: oData
});
setInterval(function() {
  var aValues = [];
  for (var n = 0; n < 12; n++) {
    var num = Math.random() * (100 - 0) + 0;
    aValues.push(num);
  }
  console.log(aValues);
  zingchart.exec('myChartDiv', 'setseriesvalues', {
    plotindex: 0,
    values: aValues
  });
}, 3000);

<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<div id="myChartDiv"></div>

完整免责声明：我是ZingChart团队的一员，但如果还有什么我可以帮助你的，我很乐意帮助你！