javascript - 如何修改 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”中？带道具？谢谢

标签： javascriptreactjsfusioncharts

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;
    }