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

119

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

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

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

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

javascript highcharts

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

Ответы:

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
источник

Может быть, глупый вопрос, но из любопытства ... где вы нашли остальные коды дат? В справочнике показаны только включенные вами шаблоны по умолчанию.

— buddyp450 08

Найдено, прочитав источник, проверьте метод dateFormat здесь: Utilities.js

— eolsson

Чтобы добавить к этому, шаблон по умолчанию для текущего уровня масштабирования также включает кнопку «миллисекунда».

— Кори

Огромное спасибо за это - документация ссылается на "dateFormat", но неясно, ожидают ли они от вас ссылки на метод в источнике или где-то еще в документации. Сэкономил мне кучу времени :)

— Джон

Я настроил его, как в вашем примере, но он все равно показывает миллисекунды, когда я даю ему данные чаще, чем один раз в секунду. Вы знаете почему?

— Нильс Бринч

Взгляните на этот образец из 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

@Simsons Ссылка Highcharts, которую я использовал, была мертва, поэтому я обновил ссылку. Кажется, скрипка работает.

— Bhesh Gurung

Вот список dateFormatпринимаемых кодов дат : github.com/highcharts/highcharts/issues/…

— Trevor

Вы пишете так:

xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: {
           day: '%d %b %Y'    //ex- 01 Jan 2016
        }
}

также проверьте другой формат даты и времени

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

— Ronniemittal
источник