Chart.js v2 - 隐藏网格线

Question

我使用Chart.js v2绘制一个简单的折线图。一切看起来都不错，除了我不想要的网格线：

折线图的文档在这里：https://nnnick.github.io/Chart.js/docs-v2/#line-chart，但我找不到任何隐藏这些“网格线”的内容。

如何删除网格线？

Answer 1

我找到了一个解决方案，用于隐藏折线图中的网格线。

将gridLines颜色设置为与div的背景颜色相同。

var options = {
    scales: {
        xAxes: [{
            gridLines: {
                color: "rgba(0, 0, 0, 0)",
            }
        }],
        yAxes: [{
            gridLines: {
                color: "rgba(0, 0, 0, 0)",
            }   
        }]
    }
}

或使用

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

Answer 2

如果您希望它们在默认情况下消失，您只需设置：

即可

Chart.defaults.scale.gridLines.display = false;

Answer 3

options: {
    scales: {
        xAxes: [{
            gridLines: {
                drawOnChartArea: false
            }
        }],
        yAxes: [{
            gridLines: {
                drawOnChartArea: false
            }
        }]
    }
}

Answer 4

从 3.x 版开始，使用此语法。 参考 chart.js 迁移指南：https://www.chartjs.org/docs/latest/getting-started/v3-migration.html

 scales: {
  x: {
      grid:{
       display:false
           }
     },
  y: 
     {
   grid:{
    display:false
        }
     }
         }

Answer 5

如果要隐藏网格线但要显示yAxes，则可以设置：

yAxes: [{...
         gridLines: {
                        drawBorder: true,
                        display: false
                    }
       }]

Answer 6

好的，没关系......我找到了诀窍：

    scales: {
      yAxes: [
        {
          gridLines: {
                lineWidth: 0
            }
        }
      ]
    }

Answer 7

下面的代码仅从图表区域中删除网格线，而不是x＆y轴标签中的网格线

Chart.defaults.scale.gridLines.drawOnChartArea = false;

Answer 8

请参考官方文档：

https://www.chartjs.org/docs/latest/axes/styling.html#grid-line-configuration

下面的代码更改将隐藏gridLines：

        gridLines: {
            display:false
        }