¿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