Chart.js-如何设置动画速度？ [英] Chart.js - How to set animation speed?

问题描述

我正在使用Chart.js（动画方法，这是一种在浏览器中进行动画制作的更现代，更有效的方法，因为它仅在每个浏览器上重绘屏幕刷新（即基于屏幕刷新率，通常为60Hz）。

以60帧/秒的速度，一帧持续16-2 / 3毫秒（1000ms / 60），从而避免了不必要的计算。 。 Chart.js似乎可以将其四舍五入为17ms 。该API允许您全局指定步骤数，例如：

  Chart.defaults.global.animationSteps = 60; 
  

或仅适用于甜甜圈图：

 新图表（ctx）.Doughnut（data，{
 animationSteps：60 
}）; 
  

将60步乘以17ms /帧，您的动画将运行1020ms，或刚好超过一秒钟。由于JavaScript程序员习惯于以毫秒为单位思考（不是60Hz的帧），因此要进行另一种转换，只需除以17即可获得步数，例如：

  Chart.defaults.global.animationSteps = Math.round（5000/17）; //产生294步，生成5秒的动画
  

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

I'm using Chart.js (documentation), but there doesn't seem to be an option to set the animation speed.

I can't even seem to find an animation speed / time variable in the source code.

How do I go about doing this?

(ps: I'm using Doughnut charts)

EDIT: Changing animationSteps, shows weird artefacts after the animation is complete, for several values (ie: 30 or 75). 60 is working fine. And it doesn't only appear with 100+ values of the chart:

解决方案

I love Chart.js, but this is definitely a part of the API that could stand to be improved for the sake of clarity.

Chart.js uses the window.requestAnimationFrame() method for animations, which is a more modern and efficient way to animate in the browser, since it only redraws on each screen refresh (i.e., based on the screen refresh rate, usually 60Hz). That prevents a lot of unnecessary calculations for frames that will never actually render.

At 60 frames/second, one frame lasts 16-2/3 milliseconds (1000ms / 60). Chart.js appears to round this off to 17ms, though. The API allows you to specify the number of steps globally, e.g.:

Chart.defaults.global.animationSteps = 60;

or just for the donut chart:

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

Multiply 60 steps by 17ms/frame and your animation will run 1020ms, or just over one second. Since JavaScript programmers are used to thinking in milliseconds (not frames at 60Hz), to convert the other way, just divide by 17 to get the number of steps, e.g.:

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

Hope that helps. I'm not sure what would cause those weird artifacts, though.

这篇关于Chart.js-如何设置动画速度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！