react-chartjs-2 更改轴文本颜色

Question

我做了很多搜索，但我尝试的任何方法都无法更改轴文本颜色。但是，我可以将网格颜色更改为白色scales.yAxes.grid.color。这就是我现在所拥有的：

  render(){
        return (
            <div className = "chart">
                <Line
                    data = {this.state.chartData}

                    options= {{
                        maintainAspectRatio: false,
                        scales: {
                            yAxes:{
                                grid: {
                                    drawBorder: true,
                                    color: '#FFFFFF',
                                },
                                ticks:{
                                    beginAtZero: true,
                                    fontColor: 'white'
                                }
                            },
                            xAxes: {
                                grid: {
                                    drawBorder: true,
                                    color: '#FFFFFF',
                                },
                                ticks:{
                                    beginAtZero: true,
                                    fontColor: 'white'
                                }
                            },
                        }
                    }}
                    width = {20}
                    height = {200}
                />
            </div>
        )
    }
}

Answer 1

字体颜色可以通过“color”而不是“fontColor”设置

render(){
        return (
            <div className = "chart">
                <Line
                    data = {this.state.chartData}

                    options= {{
                        maintainAspectRatio: false,
                        scales: {
                            yAxes:{
                                grid: {
                                    drawBorder: true,
                                    color: '#FFFFFF',
                                },
                                ticks:{
                                    beginAtZero: true,
                                    color: 'white',
                                    fontSize: 12,
                                }
                            },
                            xAxes: {
                                grid: {
                                    drawBorder: true,
                                    color: '#FFFFFF',
                                },
                                ticks:{
                                    beginAtZero: true,
                                    color: 'white',
                                    fontSize: 12,
                                }
                            },
                        }
                    }}
                    width = {20}
                    height = {200}
                />
            </div>
        )
    }
}