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中的数据不是正确的数据。我有一个＆＃34;朋友＆＃34;对象列表

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

从中我将数据放入表中，我希望只获得此对象列表的两个标签以放入图表（电子邮件和消息）。我怎么能把这个值放在我的＆＃34; myDataSourcePie＆＃34;？有道具？谢谢

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

如何修改JSON标签React JS

1 个答案: