React vis - 在 x 轴上格式化时间刻度

xyz*_*242 3 react-vis

我已将 加到xType="time"图表中以在 x 轴上显示时间刻度。我只显示 25 秒范围内的数据。目前,x 轴将时间格式显示为:SS

因此 x 轴以以下格式显示时间(数据显示每秒):

:23, :24, :25

我从数据库中得到的是以下格式的时间字符串: 2019-07-01T10:42:38.621Z

我尝试了以下方法:

new Date(item.date) // shows ':023'
new Date(item.date).getTime() // shows ':023'
new Date(item.date.substring(19, 0)).getTime() // shows ':023'
Run Code Online (Sandbox Code Playgroud)
    oscilloscope.oscilloscope.map((item, index) => {
        return {
            x: new Date(item.date.substring(19, 0)).getTime(),
            y: item.data.fuelInjection
        }
    })
Run Code Online (Sandbox Code Playgroud)

总是得到相同的结果。

我希望 x 轴按格式进行HH:MM:SS格式化。

所以 x 轴显示的数据如下: 11:42:05, 11:42:06, 11:42:07

我显示的范围相隔 25 秒。这似乎是由图表自动设置的,就好像我将范围更改为包含几分钟的范围,x 轴上的时间显示更改为MM:SS格式。我仍然需要HH:MM:SS你的格式。这完全可以做到吗?

xyz*_*242 6

为了在一周后回答我自己的问题,我在 Stack Overflow 上找到了有关 react-vis 的不同问题的答案: 使用 react-vis 在 x 轴中显示日期格式(MM-DD)

在我的情况下,解决方案是:

<XAxis 
  tickFormat={function tickFormat(d){
    const date = new Date(d)
    return date.toISOString().substr(11, 8)
   }}
/>
Run Code Online (Sandbox Code Playgroud)

那做的工作。希望它能节省别人的时间。