如何将数据动态插入 "react-minimal-pie-chart"

Question

我正在使用 react-minimal-pie-chart 在我的网站上显示饼图。我可以轻松地显示具有静态值的饼图。但我想将数据从我的 json 数据动态插入到饼图中。我从后端调用其余 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'}}
    />

我的休息 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}/>

如何将数据动态插入 "react-minimal-pie-chart"

How to dynamically insert data into "react-minimal-pie-chart"

pie-chart

reactjs