为什么一些 react-chartjs-2 选项被忽略？

如何解决为什么一些 react-chartjs-2 选项被忽略？

我有一个简单的折线图，我试图将网格线从默认的灰色更改，但是选项对象似乎有选择地工作。也许我错过了一些基本的东西，但我一直在摆弄它几个小时并且无法让它工作，任何帮助表示赞赏！我正在使用“react-chartjs-2”。

下面是我传递数据和选项的 render() 方法。

render() {
        const data = {
            labels: this.state.realTimes,datasets: [
                {
                    label: "Price",data: this.state.Prices,fill: false,backgroundColor: "rgb(255,255,255)",borderColor: "rgba(255,255)"
                }
            ]
        };

        const options = {
            scales: {
                yAxis: {
                    beginAtZero: true,//this works

                    gridLines: {
                        color: "rgba(171,171,1)",//this doesn't
                        linewidth: 0.5
                      }
                }
            }
        };
        return (
            <div>
                {this.state.loading ? (
                    this.loading()
                ) : (
                    <Line  data={data} options={options} width={600} height={160}  />
                )}
            </div>
        );
    }

解决方法

将 scales.yAxis.gridLines 更改为 scales.yAxis.grid 即可。

请参阅 Chart.js 文档中的 Grid Line Configuration 或 Grid Configuration 示例页面。

请看下面可运行的 JavaScript 代码，看看它是如何工作的。

请看

new Chart('line-chart',{
  type: 'line',data: {
    labels: ['A','B','C','D','E','F','G'],datasets: [{
      label: 'My Dataset',data: [65,59,80,81,56,55,40],fill: false,borderColor: 'rgb(75,192,192)',tension: 0.2
    }]
  },options: {
    scales: {
      yAxis: {
        beginAtZero: true,grid: {
          color: 'rgb(0,255)',lineWidth: 0.5
        }
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js"></script>
<canvas id="line-chart" height="100"></canvas>

,

React chart.js 不是最新的 chart.js，所以你不能使用 v3。请使用 v2 语法，因为这是 react-chartjs 使用的。

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

如果您将 yAxes: {gridLines: {color: 'red'}} 更改为 yAxes: [{gridLines: { color: 'red'}}]，它应该可以正常工作