如何解决Recharts - ReactJS - 为什么 X 轴重复
我正在尝试显示一年中每个月的图表。
添加了我的数据,但不知何故 X 轴做了 3 次
任何想法如何纠正它?我做错了什么?
下面我有数据和图表的最小复制案例。
// Generate Data
function createData(time,amount1,amount2,amount3) {
return { time,amount3 };
}
const data1 = [
createData('1',0),createData('2',300,100,200),createData('3',600,100),createData('4',800,400,createData('5',1500,createData('6',2000,createData('7',2400,createData('8',createData('9',createData('10',createData('11',createData('12',undefined),];
export default function Chart() {
const theme = useTheme();
return (
<React.Fragment>
<Title>Year</Title>
<ResponsiveContainer>
<LineChart data={data1} width={600} height={300}
margin={{ top: 5,right: 30,left: 20,bottom: 5 }}>
<XAxis dataKey="time" stroke={theme.palette.text.secondary} />
<YAxis stroke={theme.palette.text.secondary}>
<Label
angle={270}
position="left"
style={{
textAnchor: 'middle',fill: theme.palette.text.primary,}}
>
Requests
</Label>
</YAxis>
<Tooltip />
<Legend />
<Line
data={data1}
type="monotone"
dataKey="amount1"
stroke={theme.palette.primary.main}
/>
<Line
data={data1}
type="monotone"
dataKey="amount2"
stroke={theme.palette.primary.main}
/>
<Line
data={data1}
type="monotone"
dataKey="amount3"
stroke={theme.palette.primary.main}
/>
</LineChart>
</ResponsiveContainer>
</React.Fragment>
);
}
为什么 X 轴上的月份重复?我为每个月设定值
做了一些研究,但找不到任何关于此的信息。
使用最新的“recharts”-“recharts”:“^2.0.3”,
解决方法
您应该删除每个 data={data1}
组件中的 Line
属性,这应该可以解决问题。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。