图表.js v2 - 隐藏网格线

javascript chart.js2

2022-08-30 01:17:54

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

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

如何删除网格线？

答案 1

我找到了一种解决方案，可以隐藏折线图中的网格线。

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

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
            }   
        }]
    }
}

答案 2

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

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