如何使用chartjs删除X轴上的多余线条？

Question

我们如何从 X 网格线中删除这些额外的线？ 我已经来过这里，但似乎只是为了删除多余的 y 网格线。 有人知道如何像下面的图片那样做吗？

我尝试切换下面的 y 和 x，但似乎它隐藏了所有网格线，而不仅仅是图表区域的外部。

var x_axis = chartInstance.scales['x-axis-0'];
var topY = chartInstance.scales['y-axis-0'].top;
var bottomY = chartInstance.scales['y-axis-0'].bottom;
x_axis.options.gridLines.display = false;
x_axis.ticks.forEach(function (label, index) {
  if (index === 0) return;
  var x = x_axis.getPixelForValue(label);
  ctx.save();
  ctx.beginPath();
  ctx.strokeStyle = x_axis.options.gridLines.color;
  ctx.moveTo(x, topY);
  ctx.lineTo(x, bottomY);
  ctx.stroke();
  ctx.restore();
});

Answer 1

https://www.chartjs.org/samples/latest/scales/gridlines-display.html查看drawticks false选项

                 scales: {
                    yAxes: [{
                        gridLines: {
                          display: true,
                          drawBorder: true,
                          drawOnChartArea: true,
                          drawTicks: false,
                        }
                        ticks: {
                            min: 0,
                            max: 100,
                            stepSize: 10
                        }
                    }]
                }