Question

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

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

我该怎么做？

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

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

enter image description here

Answer 1

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

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

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

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

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

Answer 2

使用动画对象

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

我没有在任何地方看到此文档，但是不必为每个图表全局设置速度，这是非常有用的。

Answer 3

万一将来有人遇到这个问题（就像我一样），可以使用一种新的方式来更改动画持续时间。我猜想这是对Chart.js库的更新：-）

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

例如，如果您想要非常快的200ms动画，则可以：

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

希望这对某人有帮助：-）