Question

我想找到一种方法来做到这一点：一个条形图，所有的酒吧开始以相同的速度缓慢增长，所以你不知道哪一个会更高。当它达到它的高度时，每一个都停止。

我正在查看chart.js和morris图表，但我还没有找到办法在那里做。如果您知道如何在chart.js或任何其他库中执行此操作，请告诉我们！

Answer 1

好吧，没有人回答，但我设法做到了。如果有人需要它：

使用图表：

＆＃13;

var data = {
  labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
  series: [
    [5, 2, 4, 2, 0]
  ]
};
var chart = new Chartist.Bar('#results', data);
chart.on('draw', function(d) {
  if(d.type === 'bar') {
    d.element.animate({
      y2: {
        begin: 0,
        dur: 5000*d.series[d.index]/Math.max.apply(null,d.series),
        from: d.y1,
        to: d.y2,
        easing: Chartist.Svg.Easing.linear
      }
    });
  }
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.10.1/chartist.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.10.1/chartist.min.css" rel="stylesheet"/>
<div class="ct-chart ct-perfect-fourth" id="results"></div>

＆＃13;

如何制作条形图动画，所有条形图都以相同的速度增长？

1 个答案: