Как визуализировать Xaxes со временем в часах, днях, ... от 0 до бесконечности - PullRequest
0 голосов
/ 07 марта 2019

Я хочу визуализировать серию кратных с разными временными интервалами, все серии начинаются для примера в первый день года, и я хочу увидеть 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

Пример в 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'
    }
},

Может кто-нибудь помочь мне, как мне этого добиться.

Спасибо

Ответы [ 2 ]

0 голосов
/ 12 марта 2019

Большое спасибо !!

Но ось времени - только 24 часа, может быть 25 часов, 26 часов, .... 56 часов, ..... 70 часов

Пример более 24 часов по оси

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

},

Спасибо!

0 голосов
/ 07 марта 2019

Этого можно добиться, сопоставив массив данных и уменьшив временную метку каждого элемента на временную метку первого элемента.Тогда ваши данные начнутся с 0 и будут относительно первого элемента.

Код:

  const reduce = data[0].x;

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

Демо:

...