Recharts tickFormatter 不格式化日期答案

【问题标题】：Recharts tickFormatter not formatting dateRecharts tickFormatter 不格式化日期
【发布时间】：2021-11-21 13:53:54
【问题描述】：

我有这样的日期结构

这样的刻度格式化程序

  const formatXAxis = tickFormat => {
    return moment(tickFormat).format('DD/MM/YY');

}

我的图表看起来像这样

          <LineChart
        width={600}
        height={300}
        data={data.list}
        margin={{ top: 5, right: 20, bottom: 5, left: 0 }}
      >
        <Line 
          type="monotone" 
          dataKey="components.co" 
          stroke="#8884d8" />
        <XAxis
          dataKey="dt"
          tickFormatter={formatXAxis}
          domain={['dataMin', 'dataMax']}
          type="number"
        />
        <YAxis />
        <Tooltip />
      </LineChart>

但是当图表被渲染时，它在 dt 中作为时间戳读取，但转换器没有转换时间戳，它只是在每种情况下设置纪元开始日期

我看过其他人做同样事情的例子，但我看不出我在哪里出错了。任何帮助表示赞赏。如果我错过了任何可能相关的信息，请告诉我。谢谢！

【问题讨论】：

标签： javascript reactjs recharts

【解决方案1】：

您的代码存在一些问题。第一个是您传递给组件的类型属性。该类型不是数字，因为您将其格式化为字符串，您应该将其保留为未设置或使用值类别

<XAxis dataKey="dt" tickFormatter={(tick) => formatXAxis(tick)} type={'category'} />

第二个是你用时刻解析unix时间的方式。你需要首先告诉你正在向函数传递一个 unix 格式值，如下所示：

const formatXAxis = (tickFormat) => {
  return moment.unix(tickFormat).format("DD/MM/YYYY");
};

无论如何，我不太喜欢 moment.js，有点混乱，文档也不是很清楚。例如，我建议您使用日期 fns，这样处理日期会更容易。

我给你留下一个包含完整代码的代码框。

【讨论】：