Як отримати дати високих діаграм на осі 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.