react-chartjs-2 饼图未正确呈现

时间:2021-03-26 20:14:24

标签: reactjs

我使用的是 react-chartjs-2 的饼图,但饼图显示不正确。数据集在变化,但饼图没有变化。

export class Statistics extends React.Component {
    constructor(props) {
        super(props);
        window.statistics = this; // to call functions outside of class
        this.state = {labels:['low', 'medium', 'high'], dataSets:[{data:[0,0,0], backgroundColor:['red', 'green', 'blue']}]}
        this.componentDidMount = this.componentDidMount.bind(this);
    }
    componentDidMount() {
        this.setState({dataSets:[{data:stats, backgroundColor:['red', 'green', 'blue']}]})
    }
    render() {
        console.log(this.state.dataSets)
        return(
            <div className = "pie-chart">
                <h1>Statistics</h1>
                <Pie
                data = {{labels:this.state.labels, datasets:this.state.dataSets}}
                height = {50}
                />
            <br/>
            </div>
        )
    };
}

饼图更新一次后,不会再次更改。尽管我可以通过控制台看到数据集发生变化,但饼图本身并没有发生变化。

0 个答案:

没有答案