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;