React(Next.js)使用Recharts时X轴日期重复如何解决？

问题产生原因 #

• 你的业务数据每30分钟返回一条，在1Day之外的时间筛选维度下，同一天会对应多条数据，每条数据对应不同的Unix时间戳。
• 你当前直接将全量数据的时间戳全部传入了XAxis的ticks属性，Recharts会严格按照传入的ticks数组逐一渲染刻度，同一日期的多个时间戳经过MMM D格式的格式化后输出完全相同的字符串，就出现了重复展示的问题。

修复方案 #

核心思路是对非1天维度的刻度做日期粒度去重，仅保留每日首个时间戳作为刻度即可，可以用useMemo缓存处理后的刻度数组避免重复计算：

import { useMemo } from 'react'

// 处理X轴刻度
const xTicks = useMemo(() => {
  if (!graphData?.length) return []
  // 1天维度需要展示小时分钟，保留全量刻度（也可按需按1小时间隔采样）
  if (activeFilter === '1d') {
    return graphData.map(item => item.date)
  }
  // 其他维度按日期去重，每天仅保留第一个时间戳作为刻度
  const dateSet = new Set()
  const filteredTicks = []
  graphData.forEach(item => {
    const dateKey = moment(Number(item.date) * 1000).format('YYYY-MM-DD')
    if (!dateSet.has(dateKey)) {
      dateSet.add(dateKey)
      filteredTicks.push(item.date)
    }
  })
  return filteredTicks
}, [graphData, activeFilter])

之后修改XAxis的ticks属性为处理后的xTicks即可：

<XAxis
  dataKey="date"
  stroke="#D5DBDE"
  domain={[graphData[0]?.date, graphData[graphData.length - 1]?.date]}
  ticks={xTicks} // 替换原来的全量ticks
  tickFormatter={(tick) => moment(tick * 1000).format(dateFormatString)}
  minTickGap={20} // 可选，控制刻度最小间隔，避免重叠
/>

如果3Months、ALL这类长周期筛选下，每日一个刻度依然过密，可以调整去重粒度为周/月，进一步减少刻度数量。

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