删除图表上的轴线.js

Question

我一直在使用一些图表.js我一直在试图弄清楚如何删除图表上的轴线。

您可以在此图像中看到我试图删除的网格线。

我已经设法删除了表示数据的图表中出现的网格线，但是删除这两条线时遇到了问题。

你可以看到图表.js我为下面的图表创建。

var ctx = document.getElementById("volCause").getContext('2d');
var volCause_Doughnut = new Chart(ctx, {
    type: 'horizontalBar',
    data: {
            labels: <?php echo $cause_label_json?>,
        datasets: [{
            backgroundColor: benefactoGraph_colours,
            data: <?php echo $cause_value_json?>
        }]
    },
    options: {
        maintainAspectRatio: false,
        legend: {
            display: false,
        },
        scales: {
            xAxes: [{
                scaleLabel: {
                    display: true,
                    labelString: 'Volunteer Hours',
                },
                gridLines: {
                    display: false,
                },
            }],
            yAxes: [{
                gridLines: {
                    display: false,
                }
            }]
        }
    }
});

任何建议将不胜感激。

Answer 1

您需要将

网格线的 drawBorder 属性设置为 false 才能删除这些轴线，如下所示：

...
scales: {
   xAxes: [{
      scaleLabel: {
         display: true,
         labelString: 'Volunteer Hours',
      },
      gridLines: {
         display: false,
         drawBorder: false //<- set this
      },
   }],
   yAxes: [{
      gridLines: {
         display: false,
         drawBorder: false //<- set this
      }
   }]
}
...

Answer 2

您可以在轴对象中设置 display： false

scales: {
  xAxes: [{
    display: false,
    gridLines: {}
  }],
  yAxes: [{
    display: false,
    gridLines: {}
  }]
 }

Answer 3

其他答案对于不同版本的 chart.js是正确的，但截至 2020 年 1 月，使用 2.9.3 版，我能够通过将display: false嵌套在 gridlines 中来解决此问题，如下所示：

    ...
  , options:
      scales: {
        xAxes: [{
          gridLines: {
              display: false
          },
    ...

这是一个相关的 GitHub 问题。