如何解决Recharts 自定义 X 轴
有谁知道在 recharts 中是否可以使用以下带有周轴的场景?
例如,假设有一个天数图表。 X 轴上大约有连续 20 天。您需要一个额外的 X 轴下方提到周#,但周应该浮动在其相关天数范围的中间,如下所示:
Mon Tue Wed Thr Fri Sat Sun Mon Tue Wed Thr Fri Sat Sun Mon Tue Wed Thr Fri Sat
Week 1 Week 2 Week 3
编辑:我认为这是可能的,如果我们为轴创建一个自定义函数并添加几个条件,以便将周#放置在特定区域下。
感谢您的评论和研究!我的要求发生了变化,所以我没有进一步讨论这个问题。
解决方法
图形上绝对有可能有多个 XAxis。为此,您需要在图形中添加一条 <XAxis />
线,并将其 xAxisId
设置为唯一的值,以便图形可以区分不同的 XAxis。 (注意:所有 XAxis 都需要不同的 xAxisId;其默认值设置为 0
,您需要覆盖此默认值)。
然后,要获得没有任何重复的通用 XAxis 数据,您需要将 XAxis 上的 allowDuplicatedCategory
道具设置为 false
。但是,第一个和最后一个刻度不会居中。我会看看我是否能找到解决方案。
使用给定的数据示例,结果图可能如下所示:
import React from "react";
import {
LineChart,Line,XAxis,YAxis,CartesianGrid,Tooltip,Legend
} from "recharts";
const data = [
{ name: "Mon",uv: 4000,pv: 2400,amt: 2400,week: "Week 1" },{ name: "Tue",uv: 3000,pv: 1398,amt: 2210,{ name: "Wed",uv: 2000,pv: 9800,amt: 2290,{ name: "Thu",uv: 2780,pv: 3908,amt: 2000,{ name: "Fri",uv: 1890,pv: 4800,amt: 2181,{ name: "Sat",uv: 2390,pv: 3800,amt: 2500,{ name: "Sun",uv: 3490,pv: 4300,amt: 2100,...
];
const SimpleLineChart = () => {
return (
<LineChart
width={1200}
height={300}
data={data}
margin={{ top: 5,right: 30,left: 20,bottom: 5 }}
>
<XAxis xAxisId="0" dataKey="name" />
<XAxis xAxisId="1" dataKey="week" allowDuplicatedCategory={false} />
<YAxis />
<CartesianGrid strokeDasharray="3 3" />
<Tooltip />
<Legend />
<Line
type="monotone"
dataKey="pv"
stroke="#8884d8"
activeDot={{ r: 8 }}
/>
<Line type="monotone" dataKey="uv" stroke="#82ca9d" />
</LineChart>
);
};
export default SimpleLineChart;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。