React JS Chart JS 2 没有隐藏后台的网格线

Question

我正在使用 React JS 构建一个 Web 应用程序。我的应用程序需要在仪表板上显示一些图表小部件。我正在使用 React JS Chart 2 包，https://www.npmjs.com/package/react-chartjs-2。我可以显示图表，但样式有问题。我试图隐藏背景中的网格线。现在看起来像这样。

这是我的代码。

const data = {
    labels: ['1', '2', '3', '4', '5', '6'],
    datasets: [
        {
            label: '# of Red Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: '#6886b4',
        },
        {
            label: '# of Blue Votes',
            data: [2, 3, 20, 5, 1, 4],
            backgroundColor: '#9db8d7',
        },
        {
            label: '# of Green Votes',
            data: [3, 10, 13, 15, 22, 30],
            backgroundColor: '#112c61',
        },
    ],
};

const options = {
    scales: {
        yAxes: [
            {
                gridLines: {
                    display:false
                }
            }
        ],
        xAxes: [
            {
                gridLines: {
                    display:false
                }
            }
        ],
    },
};

const GroupedBarChartWidget = (props) => {
    
    return (
        <>
            <div className={"box"}>
                <div className={"box-content"}>
                    <Bar data={data} options={options} />
                </div>
            </div>
        </>
    )
}

正如你所看到的，我试图使用它来隐藏背景中的网格线。

gridLines: {
                    display:false
                }

但他们还在那里。我的代码有什么问题以及如何修复它？

Answer 1

您正在将 V2 语法与 V3 一起使用，

你的配置需要是这样的：

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

对于所有差异，请阅读迁移指南