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