chart.js 在图表区域内隐藏网格线但保留 y 轴边框

Question

我想删除 gridLines，但我的 y 轴上仍然有边框。 这是它的样子。

我似乎无法找到解决方案。

我尝试使用drawBorder: true但它被drawOnChartArea: false覆盖。

我的代码目前看起来像这样：

 options: {
  legend: {
    display: false
  },
  scales: {
    yAxes: [{
      gridLines: {
        drawOnChartArea: false,
        // drawBorder: true,
        // display: false,

      },
    }],
    xAxes: [{
      gridLines: {
        drawBorder: true,
        display: false,

      },
      ticks: {
        display: false,
        min: 20,
        max: 70
      }
    }]
  }
}

Answer 1

将scales.yAxes[0].gridLines.drawTicks为 false 和gridLines.ticks.padding一些填充：

{
    type: 'horizontalBar',
    data: {
        labels: [4, 3, 2, 1],
        datasets: [{
            data: [50, 60, 70, 180]
        }]
    },
    options: {
        legend: {
            display: false
        },
        scales: {
            yAxes: [{
                gridLines: {
                    drawOnChartArea: false,
                    drawTicks: false,
                },
                ticks: {
                    padding: 10
                }
            }],
            xAxes: [{
                gridLines: {
                    drawBorder: true,
                    display: false,

                },
                ticks: {
                    display: false,
                    min: 20,
                    max: 70
                }
            }]
        }
    }
}