Chart.js - にほんご。

時間軸(time)

更新日: 2018-06-25

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

データセット

入力データ

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

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

Dateフォーマット

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

設定オプション

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

名称type初期値説明
distributionstringlinearデータをどのようにプロットするか。 詳しくはこちら
boundsstringdataスケールの範囲を決めます。 詳しくはこちら
ticks.sourcestringauto目盛線をどのように生成するか。 詳しくはこちら
time.displayFormatsObject異なる時間単位の表示方法を指定します。 詳しくはこちら
time.isoWeekdaybooleanfalsetrueで、time.unitweekの場合、 週の開始曜日はMonday(月曜日)になります。 それ以外はSunday(日曜日)になります。
time.maxtime定義されている場合は、データの最大値を上書きします。
time.mintime定義されている場合は、データの最小値を上書きします。
time.parserstring/function日付のカスタムパーサ。 詳しくはこちら
time.roundstringfalse定義されている場合は、日付は定義した単位に丸められます。 許可されている単位は、時間単位を参照してください。
time.tooltipFormatstringツールチップに表示するmoment.js形式の文字列を指定します。
time.unitstringfalse定義されている場合は、時間単位を強制的に定義した単位に変更します。
time.stepSizenumber1グリッドライン間の単位の数。
time.minUnitstringmillisecond時間単位で表示する最低単位。

時間単位

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

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

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

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

時間表示形式

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

名称初期値
millisecondh:mm:ss.SSS a11:20:01.123 AM
secondh:mm:ss a11:20:01 AM
minuteh:mm a11:20 AM
hourhA11AM
dayMMM DSep 4
weekllSep 4 2015
monthMMM YYYYSep 2015
quarter[Q]Q - YYYY]Q3 - 2015
yearYYYY2015

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

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

bounds

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

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

ticks.source

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

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

パーサ

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

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


© 2013 Chart.js is available under the MIT license

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