Recharts配置X轴仅展示年份后两位及解决数据点排布不均问题

你遇到的X轴空间分配不均问题，本质来自两层逻辑错位：

• 之前参考的Bas van der Linden实现，仅完成了刻度标签的格式修改，没有调整X轴的坐标分配逻辑
• Recharts默认将未显式指定类型的X轴判定为类目轴（category）。这类轴的坐标分配规则是：每个独立数据条目占据完全相等的横向宽度，完全不考虑数据点之间的真实时间间隔。

当某一年份下存储的数据条目更多时，该年份对应的X轴总宽度就会被等比例放大，最终出现2018年密集数据点的横向空间超过其他三个年份总和的异常效果。

要同时实现「X轴仅展示两位年份短标识」+「相邻年份等距排布」两个需求，需要做两处核心调整：

1. 将X轴从类目轴切换为数值型时间轴，让坐标位置严格匹配真实时间跨度，保证相同时长的时间区间横向间距完全一致
2. 通过刻度格式化方法，将完整年份转换为两位短标识，避免冗余的全量日期标签

• 数据预处理：为每个数据条目增加时间戳字段，将字符串格式的日期转换为可计算的毫秒级时间戳，作为X轴的定位依据；同时可过滤无法正常解析的非法日期（例如示例中的2017-16-01、2018-11-00这类格式错误的日期值）
• 轴类型切换：给<XAxis />组件添加type="number"属性，显式启用数值轴模式，打破类目轴的等宽条目分配逻辑
• 刻度格式化：通过tickFormatter配置自定义刻度展示逻辑：将时间戳转换为日期对象后，提取完整年份并截取最后两位，最终输出17/18/19这类短标识
• 域范围配置：通过domain属性结合数据的最小、最大时间戳预留少量边距，避免首尾数据点贴靠图表边缘
• 刻度数量控制：通过tickCount属性控制X轴生成的刻度总数，确保恰好匹配覆盖的年份区间，避免标签拥挤

import { ResponsiveContainer, LineChart, Line, CartesianGrid, XAxis, YAxis, Tooltip } from 'recharts';

// 原始测试数据集
const rawData = [
    { date: "2017-02-01", price: 231 },
    { date: "2017-04-01", price: 453 },
    { date: "2017-16-01", price: 123 }, 
    { date: "2018-01-01", price: 234 },
    { date: "2018-04-01", price: 958 },
    { date: "2018-11-01", price: 163 },
    { date: "2018-11-02", price: 163 },
    { date: "2018-11-03", price: 163 },
    { date: "2018-11-06", price: 163 },
    { date: "2018-11-05", price: 163 },
    { date: "2018-11-07", price: 163 },
    { date: "2018-11-08", price: 163 },
    { date: "2018-11-09", price: 163 },
    { date: "2018-11-00", price: 163 },
    { date: "2018-11-11", price: 163 },
    { date: "2018-11-12", price: 163 },
    { date: "2018-11-13", price: 163 },
    { date: "2018-11-14", price: 163 },
    { date: "2018-11-15", price: 163 },
    { date: "2018-11-16", price: 163 },
    { date: "2018-11-17", price: 163 },
    { date: "2019-03-01", price: 293 },
    { date: "2019-10-01", price: 471 },
    { date: "2020-07-01", price: 881 },
    { date: "2020-09-01", price: 122 }
];

// 预处理：转换时间戳、过滤非法日期
const d = rawData.map(item => {
  const timeStamp = Date.parse(item.date);
  // 跳过无法正常解析的非法日期
  if (Number.isNaN(timeStamp)) return null;
  return {...item, timeStamp};
}).filter(Boolean);

export function Chart() {
    return (
        <ResponsiveContainer width="100%" height={400}>
            <LineChart data={d}>
                <Line type="monotone" dataKey="price" stroke="#8884d8" />
                <CartesianGrid stroke="#ccc" strokeDasharray="5 5" />
                <XAxis 
                  dataKey="timeStamp"
                  type="number"
                  // 前后预留30天边距，避免数据点贴边
                  domain={['dataMin - 30 * 86400000', 'dataMax + 30 * 86400000']}
                  // 格式化刻度：仅展示年份最后两位
                  tickFormatter={(timestamp) => String(new Date(timestamp).getFullYear()).slice(-2)}
                  // 控制刻度数量，匹配年份覆盖范围
                  tickCount={4}
                />
                <YAxis dataKey="price" />
                <Tooltip 
                  // 自定义Tooltip展示完整日期，保证信息完整性
                  labelFormatter={(timestamp) => new Date(timestamp).toLocaleDateString()}
                />
            </LineChart>
        </ResponsiveContainer>
    )
}

内容的提问来源于stack exchange，提问作者Nyxynyx