Chart.js 动画

动画用于标记图表中的数据。此设置有助于图表的设计和样式。它控制图表动画的持续时间和缓动。

• 持续时间决定了移动图表部件的时间。
• "动画缓动"选项决定动画的样式。

语法

将 "options.animations" 命名空间应用于动画元素。 "loop" 动画属性设置为 true 以进行动画图表。 如果设置为 false，则停用动画。 Chart.js 动画语法如下

动画的配置选项

动画设置颜色设置选项如下所示

1. 动画
   • 持续时间： 此用于指示动画将持续的毫秒数。
   • 缓动： 使用此缓动函数，其中包括 linear、easeOutQuart 等。
   • 延迟： 此设置确定动画开始之前经过的时间量。
   • 循环： 此设置使动画无限期地运行。
2. 缓动

   以下选项可用于缓动动画

   • 'linear'
   • 'easeInQuad'
   • 'easeOutQuad'
   • 'easeInOutQuad'
   • 'easeInCubic'
   • 'easeOutCubic'
   • 'easeInOutCubic'
   • 'easeInQuart'
   • 'easeOutQuart'
   • 'easeInOutQuart'
   • 'easeInQuint'
   • 'easeOutQuint'
   • 'easeInOutQuint'
   • 'easeInSine'
   • 'easeOutSine'
   • 'easeInOutSine'
   • 'easeInExpo'
   • 'easeOutExpo'
   • 'easeInOutExpo'
   • 'easeInCirc'
   • 'easeOutCirc'
   • 'easeInOutCirc'
   • 'easeInElastic'
   • 'easeOutElastic'
   • 'easeInOutElastic'
   • 'easeInBack'
   • 'easeOutBack'
   • 'easeInOutBack'
   • 'easeInBounce'
   • 'easeOutBounce'
   • 'easeInOutBounce'
3. 运动动画
   • 属性： 主要通过此选项命名适用的配置。
   • 类型： 此属性类型决定了所用的插补器。
   • 从： 这是动画的初始值。
   • 到： 这是动画的最终值。
   • Fn： 自定义插补器函数是可选的。
4. 变化
   • 活动： 这是悬停动画持续的时间。
   • 调整大小： 这是调整大小所需的时间。
   • 显示： 当使用图例显示数据集时，这是从透明淡入的颜色。
   • 隐藏： 当使用图例显示数据集时，这是从透明淡出的颜色。
5. 动画的回调
   • onProgress：在动画的每个阶段调用的回调方法称为 onProgress。
   • onComplete：当每个动画完成时，回调方法 onComplete 将被调用。

示例

以下示例显示了 chart.js 动画。

示例 1

以下示例显示了 chart.js 动画。 easeInBounce 缓动用于带有动画元素的折线图。

输出

输出显示了基本的图表动画功能。

示例 2

以下示例显示了 chart.js 动画。

输出

输出显示了基本的图表动画功能。

示例 3

Chart.js 中的雷达图，显示了有关网站主题及其等级的数据，已在下面的示例中使用。我们使用缓动动画选项（如 easeOutBounce 和 easeInOutElastic）对图表进行了动画处理。

输出

输出显示了基本的图表动画功能。

示例 4

在下面的示例中，我们使用条形图来说明与网站相关的示例数据。 easeOutCubic 动画已用于创建条形图。 我们还已将循环选项值设置为 true，以便条形图上的动画连续运行。

输出

输出显示了基本的图表动画功能。

结论

Chart.js 动画用于为图形及其元素设置动画。 我们可以使用时间和缓动函数为图形设置动画。