如何将数据动态插入“反应最小饼图”

Question

我正在使用react-minimal-pie-chart在我的网站上显示饼图。我可以轻松地将饼图显示为静态值。但是我想将数据从json数据动态地插入到饼图中。我从后端调用rest api，并获取json值。这是我的饼图代码：

import ReactMinimalPieChart from 'react-minimal-pie-chart';

    <ReactMinimalPieChart

    data={[
    {
    title: 'One',
    value: 100,
    color: '#E38627'
    },
    {
    title: 'Two',
    value: 150,
    color: '#C13C37'
    },
    {
    title: 'Three',
    value: 10,
    color: '#6A2135'
    }
    ]}
    lineWidth={15}
    style={{height: '170px'}}
    />

我的rest api用于json值：

<div>
     {
     this.state.leadSourceList.map((lead, key) =>
        {lead.lead_source}
        {lead.count}
    )}
</div>

获取json值

 {count: 3, lead_source: "jobaer"} 
 {count: 2, lead_source: "web"} 
 {count: 1, lead_source: "sourav"} 
 {count: 2, lead_source: "Hop Freeman"}

我想将此数据插入饼图。我搜索了google，但没有得到任何方便的答案。对此有任何帮助，或者如果有其他方法可以将值插入饼图或使用其他饼图，请告知我。

Answer 1

两个简单的步骤。

首先，在this.state.leadSourceList上进行映射，以便将每个项目转换为以下格式：

{ title: 'lead_source', value: count, color: '{foo_color}'}

像这样：

const pieData = this.state.leadSourceList.map((lead, key) => {
    return { 'title': lead.lead_source, 'value': lead.count, 'color': '{foo_color}'};
})

然后，按如下所示创建图表：

<ReactMinimalPieChart data={pieData}/>