首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >React vis -格式化x轴上的时间刻度

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

Stack Overflow用户
提问于 2019-07-08 16:38:50
回答 1查看 3.4K关注 0票数 3

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

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

:23, :24, :25

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

我尝试过以下几种方法:

代码语言:javascript
复制
new Date(item.date) // shows ':023'
new Date(item.date).getTime() // shows ':023'
new Date(item.date.substring(19, 0)).getTime() // shows ':023'
代码语言:javascript
复制
    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格式。这完全可以做到吗?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-07-15 18:03:11

为了在一周后回答我自己的问题,我在堆栈溢出上找到了关于react-vis的不同问题的答案:show date in( MM-DD) format in x-axis using react-vis

在我的案例中,解决方案是:

代码语言:javascript
复制
<XAxis 
  tickFormat={function tickFormat(d){
    const date = new Date(d)
    return date.toISOString().substr(11, 8)
   }}
/>

这就完成了任务。希望这能节省别人的时间。

票数 7
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56931174

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档