アイテム数の変化を動的に反映する円グラフを作成しています。項目数は数えることができましたが、項目を更新してから円グラフにデータを格納するポイントを積み上げました。
この質問を参照しました：動的円グラフを作成するために状態を変更するにはどうすればよいですか?
同じ方法を実行しましたが、円グラフでデータが更新されません。
円グラフのイメージ
5つの質問カテゴリがあります。
商品イメージ
ユーザーはアイテムを追加および削除できます。アイテムの数は、円グラフに動的に反映される必要があります。とりあえず質問1のカテゴリだけ作りました。
コード
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" />
)}
}
私の質問を読んでくれてありがとう。