查找动画条形图库或组件

Question

我对制作随时间变化的条形图很感兴趣（理想情况下，条形图会平滑地上下移动以显示数据随时间的变化）。我没想到这会很困难，但可能由于我搜索的方式，我找不到执行此操作的预构建组件或库。我遇到过其他显示数据随时间变化的动画图（如 https://developers.google.com/chart/interactive/docs/gallery/motionchart and http://www.highcharts.com/demo/dynamic-update），但没有任何效果与我在条形图中描述的一样。如果我能找到一个随时间平滑变化的折线图或饼图，它也会起作用，但如果可能的话，我宁愿制作一个条形图来做到这一点。

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

Answer 1

ZingChart 应该可以为您做到这一点，而且超级好用。图表配置是使用 JSON 对象定义的。在绘图对象内部，动画对象可以包含许多不同的动画选项，包括效果、速度、延迟和序列。更多ZingChart的动画效果可以参考here. The render method is called to tell ZingChart where to render the chart using a div's unique ID. For this example, I configured a function to be called every 3000 milliseconds, generating a random array of numbers between 0 and 100, using the setseriesvalues method更改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 团队的一员，但如果有什么我可以帮助您的，我很乐意提供帮助！

查找动画条形图库或组件

Finding Animated Bar Chart Library Or Component

charts

dynamic

motion