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

Question

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

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

我该怎么做呢？

（ps：我用的是甜甜圈图）

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

在此处输入图像描述

score 7 · Accepted Answer

我喜欢 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

希望有帮助。不过，我不确定是什么导致了这些奇怪的伪影。

score 4 · Accepted Answer

使用动画对象

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

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

score 0 · Accepted Answer

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

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

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

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

希望这可以帮助某人:-)

3 回答 3