# 時間デカルト軸

時間スケールは、時刻と日付を表示するために使用されます。データは、データポイント間の時間量に応じて分散されます。目盛を作成する際には、スケールのサイズに基づいて最適な単位が自動的に計算されます。

# 日付アダプター

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

# データセット

# 入力データ

データ構造を参照してください。

# 日付形式

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

# 設定オプション

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

名前空間：options.scales[scaleId]

名前	種類	デフォルト	説明
`min`	`number`\|`string`		表示する最小項目。詳細...
`max`	`number`\|`string`		表示する最大項目。詳細...
`suggestedMin`	`number`\|`string`		データポイントが前にない場合に表示する最小項目。詳細...
`suggestedMax`	`number`\|`string`		データポイントが後ろにない場合に表示する最大項目。詳細...
`adapters.date`	`object`	`{}`	外部日付ライブラリのアダプターがオプションを必要とするかサポートする場合のアダプターのオプション
`bounds`	`string`	`'data'`	スケールの境界を決定します。詳細...
`offsetAfterAutoskip`	`boolean`	`false`	trueの場合、棒グラフのオフセットは自動スキップされた目盛で計算されます。
`ticks.source`	`string`	`'auto'`	目盛の生成方法。詳細...
`time.displayFormats`	`object`		異なる時間単位の表示方法を設定します。詳細...
`time.isoWeekday`	`boolean`\|`number`	`false`	`boolean`でtrueかつ単位が「週」に設定されている場合、週の最初の曜日は月曜日になります。そうでない場合は日曜日になります。 `number`の場合、週の最初の曜日のインデックス（0 - 日曜日、6 - 土曜日）
`time.parser`	`string`\|`function`		日付のカスタムパーサー。詳細...
`time.round`	`string`	`false`	定義されている場合、日付はこの単位の開始に丸められます。許可される単位については、以下の時間単位を参照してください。
`time.tooltipFormat`	`string`		ツールチップに使用するフォーマット文字列。
`time.unit`	`string`	`false`	定義されている場合、単位を特定のタイプに強制します。詳細については、以下の時間単位セクションを参照してください。
`time.minUnit`	`string`	`'millisecond'`	時間単位に使用される最小表示形式。

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

名前空間：options.scales[scaleId]

名前	種類	デフォルト	説明
`bounds`	`string`	`'ticks'`	スケールの境界を決定します。詳細...
`clip`	`boolean`	`true`	trueの場合、データセットの描画をチャート領域ではなくスケールのサイズに対してクリップします
`position`	`string` \| `object`		軸の位置。詳細...
`stack`	`string`		スタックグループ。同じ`position`で同じ`stack`を持つ軸はスタックされます。
`stackWeight`	`number`	1	スタックグループ内のスケールの重み。グループ内でスケールに割り当てられるスペースの量を決定するために使用されます。
`axis`	`string`		これがどのタイプの軸であるか。可能な値は、`'x'`、`'y'`です。設定されていない場合、これはIDの最初の文字（`'x'`または`'y'`である必要があります）から推測されます。
`offset`	`boolean`	`false`	trueの場合、両方の端に余 pladsが追加され、軸はチャート領域に収まるようにスケーリングされます。これは、棒グラフの場合、デフォルトで`true`に設定されています。
`title`	`object`		スケールのタイトル設定。詳細...

# すべての軸に共通のオプション

名前空間：options.scales[scaleId]

名前	種類	デフォルト	説明
`type`	`string`		採用されているスケールの種類。カスタムスケールを作成し、文字列キーで登録できます。これにより、チャートの軸の種類を変更できます。
`alignToPixels`	`boolean`	`false`	ピクセル値をデバイスピクセルに合わせます。
`backgroundColor`	`色`		スケール領域の背景色。
`border`	`object`		境界線の設定。詳細...
`display`	`boolean`\|`string`	`true`	軸のグローバルな可視性を制御します（`true`の場合は表示、`false`の場合は非表示）。 `display: 'auto'`の場合、少なくとも1つの関連付けられたデータセットが表示されている場合にのみ、軸が表示されます。
`grid`	`object`		グリッド線の設定。詳細...
`min`	`number`		ユーザー定義のスケールの最小値。データからの最小値をオーバーライドします。詳細...
`max`	`number`		ユーザー定義のスケールの最大値。データからの最大値をオーバーライドします。詳細...
`reverse`	`boolean`	`false`	スケールを反転します。
`stacked`	`boolean`\|`string`	`false`	データをスタックする必要があるかどうか。詳細...
`suggestedMax`	`number`		最大データ値の計算に使用される調整。詳細...
`suggestedMin`	`number`		最小データ値の計算に使用される調整。詳細...
`ticks`	`object`		目盛の設定。詳細...
`weight`	`number`	`0`	軸の並べ替えに使用される重み。重みが大きいほど、チャート領域から遠くなります。

# 時間単位

以下の時間測定がサポートされています。名前は文字列としてtime.unit設定オプションに渡して、特定の単位を強制できます。

'millisecond'
'ミリ秒'
'秒'
'分'
'時間'
'日'
'週'
'月'
'四半期'

たとえば、常に月単位で表示される時間スケールを持つチャートを作成するには、次の設定を使用できます。

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

# 表示形式

各ユニットのキーを持つ表示形式のマップを指定できます

ミリ秒
秒
分
時間
日
週
月
四半期
年

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

たとえば、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'
};

# 内部データ形式

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

← 対数軸時系列軸 →