从纪元重新绘制月份 XAxis 计算答案

【问题标题】：Recharts month XAxis calculation from epoch从纪元重新绘制月份 XAxis 计算
【发布时间】：2020-08-14 18:53:59
【问题描述】：

我已经成功地根据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”（九月）没有显示，即使数据集有包含本月纪元的记录。

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

谢谢

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

【问题讨论】：

标签： reactjs epoch recharts

【解决方案1】：

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

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

为问题提供的 codepen 已使用解决方法进行更新。

这也是XAxis的一个小sn-p：

<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;

【讨论】：