Chart.js - にほんご。

Animations

Chart.jsは簡単にアニメーションを使うことができます。 アニメーションをどのくらいの時間で、どのように見せるかを設定するための、いくつかのオプションがあります。

アニメーション設定

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

名称type初期値説明
durationnumber1000アニメーションの実行時間(ms)。
easingstringeaseOutQuart使用するイージング。詳細はこちら
onProgressfunctionnullステップごとに呼び出すコールバック。詳細はこちら
onCompletefunctionnullアニメーション終了時に呼び出すコールバック。詳細はこちら

イージング

使用可能なイージングは以下の通りです。

  • 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

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

onProgressonCompleteのコールバックは、 外部のチャートアニメーションを同期処理するのに便利です。 コールバックは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>

© 2013 Chart.js is available under the MIT license

このコンテンツはChart.jsドキュメントを翻訳/改変したものです。