图表js折线图上的不同网格线步骤

Question

我有一个 y 轴刻度的折线图，刻度为 5，我希望网格线的步长/间隔为 1。我看不到明显的方法，无论如何在chart.js 中实现这个？

提前致谢！

Answer 1

不幸的是，对于当前的 Chart.js API，没有一种干净的方法来配置独立于刻度线放置的网格线放置。换句话说，您不能将轴配置为每 5 步显示一个刻度，同时仍然每 1 步显示网格线。

即使没有干净的方法，但是，仍然有一种方法可以让您的行为得到满足。

下面的配置会给你想要的结果，但唯一的缺点是网格线仍然超出隐藏刻度标签的轴（例如它看起来有点有趣）。

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的工作示例。