# カテゴリ軸

グローバル設定を使用する場合、ラベルはチャートデータに含まれるラベル配列のいずれかから描画されます。data.labelsのみが定義されている場合、これが使用されます。data.xLabelsが定義されており、軸が水平方向の場合は、これが使用されます。同様に、data.yLabelsが定義されており、軸が垂直方向の場合は、このプロパティが使用されます。xLabelsyLabelsの両方を使用すると、X軸とY軸の両方に文字列を使用するチャートを作成できます。

上記のいずれかの設定を指定すると、特に指定されていない限り、x軸はtype: 'category'として定義されます。カテゴリラベルをより細かく制御するには、カテゴリ軸定義の一部としてlabelsを追加することもできます。そうすることで、グローバルデフォルトは適用されません。

# カテゴリ軸の定義

グローバルに

let chart = new Chart(ctx, {
    type: ...
    data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June'],
        datasets: ...
    }
});

軸定義の一部として

let chart = new Chart(ctx, {
    type: ...
    data: ...
    options: {
        scales: {
            x: {
                type: 'category',
                labels: ['January', 'February', 'March', 'April', 'May', 'June']
            }
        }
    }
});

# 設定オプション

# カテゴリ軸固有のオプション

名前空間: options.scales[scaleId]

名前 説明
min string|number 表示する最小項目。 詳細...
max string|number 表示する最大項目。 詳細...
labels string[]|string[][] 表示するラベルの配列。個々のラベルが文字列の配列である場合、各項目は新しい行にレンダリングされます。

# すべての直交座標軸に共通するオプション

名前空間: 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の場合、両方の端に余分なスペースが追加され、軸はチャート領域に収まるようにスケーリングされます。これは、棒グラフではデフォルトで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 軸のソートに使用される重み。重みが大きいほど、チャート領域から離れます。

# 目盛りの設定

# すべての直交座標軸に共通する目盛りのオプション

名前空間: options.scales[scaleId].ticks

名前 デフォルト 説明
align string 'center' 軸に沿った目盛りの位置合わせ。'start''center''end'、または'inner'にすることができます。innerの位置合わせは、水平軸の最初の目盛りにstart、最後の目盛りにendを合わせることを意味します。
crossAlign string 'near' 軸に垂直な目盛りの位置合わせ。'near''center'、または'far'にすることができます。目盛りの位置合わせを参照してください。
sampleSize number ticks.length ラベルの数が適切かどうかを判断する際に調べる目盛りの数。値を小さくすると高速になりますが、ラベルの長さに大きなばらつきがある場合は精度が低くなる可能性があります。
autoSkip boolean true trueの場合、表示できるラベルの数を自動的に計算し、それに応じてラベルを非表示にします。ラベルは、スキップする前にmaxRotationまで回転されます。すべてのラベルを表示するには、autoSkipをオフにします。
autoSkipPadding number 3 autoSkipが有効になっている場合の水平軸上の目盛り間の余白。
includeBounds boolean true 定義されたminmaxの値を、「適切な」値でなくても目盛りとして表示する必要があります。
labelOffset number 0 目盛りの中心点からラベルをオフセットするピクセル単位の距離(x軸の場合はx方向、y軸の場合はy方向)。 *注:これにより、端のラベルがキャンバスの端で切り取られる可能性があります*
maxRotation number 50 ラベルを圧縮するために回転する際の目盛りのラベルの最大回転角度。注:回転は必要になるまで行われません。 *注:水平スケールにのみ適用されます。*
minRotation number 0 目盛りのラベルの最小回転角度。 *注:水平スケールにのみ適用されます。*
mirror boolean false 軸を中心に目盛りのラベルを反転させ、ラベルをチャートの外側ではなく内側に表示します。 *注:垂直スケールにのみ適用されます。*
padding number 0 目盛りのラベルと軸の間の余白。垂直軸に設定されている場合、これは水平(X)方向に適用されます。水平軸に設定されている場合、これは垂直(Y)方向に適用されます。
maxTicksLimit number 11 表示する目盛りとグリッド線の最大数。

# すべての軸に共通する目盛りのオプション

名前空間: options.scales[scaleId].ticks

名前 スクリプト可能 デフォルト 説明
backdropColor はい 'rgba(255, 255, 255, 0.75)' ラベルの背景色。
backdropPadding パディング 2 ラベルの背景のパディング。
callback function チャートに表示されるように、目盛りの値の文字列表現を返します。コールバックを参照してください。
display boolean true trueの場合、目盛りのラベルを表示します。
color はい Chart.defaults.color 目盛りの色。
font フォント はい Chart.defaults.font フォントを参照してください。
major object {} 主要な目盛りの設定.
padding number 3 軸からの目盛りのラベルのオフセットを設定します。
showLabelBackdrop boolean はい 極座標スケールではtrue、それ以外の場合はfalse trueの場合、目盛りのラベルの背後に背景を描画します。
textStrokeColor はい `` テキストの周りのストロークの色。
textStrokeWidth number はい 0 テキストの周りのストロークの幅。
z number 0 目盛りレイヤーのz-index。目盛りがチャート領域に描画される場合に便利です。値が0以下の場合はデータセットの下に、0より大きい場合は上に描画されます。

# Min Max設定

minmaxプロパティの両方について、値はlabels配列内のstringである必要があります、またはその配列内のラベルのインデックスとしての数値です。下の例では、x軸には「3月」から「6月」のみが表示されます。

let chart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            data: [10, 20, 30, 40, 50, 60]
        }],
        labels: ['January', 'February', 'March', 'April', 'May', 'June']
    },
    options: {
        scales: {
            x: {
                min: 'March'
            }
        }
    }
});

# 内部データ形式

内部的に、カテゴリスケールはラベルインデックスを使用します。

最終更新日: 2024/5/17 午後0:33:38