アニメーション

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

アニメーション設定

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

名前 初期値 説明
duration Number 1000 アニメーションにかける時間(ミリ秒)。
easing String 'easeOutQuart' 使用するイージング(easing)(訳注:アニメーションの効果、あるいは進行タイミング)関数。詳細...
onProgress Function null アニメーションの各ステップで呼び出されるコールバック。 詳細...
onComplete Function null アニメーションの最後に呼び出されるコールバック。 詳細...

イージング

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

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

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

onProgressonCompleteコールバックは、外部描画をチャートアニメーションに同期させるのに便利です。コールバックには 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にあります。このサンプルは、アニメーションの進捗状況をプログレスバーに表示します。

results matching ""

    No results matching ""