如何将数据动态插入“react-minimal-pie-chart”答案

【问题标题】：How to dynamically insert data into "react-minimal-pie-chart"如何将数据动态插入“react-minimal-pie-chart”
【发布时间】：2019-07-10 02:09:09
【问题描述】：

我正在使用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'}}
    />

我的 json 值的其余 api：

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

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

【问题讨论】：

标签： reactjs pie-chart

【解决方案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}/>

【讨论】：

映射后 this.state.leadSourceList 我得到了字符串值，如 3 jobaer 2 web。如何获得这种格式的价值？
@jobaer sourav - 如果您觉得有帮助，请点赞并“接受”这个答案:)
是的兄弟，它来了。但它没有得到颜色。如何为不同的饼图设置不同的颜色？
也许初始化一个包含所需颜色的字符串数组，并在您遍历 JSON 数据时，为每个对象分配不同的颜色。
查看我得到的饼图的更新问题。我将初始化一个数组，但如何为它们分配不同的值？ bcz 我正在映射 this.state.leadSourceList.map 这个，如何设置不同的颜色