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

Question

我正在开发一个 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,220,1)',
        pointHoverBorderWidth: 2,
        pointRadius: 1,
        pointHitRadius: 10,
        data: [65, 59, 80, 81, 56, 55, 40],
        showLine: true
      }
    ]
  };

 <Line data={data} />

我怎样才能做到这一点？删除图表背景中的网格（线）并删除顶部的标签（我的第一个数据集）？

Answer 1

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

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