Animations

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 easing equations

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

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

{
    // チャートオブジェクト
    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にあります。 (このサンプルはアニメーションが終わるまでどのくらい掛かるかをプログレスバーで表示します。)

デモ

アニメーション中にプログレスバーを塗りつぶします。

JavaScript

var ctx = document.getElementById('myChart').getContext('2d');
var progress = document.getElementById('animationProgress');
new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets:[{
            type: 'line',
            label: "A",
            data: [65, 59, 80, 81, 56, 55, 40],
            backgroundColor: "rgba(54, 162, 235, 0.2)",
            borderColor: "rgb(54, 162, 235)",
            borderWidth: 1
        },
        {
            type: 'line',
            label: "B",
            data: [55, 59, 70, 91, 26, 25, 70],
            backgroundColor: "rgba(255, 99, 132, 0.2)",
            borderColor: "rgb(255, 99, 132)",
            borderWidth: 1
        }]
    },
    options: {
        animation: {
            easing: 'easeInBack',
            onProgress: function(animation) {
                progress.value = animation.animationObject.currentStep / animation.animationObject.numSteps;
            }
        }
    }
});

HTML

<canvas id="myChart"></canvas>
<progress id="animationProgress" max="1" value="0" style="width: 100%"></progress>