Отображение часов и дат на графике с помощью Highcharts

Может ли кто-нибудь указать мне пример для создания графика с использованием highcharts, где xAxis состоит из часов дня с 00:00 до 23:59, а yAxis содержит список дат, которые я не могу найти пример того, как добиться от документация.

в основном данные, которые управляют диаграммой, будут примерно такими

15/05/2017: 09:00, 13:00, 14:30, 17:00, 19:15

16/05/2017: 09:30, 11:20, 12:45, 15:10, 18:00

17/05/2017: 08:30, 10:15, 13:00, 14:05, 20:30

Любые примеры или направления были бы замечательными.

Спасибо


highcharts highcharts-ng
person Tron Diggy    schedule 29.09.2016    source источник
comment
Возможно, этот пример поможет вам: jsfiddle.net/0quce36h Я использовал тепловую карту с типом даты и времени xAxis.   -  person Grzegorz Blachliński    schedule 29.09.2016
comment
Извините, пример не запускается, поэтому я не могу увидеть вывод?   -  person Tron Diggy    schedule 29.09.2016
comment
Какие у вас проблемы с моей ссылкой? Вы загружаете его как http или https?   -  person Grzegorz Blachliński    schedule 29.09.2016
comment
Страница загружается нормально, я вижу html и java-скрипт, просто диаграммы справа нет. Пробовали запустить пример, а диаграмма тоже не появилась?   -  person Tron Diggy    schedule 29.09.2016
comment
Есть ли у вас какие-либо ошибки в вашей консоли?   -  person Grzegorz Blachliński    schedule 30.09.2016
comment
Спасибо, не знаю, почему, но, похоже, теперь это работает. Тепловая карта кажется хорошим типом диаграммы для использования, однако у них всегда будет только 2 состояния (включено/выключено), поэтому точечная диаграмма может быть лучше. Как этого добиться, установив xAxis для отображения часов вместо дней в соответствии с приведенным выше набором данных?   -  person Tron Diggy    schedule 30.09.2016
comment
Да, это возможно, здесь вы можете увидеть пример того, как это может работать: jsfiddle.net/0quce36h/3 Если это будет соответствовать вашим требованиям, я опубликую это как ответ   -  person Grzegorz Blachliński    schedule 30.09.2016
comment
Пример по-прежнему представляет собой тепловую карту, если ее можно получить в виде точечной диаграммы, то это определенно удовлетворит мои требования.   -  person Tron Diggy    schedule 03.10.2016
comment
Как бы вы хотели отображать свою серию разброса? Вы хотите иметь что-то похожее на этот график? jsfiddle.net/0quce36h/4   -  person Grzegorz Blachliński    schedule 03.10.2016
comment
Это именно то, что я искал, спасибо :) единственным дополнением будет отображение точек в виде ЧЧ: мм: сс, но я предполагаю, что для этого мне нужно будет изменить формат отображения даты в данных xAxis?   -  person Tron Diggy    schedule 03.10.2016
comment
Да, в этом случае вы можете использовать dateTimeLabelFormats: jsfiddle.net/0quce36h/5   -  person Grzegorz Blachliński    schedule 03.10.2016
comment
Я играл с вашим примером и не мог понять, как отображать время на графике как 09:55:26, 10:28:32, 11:30:14, но при этом отображать ось x внизу. как часы (09:00, 10:00, 11:00, 12:00)... Возможно ли это?   -  person Tron Diggy    schedule 04.10.2016
comment
Вы тестировали этот пример? jsfiddle.net/0quce36h/5 В этом примере вы должны видеть даты xAxis в виде ЧЧ:ММ:СС   -  person Grzegorz Blachliński    schedule 04.10.2016
comment
извините, я неправильно ввел время, это именно то, что я ищу, спасибо за вашу помощь и терпение.   -  person Tron Diggy    schedule 04.10.2016
comment
Рад читать, что мой пример сработал для вас :) Я разместил его как ответ   -  person Grzegorz Blachliński    schedule 04.10.2016

Ответы (2)


arrow_upward
0
arrow_downward

Чтобы получить диаграмму, соответствующую вашим требованиям, вы можете использовать дату и время xAxis с сериями разброса. http://api.highcharts.com/highcharts/xAxis.type

Вы можете изменить формат метки даты и времени на ЧЧ:ММ:СС, используя параметр dateTimeLabelFormats: http://api.highcharts.com/highcharts/xAxis.dateTimeLabelFormats

xAxis: {
  type: 'datetime',
  dateTimeLabelFormats: {
    millisecond: '%H:%M:%S',
    second: '%H:%M:%S',
    minute: '%H:%M:%S',
    hour: '%H:%M:%S',
    day: '%H:%M:%S',
    week: '%H:%M:%S',
    month: '%H:%M:%S',
    year: '%H:%M:%S'
  }
},

Здесь вы можете увидеть пример того, как это может работать: http://jsfiddle.net/0quce36h/5/

person Grzegorz Blachliński    schedule 04.10.2016
comment
В примере для чего используются данные val (ключи: ['x', 'y', 'val']), я нигде не вижу ссылки на них на диаграмме? но спасибо, это именно то, что я искал. - person Tron Diggy; 04.10.2016
comment
Значение сделано на всякий случай, потому что это ссылка на старую диаграмму тепловой карты, которую я вам предлагал. вы можете использовать этот val в своем tooltip.formatter, но вы также можете удалить его и оставить только значения x и y - person Grzegorz Blachliński; 04.10.2016

arrow_upward

arrow_downward

person    schedule
comment
извините, я не думаю, что это правильно, данные по осям x и y неверны. диаграмма также должна быть установлена ​​по умолчанию с 00:00 до 23:59. - person Tron Diggy; 30.09.2016