Question

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

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

Answer 1

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

＆＃13;

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);

＆＃13;

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

＆＃13;

完全免责声明：我是ZingChart团队的成员，但如果还有其他任何我可以帮助你的事情，我很乐意提供帮助！

查找动画条形图库或组件

1 个答案: