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

EN

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

Chart.js使用window.requestAnimationFrame()方法进行动画，这是一种更现代和更有效的在浏览器中动画的方法，因为它只在每次屏幕刷新(即基于屏幕刷新率，通常是60 on )上重新绘制。这防止了许多不必要的计算框架，而这些帧永远不会实际呈现。

当每秒60帧时，一帧持续16-2/3毫秒(1000 60/ 60)。然而，Chart.js在四舍五入到17 to面前出现了。API允许您指定步骤全球范围内的数目，例如：

Chart.defaults.global.animationSteps = 60;

或只是为了甜甜圈图

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

将60步乘以17毫秒/帧，你的动画就会运行102毫秒，或者仅仅超过1秒。由于JavaScript程序员习惯于以毫秒为单位(而不是以60 of的帧为单位)进行转换，因此只需将17除以得到步骤数，例如：

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

希望这能有所帮助。但我不确定是什么导致了这些奇怪的文物。

使用动画对象

options: {
        animation: {
            duration: 2000,
        },

我在任何地方都没有看到这个文档，但是不必在全球范围内为每个图表设定速度是非常有帮助的。

我也在这里回答

如果将来有人遇到这个问题(就像我一样)，有一种新的方法来改变动画的持续时间。我想这在某种程度上是对Chart.js库的更新：

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

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

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

希望这对某人有帮助：)