カテゴリ直交軸
グローバル設定を使用すると、チャートデータに含まれるラベル配列の1つからラベルが取り出されます。data.labels
だけが定義されていれば、これが使われます。data.xLabels
が定義され、軸が水平である場合、これが使用されます。同様に、data.yLabels
が定義され、軸が垂直である場合、このプロパティが使用されます。xLabels
とyLabels
の両方を併用すると、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 |
表示に使用する最大の要素。詳細... |
最小最大設定
min
とmax
のどちらのプロパティも、値は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月'
}
}]
}
}
});