React Recharts-從不同的陣列名稱獲取數據

Question

我有一個按date和brand顯示圖表的應用程序。 不幸的是，我是新來的反應者，我不知道如何獲取所需的特定數據。 現在我正在使用area chart

至於我的數據

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

輸出應該是這樣的

先感謝您 ：）

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