チャートのjs線グラフで異なるグリッド線のステップ

Question

私は、ステップサイズが5のティックを持つy軸スケールの折れ線グラフを持っています。グリッドラインのステップ/インターバルを1にしたいと思います。これを行う明白な方法は、とにかくchart.jsでこれを達成することですか？

ありがとうございます！

Answer 1

残念ながら、現在のChart.js APIでは、目盛の配置とは独立したグリッド線の配置を明確に構成することはできません。言い換えれば、1ステップごとにグリッドラインを表示しながら、5ステップごとにティックを表示するように軸を設定することはできません。

クリーンの方法はありますが、それでもあなたの行動を取得する方法はあります。

以下の設定では、望ましい結果が得られますが、唯一の欠点は隠しティックラベルの軸を超えてグリッド線がさらに伸びていることです（少し面白いようです）。

var chartInstance = new Chart(ctx, { 
    type: 'line', 
    data: data, 
    options: { 
    scales: { 
     yAxes: [{ 
     ticks: { 
      stepSize: 1 
     }, 
     callback: function(value, index, values) { 
     if (value % 5 === 0) { 
      return value; 
     } else { 
      return ' '; 
     } 
     }, 
     }] 
    } 
    } 
}); 

codepenでの作業例です。