カテゴリ直交軸

グローバル設定を使用すると、チャートデータに含まれるラベル配列の1つからラベルが取り出されます。data.labelsだけが定義されていれば、これが使われます。data.xLabelsが定義され、軸が水平である場合、これが使用されます。同様に、data.yLabelsが定義され、軸が垂直である場合、このプロパティが使用されます。xLabelsyLabelsの両方を併用すると、X軸とY軸の両方の文字列を使用するチャートを作成できます。

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

カテゴリ軸の定義

グローバルに:

let chart = new Chart(ctx, {
    type: ...
    data: {
        labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
        datasets: ...
    },
});

軸定義の一部として:

let chart = new Chart(ctx, {
    type: ...
    data: ...
    options: {
        scales: {
            xAxes: [{
                type: 'category',
                labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
            }]
        }
    }
});

目盛設定オプション

カテゴリスケールには、目盛を設定するための次のオプションがあります。それらは ticksサブオブジェクトに入れ子になっています。これらのオプションは共通の目盛設定を拡張します。

名前 初期値 説明
labels Array[String] - 表示するラベルの配列。
min String 表示に使用する最小の要素。詳細...
max String 表示に使用する最大の要素。詳細...

最小最大設定

minmaxのどちらのプロパティも、値はlabels配列に存在しなければなりません。下の例では、x軸には3月から6月までしか表示されません。

let chart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            data: [10, 20, 30, 40, 50, 60]
        }],
        labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
    },
    options: {
        scales: {
            xAxes: [{
                ticks: {
                    min: '3月'
                }
            }]
        }
    }
});

results matching ""

    No results matching ""