使用帶有多個數據數組的圖表創建圖

Question

您好，我正在嘗試創建與問題React Recharts類似的東西- 從不同的數組名稱獲取數據，但是我無法在圖形上顯示數據。

這是我的數據集：

[ {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而不是4個值：

 [  {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}
] 

基本上，每個時間點都是圖形上的唯一點，並且它的值必須是數組中的單獨條目。

我希望這有幫助 ：）