アニメーション

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

Animations オプションは、どの要素のプロパティをどのようにアニメーションさせるかを設定します。メインのアニメーションの設定に加えて、以下のオプションを使用できます。

名前空間: options.animations[animation]

名前	型	デフォルト	説明
properties	文字列配列	key	この設定が適用されるプロパティ名。デフォルトでは、このオブジェクトのキー名になります。
type	文字列	プロパティの型	プロパティの型。使用するインターポレーターを決定します。可能な値: 'number'、'color'、'boolean'。typeof では正しく取得できないため、'color' の場合にのみ本当に必要です。
from	数値|Color|ブール値	未定義	アニメーションの開始値。undefined の場合は現在の値が使用されます。
to	数値|Color|ブール値	未定義	アニメーションの終了値。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' です。カスタムトランジションは、update にカスタム mode を渡すことで使用できます。トランジションは、メインのアニメーションの設定とanimations 設定を拡張します。

デフォルトのトランジション

名前空間: options.transitions[mode]

モード	オプション	値	説明
'active'	animation.duration	400	ホバーアニメーションのデフォルトの期間を 400ms にオーバーライドします。
'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 を使用してデータセットが非表示になると、色が透明にフェードアウトされます。
'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;
            }
        }
    }
});

これらのコールバックの別の使用方法については、このプログレスバーのサンプルで確認できます。このサンプルでは、アニメーションの進行状況を示すプログレスバーが表示されます。