# カテゴリ軸
グローバル設定を使用する場合、ラベルはチャートデータに含まれるラベル配列のいずれかから描画されます。data.labels
のみが定義されている場合、これが使用されます。data.xLabels
が定義されており、軸が水平方向の場合は、これが使用されます。同様に、data.yLabels
が定義されており、軸が垂直方向の場合は、このプロパティが使用されます。xLabels
とyLabels
の両方を使用すると、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 | 定義されたmin とmax の値を、「適切な」値でなくても目盛りとして表示する必要があります。 |
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設定
min
とmax
プロパティの両方について、値は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'
}
}
}
});
# 内部データ形式
内部的に、カテゴリスケールはラベルインデックスを使用します。