我想找到一种方法来做到这一点: 一种条形图,其中所有条形开始以相同的速度缓慢增长,因此您不知道哪个条形最终会更高。每一个都在到达其高度时停止。
我正在查看 Chart.js 和莫里斯图表,但我还没有找到一种方法来做到这一点。如果您知道如何在 Chart.js 或任何其他库中执行此操作,请告诉我!
最佳答案
好吧,没有人回答,但我设法做到了。 如果有人需要它:
使用图表师:
// Prepare data, labels on the x axis and series on the y axis
var data = {
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
series: [
[5, 2, 4, 2, 0]
]
};
// Create chart
var chart = new Chartist.Bar('#results', data);
// Create animation
chart.on('draw', function(d) {
if(d.type === 'bar') {
var total_duration = 5000 // [ms]
var max_value = Math.max.apply(null,d.series);
var speed = total_duration/max_value;
d.element.animate({
y2: {
begin: 0,
// The duration of the animation of each bar is set to be
// proportional to its value, this way all bars go at the
// same speed.
dur: d.series[d.index]*speed,
from: d.y1,
to: d.y2,
easing: Chartist.Svg.Easing.linear
}
});
}
});
<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>
关于javascript - 如何制作所有条形以相同速度增长的条形图动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42937144/