ReCharts X轴时间刻度不显示整点，如何自定义格式？

完全可以实现这种动态刻度显示效果，核心是通过自定义tickFormatter函数，根据刻度所属日期与前一刻度的日期是否一致来切换显示格式。

以下是具体实现方案：

1. 自定义刻度格式化函数 #

在X轴配置中添加tickFormatter属性，编写逻辑判断：

• 对比当前刻度与前一刻度的日期是否相同
• 同一天：仅显示小时和分钟（如11:00）
• 跨天：显示完整日期时间（如14 May 2024 11:00）

2. 代码实现（适配函数组件场景） #

使用useRef存储前一刻度的日期，避免组件重渲染时重置状态：

import { useRef } from 'react';
import { XAxis } from 'recharts';

const YourChart = () => {
  // 存储前一个刻度的日期字符串，用于日期对比
  const prevDateRef = useRef(null);

  const customTickFormatter = (timestamp) => {
    const currentDate = new Date(timestamp);
    const currentDayStr = currentDate.toDateString();
    
    let displayText;
    if (prevDateRef.current && prevDateRef.current === currentDayStr) {
      // 同一天，仅显示小时和分钟
      displayText = currentDate.toLocaleTimeString('en-US', { 
        hour: '2-digit', 
        minute: '2-digit' 
      });
    } else {
      // 跨天，显示完整日期时间
      displayText = currentDate.toLocaleString('en-US', { 
        day: 'numeric', 
        month: 'short', 
        year: 'numeric', 
        hour: '2-digit', 
        minute: '2-digit' 
      });
    }
    
    prevDateRef.current = currentDayStr;
    return displayText;
  };

  return (
    <YourChartComponent>
      <XAxis 
        dataKey="timestamp" 
        tickFormatter={customTickFormatter} 
        // 保留你原有的其他X轴配置
      />
      {/* 其他图表组件（如Line, Tooltip等） */}
    </YourChartComponent>
  );
};

3. 关键注意点 #

• 如果你的数据间隔不固定，可配合tickCount或domain属性控制刻度生成数量，确保跨天刻度能被正确触发
• 若使用类组件，可将prevDate存储在组件实例属性中（如this.prevDate），替代useRef的作用

这样配置后，就能实现你预期的刻度效果：同一天的刻度显示11:00、12:00，跨天的第一个刻度显示14 May 2024 15:00，后续同一天的刻度自动切换回小时格式。

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