¿Cómo obtener fechas de highcharts en el eje x?

119

¿Existe una forma estándar de obtener fechas en el eje x para Highcharts? No puedo encontrarlo en su documentación: http://www.highcharts.com/ref/#xAxis--type

Cuando mi rango de tiempo es lo suficientemente grande, muestra fechas. Sin embargo, cuando el rango de tiempo no es lo suficientemente grande, solo muestra las horas, así:

ingrese la descripción de la imagen aquí

Esto es menos que ideal ... si pudiera mostrar una fecha y hora en este caso, sería genial. Alguien sabe como?

javascript highcharts

— Jeff
fuente

Respuestas:

260

Highcharts intentará encontrar automáticamente el mejor formato para el rango de zoom actual. Esto se hace si el xAxis tiene el tipo 'datetime'. A continuación, se calcula la unidad del zoom actual, que podría ser una de las siguientes:

segundo
minuto
hora
día
semana
mes
año

Esta unidad se utiliza luego para encontrar un formato para las etiquetas de los ejes. Los patrones predeterminados son:

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

Si desea que el día sea parte de las etiquetas de nivel de "hora", debe cambiar la dateTimeLabelFormatsopción para ese nivel incluir %do %e. Estos son los patrones disponibles:

% a: día de la semana corto, como "lunes".
% A: día de la semana largo, como "lunes".
% d: día del mes de dos dígitos, del 01 al 31.
% e: día del mes, del 1 al 31.
% b: mes corto, como 'enero'.
% B: mes largo, como 'enero'.
% m: número de mes de dos dígitos, del 01 al 12.
% y: año de dos dígitos, como 09 para 2009.
% Y: año de cuatro dígitos, como 2009.
% H: horas de dos dígitos en formato de 24 horas, de 00 a 23.
% I: horas de dos dígitos en formato de 12 horas, de 00 a 11.
% l (L minúscula): Horas en formato de 12 h, 1 a 11.
% M: minutos de dos dígitos, del 00 al 59.
% p: mayúsculas AM o PM.
% P: minúsculas AM o PM.
% S: segundos de dos dígitos, de 00 a 59

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

— Eolsson
fuente

Puede ser una pregunta estúpida pero por curiosidad ... ¿dónde encontraste el resto de estos códigos de fecha? La referencia solo muestra los patrones predeterminados que incluyó.

— buddyp450

Encontrado leyendo la fuente, verifique el método dateFormat aquí: Utilities.js

— eolsson

Solo para agregar a esto, el patrón predeterminado para el nivel de zoom actual también incluye la tecla 'milisegundos'.

— Cory

Muchas gracias por esto: la documentación se refiere a "dateFormat", pero no está claro si esperan que se refiera al método en la fuente o en otro lugar de los documentos. Me salvó un montón de tiempo :)

— Jon

Lo configuré como en su ejemplo, pero todavía muestra milisegundos cuando le doy datos más de una vez por segundo. ¿Tienes idea de por qué?

— Niels Brinch

Consulte esta muestra de la API de Highcharts.

Reemplazar esto

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

Con este

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

Mira aquí sobre la dateFormat()función.

Vea también - tickInterval y pointInterval

— Bhesh Gurung
fuente

Es una pregunta antigua, pero esta respuesta fue muy útil. Especialmente el enlace de ejemplo que adjuntó.

— CyberMJ

El enlace de muestra ya no funciona. No pasa nada cuando seleccionamos Ejecutar.

— Simsons

@Simsons El enlace de Highcharts que utilicé estaba muerto, así que actualicé el enlace. Ahora, el violín parece estar funcionando.

— Bhesh Gurung

Aquí hay una lista de los códigos de fecha que dateFormatacepta: github.com/highcharts/highcharts/issues/…

— Trevor Gehman

Escribes así:

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

también verifique otro formato de fecha y hora

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

— Ronniemittal
fuente