reactjs - 从纪元重新绘制月份 XAxis 计算

Question

我已经设法recharts从epoch数据中生成了一个月的 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”（九月）没有显示，即使数据集有包含本月纪元的记录。

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

谢谢

这里还有一个重现问题的代码笔。

标签： reactjsepochrecharts

Answer 1

我通过手动将“月”刻度传递ticks给XAxis. 由于某种原因，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;