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

debugcn 发表于 Dev

佐托夫

您好，我正在尝试创建类似于问题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>
    )
}
}

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

佐托夫

对我来说，这是数据集结构，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}
]

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

我希望这有帮助：）

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。