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

标签 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'
    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格式化你。这完全可以做到吗?

最佳答案

为了在一周后回答我自己的问题,我在 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 - React vis - 在 x 轴上格式化时间刻度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56931174/

相关文章:

css - 调整窗口大小时如何在 React 中缩小表格中不断增长的图表

javascript - 无法从 React vis 图中删除条形之间的间隙

reactjs - 为什么使用 React-vis 图表运行 "Unexpected identifier"Jest 测试时会出现 "mount component"错误?

d3.js - 我如何在 React-Vis 中指定轴范围

reactjs - 在react-vis时间刻度轴中设置24小时时间格式

reactjs - 使用 React-vis 库,条形系列无法在标签下正确渲染

javascript - SVG "z-index"解决方法

javascript - 如何在 react-vis 中反转/下降/排序 x 轴数据