React JS Chart JS 2 没有在后台隐藏网格线答案

【问题标题】：React JS Chart JS 2 is not hiding the grid lines in the backgroundReact JS Chart JS 2 没有在后台隐藏网格线
【发布时间】：2021-11-30 03:48:26
【问题描述】：

我正在使用 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
                }

但他们还在那里。我的代码有什么问题，我该如何解决？

【问题讨论】：

标签： reactjs chart.js react-chartjs-2

【解决方案1】：

您在 V3 中使用 V2 语法，

你的配置需要是这样的：

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

所有差异请阅读migration guide

【讨论】：

非常感谢。现在一切正常。