# 軸のラベル付け
チャートを作成する際には、閲覧者にどのようなデータを見ているのかを伝える必要があります。そのためには、軸にラベルを付ける必要があります。
# 軸タイトルの設定
名前空間:options.scales[scaleId].title
は、軸タイトルのオプションを定義します。これは直交座標軸にのみ適用されることに注意してください。
名前 | 種類 | デフォルト | 説明 |
---|---|---|---|
display | boolean | false | true の場合、軸タイトルを表示します。 |
align | string | 'center' | 軸タイトルの配置。可能なオプションは 'start' 、'center' 、'end' です。 |
text | string |string[] | '' | タイトルのテキスト。(例:"# of People" または "Response Choices") |
color | 色 | Chart.defaults.color | ラベルの色。 |
font | フォント | Chart.defaults.font | フォントを参照してください。 |
padding | パディング | 4 | 軸ラベルの周囲に適用するパディング。top 、bottom 、y のみが実装されています。 |
# カスタム目盛りフォーマットの作成
目盛りマークを変更してデータ型の情報を含めることもよくあります。たとえば、ドル記号( '$')を追加します。これを行うには、軸設定で ticks.callback
メソッドをオーバーライドする必要があります。
メソッドは3つの引数を受け取ります
value
- 関連付けられた軸の**内部データ形式**での目盛りの値。時間軸の場合、これはタイムスタンプです。index
- 目盛り配列内の目盛りのインデックス。ticks
- すべての目盛りオブジェクトを含む配列。
メソッドの呼び出しは軸のスコープに限定されます。メソッド内部の this
は軸オブジェクトです。
コールバックが null
または undefined
を返すと、関連付けられたグリッドラインは非表示になります。
ヒント
線グラフと棒グラフのデフォルトのx軸であるカテゴリ軸は、内部データ形式として`index`を使用します。ラベルにアクセスするには、`this.getLabelForValue(value)`を使用します。API: getLabelForValue
次の例では、Y軸のすべてのラベルの先頭にドル記号が付いて表示されます。
const chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
scales: {
y: {
ticks: {
// Include a dollar sign in the ticks
callback: function(value, index, ticks) {
return '$' + value;
}
}
}
}
}
});
ticks.callback
をオーバーライドすると、ラベルのすべての書式設定を行う必要があることに注意してください。ユースケースによっては、デフォルトのフォーマッタを呼び出してから、その出力を変更することができます。上記の例では、次のようになります。
// call the default formatter, forwarding `this`
return '$' + Chart.Ticks.formatters.numeric.apply(this, [value, index, ticks]);
関連サンプル