Recharts: не отображается при двойном цикле внутри BarChart - PullRequest
Новая
       3

Recharts: не отображается при двойном цикле внутри BarChart

0 голосов
/ 12 апреля 2019

Я использую Recharts для отображения своих графиков.
Мои данные выглядят так: 

const data = [
      {name: 'day 1', supermarket1:{strawberry:4090, apple:3740} , supermarket2:{strawberry:6498, apple:1008}, supermarket3:{strawberry:4090, apple:3740}},
      {name: 'day 2', supermarket1:{strawberry:200, apple:768} , supermarket2:{strawberry:700, apple:876}, supermarket3:{strawberry:300, apple:932}}
]

Я хочу дважды выполнить цикл внутри диаграммы, чтобы отобразить мои данные

Я попробовал всего одну петлю внутри диаграммы, и она отлично работала, но когда я хочу сделать петлю дважды, дисплей не появляется, я не знаю, почему

Мой код выглядит так: 

const SimpleBarChart = React.createClass({
    render () {
    return (
        <BarChart width={600} height={300} data={data}
            margin={{top: 5, right: 30, left: 20, bottom: 5}}>
       <CartesianGrid strokeDasharray="3 3"/>
       <XAxis dataKey="name"/>
       <YAxis/>
       {["supermarket1", "supermarket2", "supermarket3"].map((elt, index) =>{
         ["strawberry", "apple"].map((fruit, index2) =>{
         console.log(`${elt}.${fruit}`);
         return(
           <Bar
             key={index + index2}
             dataKey={`${elt}.${fruit}`}
             fill="#1f77b4"
           >
           </Bar>
         )
         })
       })}
      </BarChart>
    );
  }
})

1 Ответ

0 голосов
/ 15 апреля 2019

Решение состоит в том, чтобы дважды отобразить вне BarChart и упорядочить данные в третьем массиве, чтобы использовать их внутри BarChart. 

const SimpleBarChart = React.createClass({
    render () {
  let keys= [];
  {["supermarket1", "supermarket2", "supermarket3"].map((elt, index) =>{
       ["strawberry", "apple"].map((fruit, index2) =>{
       keys.push(`${elt}.${fruit}`)
       })
       })}  
    return (
        <BarChart width={600} height={300} data={data}
            margin={{top: 5, right: 30, left: 20, bottom: 5}}>
       <CartesianGrid strokeDasharray="3 3"/>
       <XAxis dataKey="name"/>
       <YAxis/>

       {keys.map((key, index) =>{

       return(
       <Bar
         key={index}
         dataKey={`${key}`}
         fill="#1f77b4"
       ></Bar>
       )
       })}
      </BarChart>
    );
  }
})

демо

...