ここでは、XY軸のラベル、目盛り、目盛り線の設定を扱います。右図を作成することを目的とします。
options.scales.xAxes/yAxes で次のような構成で記述します。
options: { : scales: { // 軸設定 xAxes: [ // X軸設定 { scaleLabel: { // 軸ラベル : }, gridLines: { // 目盛線 : }, ticks: { // 目盛り : }, } ], yAxes: [ // Y軸設定 : xAxesと同様 ] } :
軸ラベルは、標準では表示されません。scaleLabelを記述することにより表示されます。
名称 | 意味 | 省略時 | 備考 |
labelString | ラベルの文字列 | 必須 | 上図の "縦軸ラベル", "横軸ラベル" |
fontColor | 文字の色 | '#666' | |
fontSize | 文字の大きさ | 12 | |
fontStyle | フォント | 'normal' | 'bold', |
fontFamily | フォントファミリ | 注 |
通常は、目盛りの最小値や最大値などを設定するのに用いますが、それに加えてX軸の "00年" やY軸の 10 などの文字の体裁もここで設定します。
「軸ラベル」での labelString 以外が使えます。
記述がないと薄い灰色の線になっています。それを変更するのに次の項目があります。
名称 | 意味 | 省略時 | 備考 |
display | 表示の有無 | true | falseにすると目盛線が消える |
color | 線の色 | 'rgba(0, 0, 0, 0.1)' | |
lineWidth | 線の太さ | 1 | |
borderDash | 点線 | 実線 | [線長, 空白] の形式 例[10,3] |
Y軸に限定されますが、y=0(X軸)の線を特別な線にすることができます。zeroLineColor/zeroLineWidth/zeroLineBorderDash で設定します。
上図を作成したソースコードを示します。