Как динамически вставлять данные в «response-minimal-pie-chart» - PullRequest
Новая
       35

Как динамически вставлять данные в «response-minimal-pie-chart»

1 голос
/ 09 июля 2019

Я использую response-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, но я не получил никакого удобного ответа. Буду признателен за любую помощь в этом отношении, или если есть какой-либо альтернативный способ вставить значение в круговую диаграмму или использование альтернативной круговой диаграммы, пожалуйста, сообщите мне.

this circle comes, but color is same for all

1 Ответ

2 голосов
/ 09 июля 2019

Два простых шага.

Сначала отобразите 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}/>
...