Chart.js v2 - 隐藏网格线答案

【问题标题】：Chart.js v2 - hiding grid linesChart.js v2 - 隐藏网格线
【发布时间】：2025-12-15 02:40:01
【问题描述】：

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

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

如何删除网格线？

【问题讨论】：

标签： javascript chart.js2

【解决方案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
            }   
        }]
    }
}

【讨论】：

这实际上是将gridLines颜色设置为0 opacity黑色（透明色）。因此，无论 div 的背景颜色如何，这都应该有效。
或者使用display:false，而不是“color”
非常感谢！如果文档在这个主题上更清楚一点就好了。 :)
虽然这个第一个答案可能会得到想要的图片，但它有点像黑客。第二种解决方案，实际上将 gridLines 显示属性设置为 false，似乎更正确。
这也是删除 x 轴（单行）和 y 轴（单行）的行。但我只想删除图表上的线条。所以 drawOnChartArea: false 是正确的。

【解决方案2】：

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

【讨论】：

这个答案让我可以保持比例但不能在图表上绘制网格线。
我认为这是更好的答案。
好答案。不过这更干净：Chart.defaults.scale.gridLines.drawOnChartArea = false;
@Kalimah：上面的（在选项中）代码对我有用。 “更清洁”的解决方案不适用于“chartjs-chart-error-bars”插件

【解决方案3】：

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

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

【讨论】：

这应该被投票更高。我想知道为什么以上答案都不起作用！
确实是 2021 年 8 月，接受的答案不再有效，但这个答案有效。
这应该是公认的答案
我想知道为什么其他解决方案会因为版本而抛出错误“Invalid scale configuration for scale: xAxes”。 Chart.js 3+ 选项与旧版本不同。

【解决方案4】：

如果你想让它们默认消失，你可以设置：

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

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

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

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

【讨论】：

【解决方案7】：

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

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

【讨论】：

这是正确的答案，因为这不会改变绘图区域的任何内容，谢谢 Ahmed

【解决方案8】：

在 chartjs 3 中访问此配置有一点不同。该属性的名称不是gridLines，而是grid，官方文档中显示：

options.gridLines 更名为options.grid

来源： https://www.chartjs.org/docs/latest/getting-started/v3-migration.html#ticks

这是它的外观：

const options = {
  scales: {
    x: {
      grid: {
        display: false,
      },
    },
  },
};

【讨论】：

Hristo，下一次，请您指向图书馆的文档以帮助指导提出问题的人。非常感谢您抽出宝贵时间。

【解决方案9】：

请参考官方文档：

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

以下代码更改将隐藏网格线：

        gridLines: {
            display:false
        }

【讨论】：

【解决方案10】：

ChartJS 3 的更新：

  const options = {
    scales: {
      x: {
        grid: {
          display: false,
        },
      },

      y: {
        grid: {
          // display: false,
          color: 'rgba(217,143,7,0.1)',
        },
      },
    },
}

【讨论】：