我使用chart. js v2绘制一个简单的折线图。一切看起来都很好,除了我不想要的网格线:

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

如何删除网格线?


当前回答

下面的代码只删除x轴和y轴标签中的网格线

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

其他回答

请参阅官方文件:

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

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

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

好吧,别介意. .我发现了窍门:

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

在chartjs 3中,访问这个配置有一点不同。属性的名称不是gridLines,而是grid,如官方文档所示:

选项。gridLines被重命名为options.grid

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

这是它的样子:

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

下面的代码只删除x轴和y轴标签中的网格线

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

从版本3开始。X,继续使用这个语法。 参考chart.js迁移指南:https://www.chartjs.org/docs/latest/getting-started/v3-migration.html

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