查找动画条形图库或组件答案

【问题标题】：Finding Animated Bar Chart Library Or Component查找动画条形图库或组件
【发布时间】：2015-04-14 23:05:24
【问题描述】：

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

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

【问题讨论】：

标签： dynamic charts motion

【解决方案1】：

ZingChart 应该可以为您做到这一点，而且它超级好用。图表配置是使用 JSON 对象定义的。在绘图对象内部，动画对象可以包含许多不同的动画选项，包括效果、速度、延迟和序列。更多关于 ZingChart 动画效果的信息可以找到here。调用 render 方法来告诉 ZingChart 使用 div 的唯一 ID 在哪里呈现图表。对于这个例子，我配置了一个函数，每 3000 毫秒调用一次，生成一个 0 到 100 之间的随机数字数组，使用 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 团队的一员，但如果还有什么可以帮助您的，我很乐意提供帮助！

【讨论】：

谢谢，看起来很棒！