軸のラベル付け
グラフを作成するときに、読者に何のデータが表示されているかを伝えたいとします。これを行うには、軸にラベルを付ける必要があります。
スケールタイトル設定
スケールラベル設定はscaleLabel
キーにあり、スケール設定の下にネストされています。これはスケールタイトルのオプションを定義します。直交座標軸にのみ適用されることに注意してください。
名前 | 型 | 初期値 | 説明 |
---|---|---|---|
display |
Boolean |
false |
trueの場合、軸タイトルを表示します。 |
labelString |
String |
'' |
タイトルのテキスト。 (つまり、「人数」とか「回答の選択肢」)。 |
lineHeight |
Number/String |
1.2 |
個々のテキスト行の高さ。(MDNを参照してください。) |
fontColor |
Color |
'#666' |
スケールタイトルのフォント色。 |
fontFamily |
String |
"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif" |
スケールタイトルのフォントファミリ。CSSフォントファミリのオプションに従います。 |
fontSize |
Number |
12 |
スケールタイトルのフォントサイズ。 |
fontStyle |
String |
'normal' |
スケールタイトルのフォントファミリ。CSSフォントファミリのオプションに従います。(i.e. normal, italic, oblique, initial, inherit)。 |
padding |
Number/Object |
4 |
スケールラベルの周囲に適用するパディング。top とbottom だけが実装されています。 |
カスタム目盛様式を作成する
データ形式に関する情報を含めるように目盛を変更することも一般的です。たとえば、ドル記号('$')を追加します。これを行うには、軸設定の ticks.callback
メソッドをオーバーライドする必要があります。
次の例では、Y軸のすべてのラベルが頭にドル記号を伴って表示されます。
コールバックが null
またはundefined
を返す場合、関連するグリッド線は非表示になります。
var chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
scales: {
yAxes: [{
ticks: {
// 目盛にドル記号を入れる
callback: function(value, index, values) {
return '$' + value;
}
}
}]
}
}
});