Chart.jsを使用してグラフを描写する際に、縦軸（y軸）のラベルに小数点を表示させないようする設定でめちゃめちゃハマったので記録用メモです。
結論
オプションへ以下を設定（追加）したら解決した。
options: {
scale: {
ticks: {
max: 9999, //データの最大値
min: 0, //データの最小値
stepSize: 1 //ここで設定した数値の倍数でメモリが生成される
}
}
}
経緯
安易に「chart.js 小数点」とかで検索してヒットしたいくつかのサイトを参考に以下のコードを追加しましたがうまくいかず…
var options = {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
userCallback: function(label, index, labels) {
if (Math.floor(label) === label) {
return label;
}
}
}
}]
}
};
描写したいグラフが複合グラフ（混合グラフ）だったため、それぞれにオプションを設定する必要があるのか…？
と調べてみたりしましたが、Chart.js 日本語ドキュメント内にある線形 · Chart.js 日本語ドキュメントのページにちゃんと記載がありました…。
刻み幅
設定されている場合、スケール目盛はstepSizeの倍数で生成され、1つごとに目盛線が引かれます。設定されていない場合、目盛はnice numbersアルゴリズムを使用して自動的に付けられます。
この例では、 ‘0、0.5、1、1.5、2、2.5、3、3.5、4、4.5、5’に目盛線が引かれるy軸を持つチャートを設定します。
線形 · Chart.js 日本語ドキュメントlet options = { scales: { yAxes: [{ ticks: { max: 5, min: 0, stepSize: 0.5 } }] } };
ということなので stepSize へ「 1 」を設定し、既存のコードへ追加して解決です。
以下、目盛設定オプションの引用です。
- 名前
- 型
- 説明
- beginAtZero
- Boolean
- trueの場合、まだ含まれていない場合にはスケールに0が含まれます。
- min
- Number
- ユーザー定義のスケールの最小数で、データの最小値を上書きします。
- max
- Number
- ユーザー定義のスケールの最大数で、データの最大値を上書きします。
- maxTicksLimit
- Number
- 表示する目盛(ticks)とグリッド線(grid lines)の最大数。デフォルトは 11
- precision
- Number
- これが定義されており、stepSizeが定義されていない場合は、ステップサイズは、小数部分の桁数がこの値になるように丸められます。(訳注: 3なら12.345などと丸められます。)
- stepSize
- Number
- ユーザー定義のスケールの固定刻み幅。
- suggestedMax
- Number
- 最大データ値を計算するときに使用される調整値。
- suggestedMin
- Number
- 最小データ値を計算するときに使用される調整値。