chart.js在chartarea内部隐藏网格线，但保持y轴边框

Question

我想删除gridLines，但在y轴上仍然有边框。 Here's what it looks like.

我似乎找不到解决办法。

我尝试使用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
                }
            }]
        }
    }
}