web-dev-qa-db-fra.com

Quel format la bibliothèque js highcharts accepte-t-elle pour les dates?

J'utilise des highcharts et je n'arrive pas à comprendre quelle entrée de date doit être de Rails dates au format highcharts accepté pour les dates).

Dans mon fichier de migration, je stocke la date comme ceci:

t.date :consumption_date

La valeur est stockée dans ce format "2012-03-25", et en allant au terminal et en trouvant l'enregistrement, j'obtiens ceci:

=>  Sat, 31 Mar 2012

Lorsque le graphique s'affiche, les points individuels s'affichent Date invalide. Le tableau suivant obtient une sortie dans les graphiques pour le rendu

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

Le format utilisé par highcharts dans l'un de leurs graphiques de démonstration, lorsque les données sont soumises en jquery, est de la forme:

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

Comment puis-je me débarrasser de la date non valide, en soumettant le format de date correct aux graphiques.

javascripthighcharts
33
Hishalv

En interne, Highcharts utilise des numéros de date javascript (le nombre de millisecondes depuis le 1er janvier 1970) pour représenter les dates. Voir référence Mozilla .

Pour obtenir des dates sur un axe, vous devez d'abord définir le type d'axe sur 'datetime':

xAxis: {
    type: 'datetime'
}

Vous avez quelques options lors de la spécification des données de série (les trois exemples produisent le même graphique):

  1. Définition d'un point de départ et utilisation d'un intervalle fixe entre les points

    pointStart: Date.UTC(2012, 2, 6, 10),
pointInterval: 1000 * 60 * 60,
data: [5, 6, 4]

  2. Spécification de la date exacte à l'aide de la méthode Date.UTC. De cette façon, il est lisible pour les humains:

    data: [
    [Date.UTC(2012, 2, 6, 10), 5], 
    [Date.UTC(2012, 2, 6, 11), 6], 
    [Date.UTC(2012, 2, 6, 12), 4]]

  3. Ou en spécifiant directement l'heure de l'époque:

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

Exemple sur jsfiddle

39
eolsson

Ajout à @eolsson, Epoch time est généralement la voie à suivre car techniquement, les objets Date () sont javascript, pas JSON, et il est peu probable que vous trouviez un sérialiseur standard qui les génère.

Vous voudrez aussi formater la date, quelque chose comme ça -

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

Le formatage de la date est fait style php .

4
s29