React Recharts-从不同的数组名称获取数据

Question

我有一个按date和brand显示图表的应用。不幸的是，我是新的反应和recharts，我不知道如何获得我想要的具体数据。 目前我正在使用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>
)} })