Recharts tickFormatter 没有格式化日期

Question

我有这样的日期结构

像这样的刻度格式化程序

  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 作为时间戳，但是转换器没有转换时间戳，它只是在每种情况下设置纪元开始日期

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

Answer 1

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

<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，这样处理日期会更容易。

我给你留了一个包含完整代码的codesandbox。

Recharts tickFormatter 没有格式化日期

Recharts tickFormatter not formatting date

javascript

reactjs

recharts