如何修改 JSON 标签 React JS

Question

我正在尝试在ReactJS页面中添加图表。在同一页面中，我将数据放在一个表格中，我希望这些数据与我的图表相同。我的图表是这样的：

export const myDataSourcePie ={
chart: {
caption: "Title",
subcaption:  "Friends' chart",
startingangle: "120",
showlabels: "0",
showlegend: "1",
enablemultislicing: "0",
slicingdistance: "15",
showpercentvalues: "1",
showpercentintooltip: "0",
plottooltext: "Friend's email : $label Total messages : $datavalue",
theme: "ocean"
},
data: [
{
label: 'email',
value: '17',
},
{
label: 'email',
value: '100',
},
{
label: 'email',
value: '17',
},
{
label: 'email',
value: '17',
},
{
label: 'email',
value: '17',
},
{
label: 'email',
value: '17',
},
{
label: 'email',
value: '100',
},
{
label: 'email',
value: '17',
},
]
}
export const chartConfigs = {
type: 'pie3d',
width: 800,
height: 600,
dataFormat: 'json',
dataSource: myDataSourcePie
};

我导入它，然后用

<ReactFC {...chartConfigs} />

现在显然我的 JSON 中的数据不是正确的数据。我有一个"朋友"对象列表

friends:[
{"first_name": "name",
"surname": "surname",
"email": "[e-mail]",
"date_of_birth": "1982-02-20",
"nationality": "Japan",
"messages": 5
},
{...},
{...},
..
] 

我从中获取要放入表中的数据，并且只想获取此对象列表的两个标签以放入图表(电子邮件和消息(。如何将此值放入我的"myDataSourcePie"中？有道具？ 谢谢

Answer 1

试试这个：

getFriendsChart()
{
let dataChart = [];
this.state.friends.forEach( function( friend ) {
dataChart.push(
{
label: friend.email,
value: friend.messages,
}
);
});
let tempConfig = {...chartConfigs};     
tempConfig.dataSource.data = dataChart;
return tempConfig;
}