如何以小时，天，......从0到无穷大来渲染Xaxes

Question

我想以不同的时间间隔渲染倍数系列，所有系列都以一年中第一天的例子开始，我希望看到Xaxis例​​如：

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

当我在36h到60h之间进行缩放时，我想看看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类型的datetime

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'
    }
},

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

谢谢

Answer 1

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

码：

  const reduce = data[0].x;

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

演示：

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

Answer 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'
}

},

谢谢 ！