Recharts 月 XAxis 从纪元计算

Question

我已经成功地从 epoch 数据中生成 recharts 中的月份 XAxis，如下例所示：

const MonthChart = ({ data, domain, ...restProps }) => {
  const xFormatter = (seconds) =>
    new Date(seconds * 1000).toLocaleDateString("en-US", { month: "short" });

  return (
    <ResponsiveContainer width="99%" height={400}>
      <ComposedChart
        data={data}
        margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
      >
        <CartesianGrid strokeDasharray="3 3" />
        <Tooltip />
        <Legend />
        <XAxis
          dataKey="epoch"
          type="number"
          domain={domain}
          interval={0}
          tickFormatter={xFormatter}
          tickCount={12}
        />
        <YAxis />
        <Area
          type="monotone"
          dataKey="range"
          fill="#b2b2b2 "
          stroke="#b2b2b2 "
          strokeDasharray="3 3"
        />
        <Line
          type="monotone"
          dataKey="average"
          stroke="#000"
          strokeDasharray="3 3"
        />
      </ComposedChart>
    </ResponsiveContainer>
  );
};

但由于某些原因 "Sep"（9 月）未显示，即使数据集包含包含本月纪元的记录。

你能发现我的方法有什么问题吗？

谢谢

这里还有一个 codepen 重现了这个问题。

Answer 1

我通过手动将 "month" 刻度传递给 XAxis 的 ticks 属性解决了这个问题。出于某种原因，tickFormatter 没有处理所有时期。

可能有更好的方法，但这个方法对我有用。

为问题提供的 codepen 更新了解决方法。

这也是XAxis的一小段：

<XAxis
  dataKey="epoch"
  type="number"
  domain={domain}
  interval={0}
  tickFormatter={xFormatter}
  tickCount={12}
  ticks={manualTicks}
/>

ticks数组：

const manualTicks = [
  epochGenerator(new Date(YEAR, 1, 1)),
  epochGenerator(new Date(YEAR, 2, 1)),
  epochGenerator(new Date(YEAR, 3, 1)),
  epochGenerator(new Date(YEAR, 4, 1)),
  epochGenerator(new Date(YEAR, 5, 1)),
  epochGenerator(new Date(YEAR, 6, 1)),
  epochGenerator(new Date(YEAR, 7, 1)),
  epochGenerator(new Date(YEAR, 8, 1)),
  epochGenerator(new Date(YEAR, 9, 1)),
  epochGenerator(new Date(YEAR, 10, 1)),
  epochGenerator(new Date(YEAR, 11, 1)),
  epochGenerator(new Date(YEAR, 12, 1)),
]

和epochGenerator：

const epochGenerator = (date) => date.getTime() / 1000;

Recharts 月 XAxis 从纪元计算

Recharts month XAxis calculation from epoch

epoch

reactjs

recharts