Как получить даты highcharts по оси x?

119

Есть ли стандартный способ получить даты по оси X для Highcharts? Не могу найти в их документации: http://www.highcharts.com/ref/#xAxis--type

Когда мой временной диапазон достаточно велик, он показывает даты. Однако, когда временной диапазон недостаточно велик, он просто показывает часы, например:

введите описание изображения здесь

Это далеко не идеально ... если бы в этом случае можно было отображать дату и время, было бы здорово. Кто-нибудь знает как?

Джефф
источник

Ответы:

260

Highcharts автоматически попытается найти лучший формат для текущего диапазона масштабирования. Это делается, если xAxis имеет тип 'datetime'. Затем вычисляется единица текущего масштабирования, это может быть одно из:

  • второй
  • минут
  • час
  • день
  • неделя
  • месяц
  • год

Затем эта единица измерения используется для поиска формата меток осей. Шаблоны по умолчанию:

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

Если вы хотите, чтобы день был частью меток «часового» уровня, вам следует изменить dateTimeLabelFormatsпараметр для этого уровня, включая %dили %e. Это доступные шаблоны:

  • % a: короткий будний день, например, понедельник.
  • % A: Длинный будний день, например, понедельник.
  • % d: двузначный день месяца от 01 до 31.
  • % e: День месяца с 1 по 31.
  • % b: короткий месяц, например «Январь».
  • % B: длинный месяц, например, январь.
  • % m: двузначный номер месяца от 01 до 12.
  • % y: год из двух цифр, например 09 для 2009 года.
  • % Y: год из четырех цифр, например, 2009.
  • % H: часы с двумя цифрами в 24-часовом формате, от 00 до 23.
  • % I: часы с двумя цифрами в 12-часовом формате, от 00 до 11.
  • % l (нижний регистр L): часы в 12-часовом формате от 1 до 11.
  • % M: две цифры минут, от 00 до 59.
  • % p: заглавные буквы AM или PM.
  • % P: строчные буквы AM или PM.
  • % S: две цифры секунды, от 00 до 59

http://api.highcharts.com/highcharts#xAxis.dateTimeLabelFormats

eolsson
источник
16
Может быть, глупый вопрос, но из любопытства ... где вы нашли остальные коды дат? В справочнике показаны только включенные вами шаблоны по умолчанию.
buddyp450 08
20
Найдено, прочитав источник, проверьте метод dateFormat здесь: Utilities.js
eolsson
2
Чтобы добавить к этому, шаблон по умолчанию для текущего уровня масштабирования также включает кнопку «миллисекунда».
Кори
1
Огромное спасибо за это - документация ссылается на "dateFormat", но неясно, ожидают ли они от вас ссылки на метод в источнике или где-то еще в документации. Сэкономил мне кучу времени :)
Джон
Я настроил его, как в вашем примере, но он все равно показывает миллисекунды, когда я даю ему данные чаще, чем один раз в секунду. Вы знаете почему?
Нильс Бринч
32

Взгляните на этот образец из API Highcharts.

Замените это

return Highcharts.dateFormat('%a %d %b', this.value);

С этим

return Highcharts.dateFormat('%a %d %b %H:%M:%S', this.value);

Посмотрите здесь о dateFormat()функции.

Также смотрите - tickInterval и pointInterval

Бхеш Гурунг
источник
Это старый вопрос, но этот ответ оказался очень полезным. Особенно пример ссылки, который вы прикрепили.
CyberMJ
Ссылка на образец больше не работает. Когда мы выбираем «Выполнить», ничего не происходит.
Simsons
1
@Simsons Ссылка Highcharts, которую я использовал, была мертва, поэтому я обновил ссылку. Кажется, скрипка работает.
Bhesh Gurung
Вот список dateFormatпринимаемых кодов дат : github.com/highcharts/highcharts/issues/…
Trevor