【发布时间】：2017-09-22 07:59:02
【问题描述】：
我正在制作一个动态反映项目数量变化的饼图。我可以计算项目的数量，但我在更新项目后将存储数据的点堆叠到饼图中。
我提到了这个问题：How to change states for making dynamic pie chart?
我遵循相同的方式，但我的数据未在我的饼图中更新。
饼图图片
有 5 个问题类别。
物品图片
用户可以添加和删除项目。项目的数量应该动态地反映在饼图中。我目前只制作了 question1 类别。
代码
export default class List extends React.Component {
constructor(props){
super(props);
this.state={
questionItem,
pieData : [{label: "question1", value: 4}, {label: "question2", value: 10}, {label: "question3", value: 25 },{label: "question4", value: 5 },{label: "question5", value: 12 }]
}
}
createItem(item){
this.state.questionItem.unshift({
item : item,
});
this.setState({
questionItem : this.state.questionItem
});
}
findItem(item) {
return this.state.questionItem.filter((element) => element.item === item)[0];
}
toggleComplete(item){
let selectedItem = this.findItem(item);
selectedItem.completed = !selectedItem.completed;
this.setState({ questionItem : this.state.questionItem });
}
saveItem(oldItem, newItem) {
let selectedItem = this.findItem(oldItem);
selectedItem.item = newItem;
let length1 = questionItem.length;
var array = [
{label : "question1" ,value : length1 },
{label : "question2" , value : length1 },
{label : "question3" , value : length1 },
{label : "question4" , value : length1 },
{label : "question5" , value : length1 } ]
this.setState({ questionItem : this.state.questionItem,
pieData : array });
}
deleteItem(item) {
let index = this.state.questionItem.map(element => element.item).indexOf(item);
this.state.questionItem.splice(index, 1);
this.setState({ questionItem : this.state.questionItem });
}
render() {
const { questionItem } = this.state
return (
<div>
<Chart data = { this.state.pieData} />
<div className="list" style={{"display" : "flex"}}>
<div className="titleElement" style={{"flex": "1", "backgroundColor" : "orange"}}>Advice + FAQ </div>
<div style={{"flex": "5", "display": "flex", "flex-direction": "column"}}>
<QuestionList questionItem={this.state.questionItem} deleteItem={this.deleteItem.bind(this)} saveItem={this.saveItem.bind(this)} toggleComplete={this.toggleComplete.bind(this)} />
<CreateItem questionItem={this.state.questionItem} createItem={this.createItem.bind(this)} />
</div>
</div>
</div>);
}
}
class Chart extends React.Component {
render(){
var PieChart = rd3.PieChart
var pieData = [{label: "question1", value: 4}, {label: "question2", value: 10}, {label: "question3", value: 25 },{label: "question4", value: 5 },{label: "question5", value: 12 }];
return (
<PieChart
data={this.props.data}
width={450}
height={400}
radius={110}
innerRadius={20}
sectorBorderColor="white"
title="Pie Chart" />
)}
}
感谢您抽出宝贵时间阅读我的问题。
【问题讨论】：