如何使用UTC日期字符串作为recharts轴并均匀分布

Question

我的数据源如下所示：

const data = [
    { dataora: "2019-10-20T04:00:00Z", valore: -0.04 },
    { dataora: "2019-10-20T05:00:00Z", valore: -0.03 },
    { dataora: "2019-10-20T06:00:00Z", valore: -0.03 },
    { dataora: "2019-10-20T07:00:00Z", valore: -0.03 },
    { dataora: "2019-10-21T10:00:00Z", valore: -0.04 },
    { dataora: "2019-10-21T23:00:00Z", valore: -0.04 },
    { dataora: "2019-10-22T00:00:00Z", valore: -0.04 }
  ];

我的recharts组件如下所示：

<LineChart width={600} height={300} data={data}>
  <Line type="monotone" dataKey="valore" stroke="black" strokeWidth={2} dot={false} />
  <CartesianGrid stroke="#ccc" />
  <XAxis
    dataKey={'dataora'}
    tickFormatter={dateFormatter}
  />
  <YAxis />
</LineChart>

dateFormatter 看起来像这样：

const dateFormatter = date => {
  // return moment(date).unix();
  return moment(date).format('DD/MM/YY HH:mm');
};

通常我每隔一小时就有一个数据条目，但一2019-10-21整天只有两个值，现在我想在我的图表中也显示缺失的小时数。在其他数据条目中，我可能会得到不同的时间间隔，因此我无法手动设置刻度间隔。我只需要将日期字段均匀分布在 XAxis 上。

我试图更改tickFormatter以返回 Unix 纪元秒中的日期并使用以下道具..

scale="time" type="number" domain={[dateFormatter(data[0].dataora), dateFormatter(data[1].dataora)]}

但是 XAxis 与数据线一起消失了。有没有办法“填写”这些日期空白？

一个代码沙盒

Answer 1

[在这里回答我自己]

事实证明，我必须事先处理输入数据，因为 recharts 没有任何东西可以让我教他如何读取我的输入数据。所以我将我的日期字段转换为纪元。

data.forEach(d => {
  d.dataora = moment(d.dataora).valueOf(); // date -> epoch
});

然后我可以使用日期字段类型作为数字并设置域等。

<XAxis 
  dataKey={'dataora'}
  domain={[data[0].dataora, data[data.length - 1].dataora]}
  scale="time"
  type="number"
  tickFormatter={DateFormatter} />

我对这个解决方案不太满意，因为它要求我在渲染图表之前实际处理所有数据。我还没有用大数据（数千个条目或更多）尝试过，但我并不乐观。