我使用的是 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>
)
};
}
饼图更新一次后,不会再次更改。尽管我可以通过控制台看到数据集发生变化,但饼图本身并没有发生变化。