所以基本上我有这个数据:
const bodyWeightAndFatData = [
{
name: 'salim',
style:'#57c0e8',
category:'Body Weight',
data: [
{ day: 23, value: 100 },
{ day: 24, value: 101 },
{ day: 25, value: 104 },
{ day: 26, value: 107 },
{ day: 27, value: 108 },
{ day: 28, value: 105 },
{ day: 29, value: 106 },
{ day: 30, value: 107 },
{ day: 31, value: 107 },
],
},
{
name: 'salim',
style:'pink',
category:'Fat Percentage',
data: [
{ day: 23, value: 134 },
{ day: 24, value: 135 },
{ day: 25, value: 131 },
{ day: 26, value: 133 },
{ day: 27, value: 137 },
{ day: 28, value: 131 },
{ day: 29, value: 130 },
{ day: 30, value: 139 },
{ day: 31, value: 138 },
],
},
];
来自一个组件。我正在从另一个像这样的组件中绘制图表:
<div className={styles.outer}>
<div className={styles.inner}>
<p className={styles.title}>Average Measurments</p>
<ResponsiveContainer width="95%" height={300}>
<LineChart >
<CartesianGrid strokeDasharray="5 0" vertical={false} tickSize={10} padding={{ left: 20 }}/>
<XAxis yAxisId="right" tickLine={false} axisLine={false} dataKey="day" allowDuplicatedCategory={false} />
<YAxis tickCount={5} axisLine={false} dx={-15} dataKey="value"/>
<Tooltip/>
<Legend
layout="horizontal" verticalAlign="top" align="center"
payload={
props.data.map(
item => ({
type: "circle",
id: item.name,
color: item.style,
value: `${item.category}`
})
)
}/>
{props.data.map(s => (
<Line dataKey="value" data={s.data} name={s.name} key={s.category} stroke={s.style}/>
))}
</LineChart>
</ResponsiveContainer>
</div>
</div>
结果在绘制数据和所有内容时效果很好,但是我遇到的问题是,我需要显示两个Y轴,而不是仅显示一个。我已经查过,但是我不知道如何使用.map来创建它,有人可以帮忙吗?
这是我的做法。
const bodyWeightAndFatData = [
{
name: 'salim',
style:'#57c0e8',
category:'Body Weight',
data: [
{ day: 23, value: 100 },
{ day: 24, value: 101 },
{ day: 25, value: 104 },
{ day: 26, value: 107 },
{ day: 27, value: 108 },
{ day: 28, value: 105 },
{ day: 29, value: 106 },
{ day: 30, value: 107 },
{ day: 31, value: 107 },
],
},
{
name: 'salim',
style:'pink',
category:'Fat Percentage',
data: [
{ day: 23, value: 134 },
{ day: 24, value: 135 },
{ day: 25, value: 131 },
{ day: 26, value: 133 },
{ day: 27, value: 137 },
{ day: 28, value: 131 },
{ day: 29, value: 130 },
{ day: 30, value: 139 },
{ day: 31, value: 138 },
],
},
];
export default function App() {
return (
<div >
<div >
<p>Average Measurments</p>
<ResponsiveContainer width="95%" height={300}>
<LineChart >
<CartesianGrid strokeDasharray="5 0" vertical={false} tickSize={10} padding={{ left: 20 }}/>
<XAxis tickLine={false} axisLine={true} dataKey="day" allowDuplicatedCategory={false} />
<YAxis yAxisId="left" tickCount={5} dx={-15} dataKey="value"/>
<YAxis yAxisId="right" orientation="right" tickCount={5} dx={-15} dataKey="value"/>
<Tooltip/>
<Legend
layout="horizontal" verticalAlign="top" align="center"
payload={
bodyWeightAndFatData.map(
item => ({
type: "circle",
id: item.name,
color: item.style,
value: `${item.category}`
})
)
}/>
{bodyWeightAndFatData.map(s => (
<Line yAxisId="left" dataKey="value" data={s.data} name={s.name} key={s.category} stroke={s.style}/>
))}
{bodyWeightAndFatData.map(s => (
<Line yAxisId="right" dataKey="value" data={s.data} name={s.name} key={s.category} stroke={s.style}/>
))}
</LineChart>
</ResponsiveContainer>
</div>
</div>
);
}
两个轴在左边,一个在右边。