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

Question

我正在使用Chart.js（documentation），但似乎没有设置动画速度的选项。

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

我该怎么做呢？

（ps：我正在使用甜甜圈图表）

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

Answer 1

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

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

在60帧/秒时，一帧持续16-2 / 3毫秒（1000ms / 60）。但是，Chart.js似乎是round this off to 17ms。 API允许您指定步数globally，例如：

Chart.defaults.global.animationSteps = 60;

或者just for the donut chart：

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

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

Answer 2

如果有人在将来遇到这个问题（就像我一样），有一种改变动画持续时间的新方法。我想这是Chart.js库在某些时候的更新:-)

Chart.defaults.global.animation.duration = [ms];

因此，例如，如果您想要一个非常快速的200ms动画，您可以：

Chart.defaults.global.animation.duration = 200;

希望这有助于某人:-)