##chart.jsの目盛り数が設定できない問題
chart.jsで5目盛りのレーダーチャートを作ろうとしてstepSizeプロパティをいじりまくるのだけれども、なぜか5目盛りにならない。目盛り量がすごいことになった状態のままうんともすんともいわない。
##原因
めちゃくちゃ初歩的な原因でした。プロパティ名を正規表現「stepSize」にしていなかったことが原因。
それまで「StepSize」と頭文字を大文字にしてしまっていたために設定できていなかったようですー。
options: {
scale: {
ticks: {
label: false,
min: 0,
max: 5,
stepSize: 1,
showLabelBackdrop: false,
fontSize: 0,
color: '#eee',
},
gridLines: {
display: true,
borderWidth: 2,
color: "#ddd"
}
},
scales: {
xAxes: [{
display: true,
stacked: false,
gridLines: {
display: false
},
}]
},
legend: {
display: false
},
tooltips: {
enabled: false
}
}
私はなかなかこれに気づかずハマっていたので、同じ悩みをもった方のもとに届きますように。
##参考リンク
- chart.js 公式サイト:https://www.chartjs.org
- レーダーチャートのプロパティ設定に参考にしたサイト:http://www.kogures.com/hitoshi/javascript/chartjs/radar.html