アニメーション

Chart.jsでは、難しい設定を一切行うことなくチャートをアニメーション表示することができます。アニメーションをどう見せるかや、どのくらいの時間をかけるかを設定するためのさまざまなオプションが用意されています。

アニメーション設定

以下のアニメーションオプションが利用できます。グローバルオプションはChart.defaults.global.animationで定義されています。

イージング

使用可能なオプションは次のとおりです。

• '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'sのイージング方程式を参照してください。

アニメーションコールバック

onProgressとonCompleteコールバックは、外部描画をチャートアニメーションに同期させるのに便利です。コールバックには Chart.Animationインスタンスが渡されます。

{
    // Chartオブジェクト
    chart: Chart,

    // 現在のアニメーションフレーム番号
    currentStep: Number,

    // アニメーションフレームの数
    numSteps: Number,

    // 使用するアニメーションイージング
    easing: String,

    // チャートをレンダリングする関数
    render: Function,

    // ユーザコールバック
    onAnimationProgress: Function,

    // ユーザコールバック
    onAnimationComplete: Function
}

次の例では、チャートアニメーション中にプログレスバーを塗りつぶします。

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

これらのコールバックの別の使用例は、Githubにあります。このサンプルは、アニメーションの進捗状況をプログレスバーに表示します。