时间戳

首页 > 解决方案 > Recharts 自定义 X 轴

recharts - Recharts 自定义 X 轴

问题描述

有谁知道在图表中是否可能出现以下带有周轴的情况？

例如，有一个天图。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

编辑：我认为这是可能的，如果我们为轴创建一个自定义函数并添加几个条件，以便将星期# 的位置精确地放在某个区域之下。

感谢您的评论和研究！我的要求已经改变，所以我没有进一步讨论这个问题。

标签： recharts

解决方案

您的图表上绝对有可能有许多 XAxis。为此，您需要在<XAxis />图表中添加一条线，并将其设置xAxisId为唯一值，以便图表可以区分不同的 XAxis。（注意：所有 XAxis 都需要不同的 xAxisId；其默认值设置为0，您需要覆盖此默认值）。

然后，要获得没有任何重复的通用 XAxis 数据，您需要将allowDuplicatedCategoryXAxis 上的道具设置为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, week: "Week 1" },
  { name: "Wed", uv: 2000, pv: 9800, amt: 2290, week: "Week 1" },
  { name: "Thu", uv: 2780, pv: 3908, amt: 2000, week: "Week 1" },
  { name: "Fri", uv: 1890, pv: 4800, amt: 2181, week: "Week 1" },
  { name: "Sat", uv: 2390, pv: 3800, amt: 2500, week: "Week 1" },
  { name: "Sun", uv: 3490, pv: 4300, amt: 2100, week: "Week 1" },
  ...
];

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;

推荐阅读