Question

我已将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'

    oscilloscope.oscilloscope.map((item, index) => {
        return {
            x: new Date(item.date.substring(19, 0)).getTime(),
            y: item.data.fuelInjection
        }
    })

总是得到相同的结果。

我希望x轴的格式为HH:MM:SS。

因此，x轴显示如下数据： 11:42:05, 11:42:06, 11:42:07

我正在显示相隔25秒的范围。这似乎是由图表自动设置的，就好像我将范围更改为包括几分钟的时间一样，x轴上的时间显示更改为MM:SS格式。您仍然需要HH:MM:SS格式。可以做到吗？

Answer 1

要在一周后回答我自己的问题，我在Stack Overflow的另一个关于react-vis的问题中找到了答案： show date in( MM-DD) format in x-axis using react-vis

在我的情况下，解决方案是：

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

做到了。希望这可以节省别人的时间。

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

1 个答案: