如何删除折线图背景中的网格线？

问题描述

我正在处理一个 React JS 项目。在我的项目中，我需要创建折线图组件。我正在尝试将 Chart JS 2 库用于 React JS。但是，现在我在自定义折线图时遇到了一些问题。我想删除背景中的网格和线条（屏幕截图）以及图表顶部的标签（我的第一个数据集）。

这是我的代码。

const data = {
    labels: ['January','February','march','April','May','June','July'],datasets: [
      {
        label: 'My First dataset',fill: true,lineTension: 0.1,backgroundColor: '#edfce9',borderColor: '#3DAA1D',borderCapStyle: 'butt',borderDash: [],borderDashOffset: 0.0,borderJoinStyle: 'miter',pointBorderColor: '#3DAA1D',pointBackgroundColor: '#fff',pointBorderWidth: 1,pointHoverRadius: 5,pointHoverBackgroundColor: '#3DAA1D',pointHoverBorderColor: 'rgba(220,220,1)',pointHoverBorderWidth: 2,poinTradius: 1,pointHiTradius: 10,data: [65,59,80,81,56,55,40],showLine: true
      }
    ]
  };

 <Line data={data} />

我该怎么做？去除图表背景中的网格（线）并去除顶部的标签（我的第一个数据集）？

解决方法

请查看文档。您可以在选项中禁用网格线（您必须添加） https://www.chartjs.org/docs/latest/axes/cartesian/#common-configuration

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