動畫

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 個鍵。

名稱	類型	詳細資訊
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	字串[]	鍵	此設定所套用的屬性名稱。預設為此物件的鍵名。
type	字串	屬性的 typeof	屬性類型，決定所使用的插值器。可能的值：'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;
            }
        }
    }
});

這些回呼的另一個範例用法可以在此進度條範例中找到，該範例顯示一個進度條，顯示動畫進行到哪裡。