使用具有多个数据数组的 recharts 创建图形
Creating graph with recharts with multiple data arrays
您好,我正在尝试创建类似于问题 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>
)
}
}
第二个打印语句显示创建了区域,但结果仅为:
对我来说是数据集结构,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}
]
基本上,每个时间点是图表上的唯一点,它的值必须是数组中的单独条目。
希望对您有所帮助:)
您好,我正在尝试创建类似于问题 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>
)
}
}
第二个打印语句显示创建了区域,但结果仅为:
对我来说是数据集结构,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}
]
基本上,每个时间点是图表上的唯一点,它的值必须是数组中的单独条目。
希望对您有所帮助:)