[英]How to mapping variable data for pie chart (react.js)
I want make pie chart using state value in react with '@toast-ui/react-chart'.我想使用 state 值与“@toast-ui/react-chart”做出反应来制作饼图。
I tried this and that after looking at the examples, but it's hard to me.在查看示例后,我尝试了这个和那个,但这对我来说很难。
This is a example.这是一个例子。
//chart data
var data = {
categories: ['June, 2015'],
series: [
{
name: 'Budget',
data: [5000]
},
{
name: 'Income',
data: [8000]
},
{
name: 'Expenses',
data: [4000]
},
{
name: 'Debt',
data: [6000]
}
]
};
var options = {
chart: {
width: 660,
height: 560,
title: 'Today's Channel & Value.'
}
tooltip: {
suffix: 'value'
}
},
};
var theme = {
series: {
colors: [
'#83b14e', '#458a3f', '#295ba0', '#2a4175', '#289399',
'#289399', '#617178', '#8a9a9a', '#516f7d', '#dddddd'
]
}
};
//render part
render()
{
return(
<div>
<PieChart
data={data}
options={options}
/>
</div>
}
and document is here.文件在这里。
https://github.com/nhn/toast-ui.react-chart#props https://nhn.github.io/tui.chart/latest/tutorial-example07-01-pie-chart-basic https://github.com/nhn/toast-ui.react-chart#props https://nhn.github.io/tui.chart/latest/tutorial-example07-01-pie-chart-basic
What's in the document is how to make a chart with a fixed number, but I want to change it using the state.文档中的内容是如何制作具有固定数字的图表,但我想使用 state 进行更改。
So, How can I mapping series data like this and how to add data length flexible?那么,如何映射这样的系列数据以及如何灵活地添加数据长度?
I have list of object like...我有 object 之类的列表...
this.state.list =[{"channel_name":"A","channel_number":17,"VALUE":3,"num":1},
{"channel_name":"B","channel_number":23,"VALUE":1,"num":2},
{"channel_name":"C","channel_number":20,"VALUE":1,"num":3},
{"channel_name":"D","channel_number":1,"VALUE":1,"num":4}]
The length of the list is between 1 and 7 depending on the results of the query.列表的长度在 1 到 7 之间,具体取决于查询的结果。
I want to do like this.我想这样做。
series:[
{
name: this.state.list[0].channel_name+this.state.list[0].channel_num
data: this.state.list[0].VALUE
},
{
name: this.state.list[1].channel_name+this.state.list[1].channel_num
data: this.state.list[1].VALUE
},
{
name: this.state.list[2].channel_name+this.state.list[2].channel_num
data: this.state.list[2].VALUE
},
{
name: this.state.list[3].channel_name+this.state.list[3].channel_num
data: this.state.list[3].VALUE
}
]
How can I implement it however I want?我怎样才能实现它?
Since this.state.list is a list of objects, so you can simply use map method to loop through each object https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map . Since this.state.list is a list of objects, so you can simply use map method to loop through each object https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/地图。 Then create new object with custom value.
然后使用自定义值创建新的 object。
let new_series = [];
this.state.list.map((obj) => {
let info = {
name: obj.channel_name + obj.channel_number, //from your code
data: obj.VALUE //from your code
}
new_series.push(info)
});
Then assign new list to your chart.然后将新列表分配给您的图表。
//chart data
var data = {
categories: ['June, 2015'],
series: new_series
]
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.