使用具有多个数据数组的 recharts 创建图形

Question

您好，我正在尝试创建类似于问题 React Recharts- getting data from different array names 的内容，但我无法在图表上显示数据。

这是我的数据集：

[ {0: {t: "00:00", value: 0.000957}, 
   1: {t: "03:00", value: 0.000853},
   2: {t: "07:00", value: 0.004372},
   3: {t: "09:00", value: 0.001052},
   4: {t: "13:00", value: 0.001013},
   5: {t: "16:00", value: 0.000854},
   6: {t: "18:00", value: 0.000861},
   7: {t: "22:00", value: 0.004468}},
  {0:{t: "00:00", value: 0.000185},
   1: {t: "03:00", value: 0.00011},
   2: {t: "07:00", value: 0.000236},
   3: {t: "09:00", value: 0.003084},
   4: {t: "13:00", value: 0.000132},
   5: {t: "16:00", value: 0.000108},
   6: {t: "18:00", value: 0.000136},
   7: {t: "22:00", value: 0.000308}}
]

代码：

export interface Props  {
    data: any;
}


export class MyGraph extends PureComponent<Props>{
state={
    data: {}
};

componentDidUpdate(prevProps: Readonly<Props>, prevState: Readonly<{}>, snapshot?: any): void {
    this.setState({data: this.props.data})
};


draw = () => {
    let arrArea =[];
    let data = this.state.data;
    console.log(data);
    let values = Object.entries(data);
   let colorCodes = ["#17607D", "#F2D8A7", "#1FCECB", "#FF9311", "#003D5C", "#F27649", "#D5CDB6", "#008C74", "#30588C", "#263138"];
    values.map((x, i) => {
  arrArea.push(<Area type='monotone' dataKey="value" stroke={colorCodes[i]} fill={colorCodes[i]} data={x[1]}/>)
     });
    console.log(arrArea);
return arrArea;
};

render(){
    return(
        <ResponsiveContainer height='100%' width='100%'>
        <AreaChart  data={this.state.data}
                   margin={{top: 5, right: 30, left: 20, bottom: 5}}>
            <XAxis dataKey="t"/>
            <YAxis/>
            <CartesianGrid strokeDasharray="3 3"/>
            <Tooltip/>
            <Legend />
            {this.draw().map(x=> x)}
        </AreaChart>
        </ResponsiveContainer>
    )
}
}

第二个打印语句显示创建了区域，但结果仅为：

Answer 1

对我来说是数据集结构，Recharts 期待这样的结构来在同一个仪表板上构建两个值的图表。如上图，图例中会有 value 和 valueTwo 而不是四个值：

 [  {t: "00:00", value: 0.000957, valueTwo: 0.000185}, 
    {t: "03:00", value: 0.000853, valueTwo:  0.00011},
    {t: "07:00", value: 0.004372, valueTwo: 0.000236},
    {t: "09:00", value: 0.001052, valueTwo: 0.003084},
    {t: "13:00", value: 0.001013, valueTwo: 0.000132},
    {t: "16:00", value: 0.000854, valueTwo: 0.000108},
    {t: "18:00", value: 0.000861, valueTwo: 0.000136},
    {t: "22:00", value: 0.004468, valueTwo: 0.000308}
]

基本上，每个时间点是图表上的唯一点，它的值必须是数组中的单独条目。

希望对您有所帮助:)

使用具有多个数据数组的 recharts 创建图形

Creating graph with recharts with multiple data arrays

javascript

reactjs

graph

recharts