Як отримати дати високих діаграм на осі x?


119

Чи є стандартний спосіб отримати дати на осі x для Highcharts? Неможливо знайти його в документації: http://www.highcharts.com/ref/#xAxis--type

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

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

Це менш ніж ідеально ... якби в цьому випадку можна було побачити дату та час, це було б чудово. Хтось знає як?

Відповіді:


259

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


16
Це може бути дурним питанням, але з цікавості ... де ви знайшли решту цих кодів дати? Довідка показує лише типові шаблони, які ви включили.
buddyp450

20
Знайдено, прочитавши джерело, перевірте метод датиФормат тут: Utilities.js
eolsson

2
Для того, щоб додати до цього, шаблон за замовчуванням для поточного рівня збільшення також включає клавішу "мілісекунда".
Кори

1
Величезне спасибі за це - в документації йдеться про "dateFormat", але незрозуміло, чи очікують вони, що ви посилаєтесь на метод у джерелі чи десь ще в документах. Врятувало мені купу часу :)
Jon

Я налаштував це як у вашому прикладі, але він все ще показує мілісекунди, коли я даю йому дані частіше, ніж раз на секунду. У вас є ідеї, чому?
Нільс Брінч

32

Перевірте цей зразок у API Highcharts API.

Замініть це

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

З цим

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

Подивіться тут про dateFormat()функцію.

Також дивіться - галочкаInterval та pointInterval


Це старе запитання, але ця відповідь була дуже корисною. Особливо приклад, який ви додали.
CyberMJ

Зразок посилання вже не працює. Нічого не відбувається, коли ми вибираємо Виконати.
Сімсон

1
@Simsons Посилання Highcharts, яке я використовував, було мертвим, тому я оновив посилання. Тепер, здається, загадка працює.
Bhesh Gurung

Ось перелік кодів дат, який dateFormatприймає: github.com/highcharts/highcharts/isissue/…
Тревор Геман

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.