从年代开始重新计算X轴月份的数据

Question

我已经成功地生成了一个月的XAxis在 recharts 从 epoch 数据，如下面的例子所示。

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月）没有被显示出来，即使数据集中包含这个月的纪元的记录。

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

谢谢你

此外，这里还有一个 密码笔 重现了这个问题。

Answer 1

我通过手动将 "月份 "ticks传递给 "月度 "图表来解决这个问题。ticks 榰 XAxis.由于某些原因 tickFormatter 没有处理所有的时代。

也许有更好的方法，但这个方法对我来说很有效。

提供的 密码笔 的问题更新了变通方法。

此外，这是一个小片段 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;