动画

Chart.js 默认情况下会对图表进行动画处理。提供了许多选项来配置动画的外观和持续时间。

const config = { type: 'line', data: data, options: { animations: { tension: { duration: 1000, easing: 'linear', from: 1, to: 0, loop: true } }, scales: { y: { // 定义最小值和最大值，以便隐藏数据集不会改变刻度范围 min: 0, max: 100 } } } };

const config = {
  type: 'line',
  data: data,
  options: {
    animations: {
      tension: {
        duration: 1000,
        easing: 'linear',
        from: 1,
        to: 0,
        loop: true
      }
    },
    scales: {
      y: { // defining min and max so hiding the dataset does not change scale range
        min: 0,
        max: 100
      }
    }
  }
};

const data = { labels: ['一月', '二月', '三月', '四月', '五月', '六月', '七月'], datasets: [{ label: '循环张力', data: [65, 59, 80, 81, 26, 55, 40], fill: false, borderColor: 'rgb(75, 192, 192)', }] };

const data = {
  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
  datasets: [{
    label: 'Looping tension',
    data: [65, 59, 80, 81, 26, 55, 40],
    fill: false,
    borderColor: 'rgb(75, 192, 192)',
  }]
};

const config = { type: 'line', data: data, options: { transitions: { show: { animations: { x: { from: 0 }, y: { from: 0 } } }, hide: { animations: { x: { to: 0 }, y: { to: 0 } } } } } };

const config = {
  type: 'line',
  data: data,
  options: {
    transitions: {
      show: {
        animations: {
          x: {
            from: 0
          },
          y: {
            from: 0
          }
        }
      },
      hide: {
        animations: {
          x: {
            to: 0
          },
          y: {
            to: 0
          }
        }
      }
    }
  }
};

const data = { labels: ['一月', '二月', '三月', '四月', '五月', '六月', '七月'], datasets: [{ label: '尝试隐藏我', data: [65, 59, 80, 81, 26, 55, 40], fill: false, borderColor: 'rgb(75, 192, 192)', }] };

const data = {
  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
  datasets: [{
    label: 'Try hiding me',
    data: [65, 59, 80, 81, 26, 55, 40],
    fill: false,
    borderColor: 'rgb(75, 192, 192)',
  }]
};

动画配置

动画配置包含 3 个键。

名称	类型	详细信息
animation	对象	animation
animations	对象	animations
transitions	对象	transitions

这些键可以在以下路径中配置

• `` - 图表选项
• datasets[type] - 数据集类型选项
• overrides[type] - 图表类型选项

这些路径在 defaults 中对于全局配置有效，在 options 中对于实例配置有效。

animation

默认配置在此定义：core.animations.js

命名空间：options.animation

名称	类型	默认	描述
duration	数字	1000	动画持续的毫秒数。
easing	字符串	'easeOutQuart'	要使用的缓动函数。 更多...
delay	数字	未定义	动画开始前的延迟。
loop	布尔值	未定义	如果设置为 true，则动画会无限循环。

这些默认值可以在 options.animation 或 dataset.animation 和 tooltip.animation 中被覆盖。这些键也是 可脚本化的。

animations

动画选项配置了哪些元素属性是动画的以及如何动画。除了主要的 动画配置 之外，还可以使用以下选项

命名空间：options.animations[animation]

名称	类型	默认	描述
properties	字符串[]	key	此配置适用的属性名称。默认为此对象的键名。
type	字符串	typeof property	属性类型，确定使用的插值器。可能的值：'number'、'color' 和 'boolean'。只有在 'color' 时才真正需要，因为 typeof 不能正确获取该值。
from	number|Color|boolean	未定义	动画的起始值。当 undefined 时使用当前值
to	number|Color|boolean	未定义	动画的结束值。当 undefined 时使用更新后的值
fn	<T>(from: T, to: T, factor: number) => T;	未定义	可选的自定义插值器，而不是使用来自 type 的预定义插值器

默认动画

名称	选项	值
numbers	properties	['x', 'y', 'borderWidth', 'radius', 'tension']
numbers	type	'number'
colors	properties	['color', 'borderColor', 'backgroundColor']
colors	type	'color'

注意

这些默认动画被大多数数据集控制器覆盖。

transitions

核心过渡是 'active'、'hide'、'reset'、'resize'、'show'。可以通过将自定义 mode 传递给 update 来使用自定义过渡。过渡扩展了主要的 动画配置 和 动画配置。

默认过渡

命名空间：options.transitions[mode]

模式	选项	值	描述
'active'	animation.duration	400	将默认持续时间覆盖为悬停动画的 400 毫秒
'resize'	animation.duration	0	将默认持续时间覆盖为 0 毫秒 (= 无动画) 用于调整大小
'show'	animations.colors	{ type: 'color', properties: ['borderColor', 'backgroundColor'], from: 'transparent' }	使用图例 / api 显示数据集时，颜色从透明淡入。
'show'	animations.visible	{ type: 'boolean', duration: 0 }	数据集可见性立即更改为 true，以便从透明的颜色过渡可见。
'hide'	animations.colors	{ type: 'color', properties: ['borderColor', 'backgroundColor'], to: 'transparent' }	使用图例 / api 隐藏数据集时，颜色会淡出到透明。
'hide'	animations.visible	{ type: 'boolean', easing: 'easeInExpo' }	可见性在动画的非常晚的阶段更改为 false

禁用动画

要禁用动画配置，动画节点必须设置为 false，动画模式的例外情况是可以通过将 duration 设置为 0 来禁用。

chart.options.animation = false; // disables all animations
chart.options.animations.colors = false; // disables animation defined by the collection of 'colors' properties
chart.options.animations.x = false; // disables animation defined by the 'x' property
chart.options.transitions.active.animation.duration = 0; // disables the animation for 'active' mode

缓动

可用选项是

• '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'

参见 Robert Penner 的缓动方程 (在新窗口中打开)。

动画回调

动画配置提供回调，这些回调对于将外部绘制与图表动画同步非常有用。回调只能在主要的 动画配置 中设置。

命名空间：options.animation

名称	类型	默认	描述
onProgress	函数	null	动画的每一步都会调用回调。
onComplete	函数	null	所有动画完成后都会调用回调。

回调会传递以下对象

{
  // Chart object
  chart: Chart,
  // Number of animations still in progress
  currentStep: number,
  // `true` for the initial animation of the chart
  initial: boolean,
  // Total number of animations at the start of current animation
  numSteps: number,
}

以下示例在图表动画期间填充进度条。

const chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        animation: {
            onProgress: function(animation) {
                progress.value = animation.currentStep / animation.numSteps;
            }
        }
    }
});

可以在 此进度条示例中 找到这些回调的另一个使用示例，该示例显示了一个显示动画进行程度的进度条。