時間軸(time)

タイムスケールは、時間や日付を表示するために使用されます。 目盛線の生成時には、スケールのサイズにもっとも相応しい単位ベースで自動計算します。

日付アダプタ

時間軸には日付ライブラリとそれに対応するアダプターの両方が必要です。 Chart.jsにはデフォルトでMoment.js用のアダプターが含まれています。Momentを外して、利用可能な他のアダプターを選択することもできます。

データセット

入力データ

タイムスケールを使用する場合には、X軸のデータポイントをxまたはt属性で指定することができます。

data: [{
    x: new Date(),
    y: 1
}, {
    t: new Date(),
    y: 10
}]

Dateフォーマット

タイムスケールを使用する際に、Chart.jsではMoment.jsで使用可能な全ての形式をサポートしています。 詳しくはMoment.jsドキュメントを参照してください。

設定オプション

タイムスケールには、以下のオプションがあります。 これらのオプションは目盛線設定で設定することもできます。

時間単位

時間単位は、以下の単位がサポートされています。 time.unitに文字列を渡すことで、 強制的に特定の単位を使用することができます。

• millisecond
• second
• minute
• hour
• day
• week
• month
• quarter
• year

例えば、月毎のタイムスケールのチャートを生成するには、 以下の設定で実現可能です。

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        scales: {
            xAxes: [{
                type: 'time',
                time: {
                    unit: 'month'
                }
            }]
        }
    }
});

時間表示形式

以下の表示形式は、異なる時間単位が軸の目盛り線上にどのような文字列に変換されるかを示してします。 使用可能なフォーマットはmoment.jsを参照してください。

例えば、quarter単位の表示形式を年、月で表示するには、 以下の設定をチャートのコンストラクタに渡します。

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        scales: {
            xAxes: [{
                type: 'time',
                time: {
                    displayFormats: {
                        quarter: 'MMM YYYY'
                    }
                }
            }]
        }
    }
})

distribution

distributionプロパティはスケールに沿ったデータ分布を制御します。

• linear：各データが時間に合わせて広がって表示されます。(データ間の距離が異なる場合があります。)
• series：各データが同じ距離で表示されます。

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        scales: {
            xAxes: [{
                type: 'time',
                distribution: 'series'
            }]
        }
    }
});

bounds

boundsプロパティはスケールの範囲を制御します。 (最小/最大時間オプションをバイパスします。)

• data：全てのデータが表示され、外側のラベルは削除されます。
• ticks：全ての目盛線が表示され、外側のデータは切り捨てられます。

ticks.source

ticks.sourceプロパティは、目盛線の生成を制御します。

• auto：スケールのサイズと時間オプションに基いて、"最適な"目盛線を生成します。
• data：データから目盛線を生成します。(データオブジェクト{t|x|y}からのラベルを含みます。)
• labels：data.labelsの値のみで目盛線を生成します。

パーサ

このプロパティに文字列が指定されている場合、日付のカスタム形式として解析されます。

関数の場合、適切な値が与えられたmoment.jsオブジェクトを返さなければなりません。