2012-03-03 14 views
30

Estoy utilizando diagramas altos y no puedo averiguar cuál debe ser la entrada de fecha de las fechas de los rieles al formato aceptado de los diagramas altos para las fechas.¿Qué formato acepta la biblioteca highcharts js para las fechas?

En mi archivo de migración estoy almacenando la fecha de la siguiente manera:

t.date :consumption_date 

El valor se almacena en este formato "2012-03-25", e ir a la terminal y encontrar el registro me sale este :

=> Sat, 31 Mar 2012 

Cuando el gráfico hace que, en la pantalla puntos individuo fecha no válida. La siguiente matriz se pone la salida a Highcharts para hacer

[[Sun, 25 Mar 2012, 1158], [Sat, 31 Mar 2012, 1200]] 

el formato que Highcharts usos en una de sus cartas de demostración, cuando los datos se presentan en jQuery es de la forma:

[[Date.UTC(1970, 9, 27), 0 ], [Date.UTC(1970, 10, 10), 0.6 ]] 

¿Cómo puedo Deshágase de la fecha inválida, enviando el formato de fecha correcto a las notas altas.

Respuesta

33

Internamente Highcharts usa javascript Los números de fecha (el número de milisegundos desde el 1 de enero de 1970) para representar las fechas. Ver Mozilla reference.

Para ver las fechas sobre un eje que primero tendrá que establecer el tipo de eje a 'fecha y hora':

xAxis: { 
    type: 'datetime' 
} 

Usted tiene algunas opciones al especificar los datos de la serie (los tres ejemplos producir el mismo gráfico) :

  1. el establecimiento de un punto de inicio y el uso de un intervalo fijo entre los puntos

    pointStart: Date.UTC(2012, 2, 6, 10), 
    pointInterval: 1000 * 60 * 60, 
    data: [5, 6, 4] 
    
  2. Especificando la fecha exacta usando el método Date.UTC. De esta manera su legible para los seres humanos:

    data: [ 
        [Date.UTC(2012, 2, 6, 10), 5], 
        [Date.UTC(2012, 2, 6, 11), 6], 
        [Date.UTC(2012, 2, 6, 12), 4]] 
    
  3. O especificando el tiempo de época directamente:

    [[1331028000000, 5], [1331031600000, 6], [1331035200000, 4]] 
    

Ejemplo en jsfiddle

+0

la única entrada que funcionó para mí fue ingresar directamente el tiempo epock directamente. Gracias – Hishalv

4

Agregando a @eolsson, tiempo de época es generalmente la manera para ir desde el punto de vista técnico, los objetos Date() son javascript, no JSON, y es poco probable que encuentre un serializador estándar que los genere.

Usted querrá dar formato a la fecha, también, algo como esto -

xAxis: { 
    type: 'datetime', 
    labels: { 
    formatter: function() { 
     return Highcharts.dateFormat('%e %b', this.value*1000); // milliseconds not seconds 
    }, 
    } 
} 

El formato de fecha se realiza php style.

Cuestiones relacionadas