Reacts-異なる配列名からデータを取得する

Question

dateとbrandでグラフを表示するアプリがあります。残念ながら、私は反応しrechartsと私は私が望む特定のデータを取得する方法を知りません新しいです。 今の私は自分のデータ

const data1 = [ 
 
{ 
 
    "data1result": [ 
 
    { 
 
     "brand": "brand1" 
 
    }, 
 
    { 
 
     "brand": "brand2" 
 
    }, 
 
    { 
 
     "brand": "brand3" 
 
    }, 
 
    { 
 
     "brand": "brand4" 
 
    } 
 
    ] 
 
} 
 
]; 
 

 
const data2 = [ 
 
{ 
 
    "data2result": [ 
 
    { 
 
     "date": "12-01", 
 
     "details": [ 
 
     { 
 
      "amount": 24250, 
 
      "brand": "brand1" 
 
     }, 
 
     { 
 
      "amount": 68350, 
 
      "brand": "brand2" 
 
     }, 
 
     { 
 
      "amount": 60, 
 
      "brand": "brand3" 
 
     }, 
 
     { 
 
      "amount": 11078, 
 
      "brand": "brand4" 
 
     } 
 
     ] 
 
    }, 
 
    { 
 
     "date": "12-02", 
 
     "details": [ 
 
     { 
 
      "amount": 27340, 
 
      "brand": "brand1" 
 
     }, 
 
     { 
 
      "amount": 16500, 
 
      "brand": "brand2" 
 
     }, 
 
     { 
 
      "amount": 210, 
 
      "brand": "brand3" 
 
     }, 
 
     { 
 
      "amount": 23229, 
 
      "brand": "brand4" 
 
     } 
 
     ] 
 
    }, 
 
    { 
 
     "date": "12-03", 
 
     "details": [ 
 
     { 
 
      "amount": 24250, 
 
      "brand": "brand1" 
 
     }, 
 
     { 
 
      "amount": 68350, 
 
      "brand": "brand2" 
 
     }, 
 
     { 
 
      "amount": 60, 
 
      "brand": "brand3" 
 
     }, 
 
     { 
 
      "amount": 11078, 
 
      "brand": "brand4" 
 
     } 
 
     ] 
 
    } 
 
    ] 
 
} 
 
];

用として、私のコード

export default React.createClass({ 
 
    render() { 
 
    return (
 
\t <ResponsiveContainer width="100%" aspect={3}> 
 
\t \t <AreaChart width={600} height={400} data={data} 
 
\t \t   margin={{top: 10, right: 30, left: 0, bottom: 0}}> 
 
\t \t  <XAxis height={60} tick={<CustomizedAxisTick/>} dataKey="name"/> 
 
\t \t  <YAxis/> 
 
\t \t  <CartesianGrid strokeDasharray="3 3"/> 
 
\t \t  <Tooltip/> 
 
\t \t  {data1[0].data1result.map(function(c, index) { 
 
\t \t   return (
 
\t \t   <Area type='monotone' dataKey={c.name} stroke={colors[index % colors.length]} fill={colors[index % colors.length]} fillOpacity={0.3}/> 
 
\t \t   ) 
 
\t \t  })} 
 
\t \t  <Legend/> 
 
\t \t </AreaChart> 
 
\t </ResponsiveContainer> 
 
    )} 
 
})

ため area chart

を使用しています

と出力はこの

ようにする必要がありますが、事前にありがとう:)

Answer 1

あなたがオブジェクトの0・インデックス付きの配列としてデータを構築する必要があります。

let graphData = [ 
{ 
    date: "12-01", 
    brand1: 24250, 
    brand2: 68350, 
    brand3: 60, 
    brand4: 11078, 
}, 
{ 
    date: "12-02", 
    brand1: 27340, 
    brand2: 16500, 
    brand3: 210, 
    brand4: 23229, 
}, 
{ 
    date: "12-03", 
    brand1: 24250, 
    brand2: 68350, 
    brand3: 60, 
    brand4: 11078, 
}] 

そして、あなたのコンポーネントがこの

export default React.createClass({ 
_drawAreas(){ 
    let data = this.state.data || []; 
    let dataSet = data[0], areaArr = [];   
    let count = 0, len = Object.keys(dataSet).length; 
    let colorCodes = ["#17607D", "#F2D8A7", "#1FCECB", "#FF9311", "#003D5C", "#F27649", "#D5CDB6", "#008C74", "#30588C", "#263138"] 
    for(let i in dataSet){ 
     if(dataSet.hasOwnProperty(i) && i != 'date'){ 
      areaArr.push(<Area type='monotone' dataKey={i} stroke={colorCodes[count]} key={`area-chart-${count}`} fill={colorCodes[count]}/>)    
      count++; 
     } 
    } 
    return areaArr; 
} 



render() { 
return (
    <ResponsiveContainer width="100%" aspect={3}> 
     <AreaChart width={600} height={400} data={this.state.data} 
       margin={{top: 10, right: 30, left: 0, bottom: 0}}> 
      <XAxis height={60} dataKey="date"/> 
      <YAxis/> 
      <CartesianGrid strokeDasharray="3 3"/> 
      <Tooltip/> 
      {this._drawAreas()} 
     <Legend/> 
     </AreaChart> 
    </ResponsiveContainer> 
)} }) 

のようになります。