动画

Chart.js 开箱即用地为图表制作动画。 提供了许多选项来配置动画的外观和持续时间。

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 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: ['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 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: ['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)', }] };

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 个键组成。

名称	类型	细节
动画片	object	animation
动画	object	animations
转场	object	transitions

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

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

这些路径在全局配置的 defaults 和实例配置的 options 下有效。

animation

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

命名空间： options.animation

名称	类型	默认	描述
duration	number	1000	动画花费的毫秒数。
easing	string	'easeOutQuart'	易于使用的功能。 more...
delay	number	undefined	在开始动画之前延迟。
loop	boolean	undefined	如果设置为 true，动画将无限循环。

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

animations

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

命名空间： options.animations[animation]

名称	类型	默认	描述
properties	string[]	key	此配置适用的属性名称。 默认为此对象的键名。
type	string	typeof property	属性类型，确定使用的插值器。 可能的值： 'number'、'color' 和 'boolean'。 只有 'color' 真正需要，因为 typeof 没有做对。
from	number|Color|boolean	undefined	动画的起始值。 undefined 时使用当前值
to	number|Color|boolean	undefined	动画的结束值。 undefined 时使用更新值
fn	<T>(from: T, to: T, factor: number) => T;	undefined	可选的自定义插值器，而不是使用 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 来使用自定义转换。 Transition 扩展了主要的 动画配置 和 动画配置。

默认转换

命名空间： options.transitions[mode]

模式	选项	值	描述
'active'	animation.duration	400	将悬停动画的默认持续时间覆盖为 400 毫秒
'resize'	animation.duration	0	将默认持续时间覆盖为 0ms（= 无动画）以调整大小
'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 隐藏数据集 ID 时，颜色会淡化为透明。
'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'

见 罗伯特彭纳的宽松方程 (opens new window)。

动画回调

动画配置提供回调，这对于将外部绘制同步到图表动画很有用。 只能在主 动画配置 上设置回调。

命名空间： options.animation

名称	类型	默认	描述
onProgress	function	null	在动画的每个步骤上调用的回调。
onComplete	function	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;
            }
        }
    }
});

这些回调的另一个示例用法可以在 在此进度条示例中， 中找到，它显示一个进度条，显示动画的进度。