无法将日期传递到nivo折线图

Question

我使用的是nivo折线图，希望使用x轴作为时间线，最短为一分钟。不幸的是，我无法绘制那张图表，因为它没有正确地显示日期。例如，这是我数据的一部分：

{ x: "2020-04-24T13:07:44.000+0000", y: 0.8063946735624102 }

这是图表获得的数据，使用以下代码生成：

let cpuEntry = {
x: data[i].created,
y: data[i].system_cpu
};

当我试图打开图表时，我会收到以下错误消息：

Uncaught TypeError: v.getTime is not a function

经过一番研究，我发现这个图表需要一个日期obejct。我把它包成这样：

x: new Date(data[i].created),

这给了我这样的结果：

Fri Apr 24 2020 15:07:44 GMT+0200

这个错误：

Uncaught Error: Objects are not valid as a React child (found: Fri Apr 24 2020 15:25:00 GMT+0200). If you meant to render a collection of children, use an array instead.

这是我在ResponsiveLine:中配置的一部分

xScale={{
format: 'native',
type: 'time'
}}

我读过一些关于尝试使用"toString(("的文章，但这只是一圈相同的错误。我希望有人能帮助我。如果需要，我会提供更多信息。

Answer 1

您应该将xScale格式指定为

xScale={{ format: "%Y-%m-%dT%H:%M:%S.%L%Z", type: "time" }}

和xFormat(作为一个例子(

xFormat="time:%Y-%m-%dT%H:%M:%S.%L%Z"

或者(如果你只想时间(

xFormat="time:%H:%M:%S.%L"

也可以根据您的时间间隔设置axisBottom设置如下：

axisBottom={{
tickValues: "every 1 second",
tickSize: 5,
tickPadding: 5,
tickRotation: 0,
format: "%S.%L",
legend: "Time",
legendOffset: 36,
legendPosition: "middle"
}}

以下是一个完整的工作示例：https://codesandbox.io/s/react-hooks-counter-demo-dbr34?file=/src/index.js

关于时间格式，请参阅https://github.com/d3/d3-time-format