如何以小时、天……从 0 到无穷大的时间渲染 Xaxes答案

【问题标题】：How to render Xaxes with time in hours, days, ... from 0 to infinity如何以小时、天……从 0 到无穷大的时间渲染 Xaxes
【发布时间】：2019-07-29 00:04:12
【问题描述】：

我想渲染具有不同时间间隔的多个系列，所有系列都以一年的第一天为例开始，我想以 Xaxis 为例：

-------------------------------------------------
0 12h 1day 36h 2days 60h

当我在 36 小时到 60 小时之间缩放时，我希望看到 Xaxis

-------------------------------------------------
36h 42h 48h 54h 60h

如果我在最后一个区间放大更多，我想查看 Xaxis

-------------------------------------------------
48h 46:05 46:06 46:07 46:08 46:09

还有更多

-------------------------------------------------
46:07:00 46:08:00 46:09:00

我有这个链接用于测试 xAxis 类型日期时间

Example in jsfiddle

xAxis: {
    //visible: false,
title: {
    enabled: false,
    text: 'Hours of the Day'
},
type: 'datetime',

    dateTimeLabelFormats: {
      millisecond: '%H:%M:%S.%L',
      second: '%H:%M:%S',
      minute: '%H:%M',
      hour: '%H:%M:%S',//'%H:%M',
      day: '24:00', // %e. %b',
      week: '%e. %b',
      month: '%b \'%y',
      year: '%Y'
    }
},

任何人都可以帮助我如何实现这一目标。

谢谢

【问题讨论】：

您应该使用 Highstock。它可以更好地管理日期时间图表。

标签： highcharts axis axis-labels

【解决方案1】：

您可以通过映射数据数组并将每个元素时间戳减去第一个元素时间戳来实现。然后您的数据将从 0 开始，并且与第一个元素相关。

代码：

  const reduce = data[0].x;

  series: [{
    data: data.map(elem => {
      elem.x = elem.x - reduce;
      return elem;
    })
  }]

演示：

https://jsfiddle.net/BlackLabel/2ubce48g/

【讨论】：

谢谢你的例子！！

【解决方案2】：

非常感谢！！

但是时间轴只有24h，可以是25h, 26h, .... 56h, .....70h

An exemple of more than 24h time Axis

xAxis: {
//visible: false,
title: {
  enabled: false,
  text: 'Hours of the Day'
},
type: 'datetime',

dateTimeLabelFormats: {
  millisecond: '%H:%M:%S.%L',
  second: '%H:%M:%S',
  minute: '%H:%M',
  hour: '%H:%M',
  day: '%H:%M',
  week: '%e. %b',
  month: '%b \'%y',
  year: '%Y'
}

谢谢！

【讨论】：