如何使用 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 更改为 return Unix 纪元秒的日期并使用以下道具..

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

但是 XAxis 和数据线一起消失了。有什么方法可以 "fill in" 那些日期空白吗？

A codesandbox

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} />

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

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

How to use UTC date string as recharts axis and distribute it evenly

reactjs

recharts