#時間デカルト軸

タイムスケールは時刻と日付を表示するために使用されます。データは、データ ポイント間の時間量に応じて分散されます。ティックを構築する際、スケールのサイズに基づいて最も快適な単位を自動的に計算します。

#日付アダプター

時間スケール必要日付ライブラリと対応するアダプターの両方が存在する必要があります。からお選びください利用可能なアダプター (新しいウィンドウが開きます)。

#データセット

#入力データ

見るデータ構造。

#日付形式

タイム スケールのデータを提供する場合、Chart.js は内部的にエポック (UTC 1970 年 1 月 1 日午前 0 時) からのミリ秒として定義されたタイムスタンプを使用します。ただし、Chart.js は、選択した日付アダプターが受け入れるすべての形式もサポートします。設定したい場合はタイムスタンプを使用する必要があります。parsing: falseより良いパフォーマンスのために。

#構成オプション

#時間軸固有のオプション

名前空間:options.scales[scaleId]

#すべてのデカルト軸に共通のオプション

名前空間:options.scales[scaleId]

#全軸共通オプション

名前空間:options.scales[scaleId]

#時間単位

次の時間測定がサポートされています。名前は文字列として渡すことができます。time.unit特定のユニットを強制するための設定オプション。

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

たとえば、常に月ごとの単位を表示する時間スケールを持つグラフを作成するには、次の構成を使用できます。

const chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        scales: {
            x: {
                type: 'time',
                time: {
                    unit: 'month'
                }
            }
        }
    }
});

#表示形式

各単位のキーを使用して表示形式のマップを指定できます。

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

値として使用される形式文字列は、使用することを選択した日付アダプターによって異なります。

たとえば、quarter月と年を表示するユニットを使用するには、次の構成をチャート コンストラクターに渡すことができます。

const chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        scales: {
            x: {
                type: 'time',
                time: {
                    displayFormats: {
                        quarter: 'MMM YYYY'
                    }
                }
            }
        }
    }
});

#ティックソース

のticks.sourceプロパティはティックの生成を制御します。

• 'auto': スケール サイズと時間オプションに基づいて「最適な」ティックを生成します
• 'data': データからティックを生成します (データからのラベルを含む){x|y}オブジェクト)
• 'labels': ユーザーが指定した値からティックを生成しますlabelsそれだけ

#パーサー

このプロパティが文字列として定義されている場合、日付アダプターが日付を解析するために使用するカスタム形式として解釈されます。

これが関数の場合、日付アダプターで処理できる型を返す必要があります。parse方法。

#最小最大構成

どちらにとっても、minとmaxプロパティの場合、値は次のようにする必要がありますstringこれは、日付アダプターで解析できるもの、または UNIX エポックから経過したミリ秒数の数値です。 以下の例では、x 軸は 2021 年 11 月 7 日に始まります。

let chart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            data: [{
                x: '2021-11-06 23:39:30',
                y: 50
            }, {
                x: '2021-11-07 01:00:28',
                y: 60
            }, {
                x: '2021-11-07 09:00:28',
                y: 20
            }]
        }],
    },
    options: {
        scales: {
            x: {
                min: '2021-11-07 00:00:00',
            }
        }
    }
});

#スケール タイプをタイム スケールから対数/リニア スケールに変更します。

スケール タイプをタイム スケールから対数/線形スケールに変更する場合は、以下を追加する必要があります。bounds: 'ticks'スケールオプションに。変更するboundsパラメータのデフォルト値は'data'タイムスケールの場合。

初期設定:

const chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        scales: {
            x: {
                type: 'time',
            }
        }
    }
});

スケールの更新:

chart.options.scales.x = {
    type: 'logarithmic',
    bounds: 'ticks'
};

#内部データ形式

内部的な時間スケールはエポックからのミリ秒を使用します