Chart.js - 如何设置动画速度？

Question

我正在使用Chart.js(文档),但似乎没有设置动画速度的选项.

我甚至无法在源代码中找到动画速度/时间变量.

我该怎么做呢？

(ps:我正在使用甜甜圈图表)

编辑:更改animationSteps,在动画完成后显示奇怪的人工制品,有几个值(即:30或75).60工作正常.并且它不仅出现在图表的100多个值中:

Answer 1

我喜欢Chart.js,但这绝对是API的一部分,为了清晰起见可以进行改进.

Chart.js使用window.requestAnimationFrame()方法制作动画,这是一种更加现代和有效的浏览器动画制作方式,因为它只在每次屏幕刷新时重绘(即基于屏幕刷新率,通常为60Hz).这可以防止对永远不会实际呈现的帧进行大量不必要的计算.

在60帧/秒时,一帧持续16-2/3毫秒(1000ms/60).chart.js之看起来这一轮关闭以17MS,虽然.API允许您全局指定步骤数,例如:

Chart.defaults.global.animationSteps = 60;

或仅为甜甜圈图表:

new Chart(ctx).Doughnut(data, {
  animationSteps: 60
});

将60步跨越17毫秒/帧,您的动画将运行1020毫秒,或仅超过一秒.由于JavaScript程序员习惯于以毫秒为单位思考(不是60Hz的帧),要转换另一种方式,只需除以17即可获得步数,例如:

Chart.defaults.global.animationSteps = Math.round(5000 / 17); // results in 294 steps for a 5-second animation

希望有所帮助.不过,我不确定是什么会导致那些奇怪的文物.