Comment obtenir des dates highcharts sur l'axe des x?

119

Existe-t-il un moyen standard d'obtenir des dates sur l'axe des x pour les Highcharts? Impossible de le trouver dans leur documentation: http://www.highcharts.com/ref/#xAxis--type

Lorsque ma plage horaire est suffisamment large, elle affiche les dates. Cependant, lorsque la plage horaire n'est pas assez large, elle affiche juste les heures, comme ceci:

entrez la description de l'image ici

C'est loin d'être idéal ... si cela pouvait montrer une date et une heure dans ce cas, ce serait génial. Quelqu'un sait comment?

Jeff
la source

Réponses:

260

Highcharts essaiera automatiquement de trouver le meilleur format pour la plage de zoom actuelle. Ceci est fait si le xAxis a le type 'datetime'. Ensuite, l'unité du zoom actuel est calculée, elle peut être l'une des suivantes:

  • seconde
  • minute
  • heure
  • journée
  • la semaine
  • mois
  • an

Cette unité est ensuite utilisée pour trouver un format pour les étiquettes des axes. Les modèles par défaut sont:

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

Si vous souhaitez que le jour fasse partie des étiquettes de niveau "heure", vous devez modifier l' dateTimeLabelFormatsoption pour ce niveau, notamment %dou %e. Voici les modèles disponibles:

  • % a: jour de semaine court, comme «lun».
  • % A: long jour de semaine, comme «lundi».
  • % d: jour du mois à deux chiffres, 01 à 31.
  • % e: Jour du mois, 1 à 31.
  • % b: mois court, comme "Jan".
  • % B: mois long, comme «janvier».
  • % m: numéro du mois à deux chiffres, de 01 à 12.
  • % y: année à deux chiffres, comme 09 pour 2009.
  • % Y: année à quatre chiffres, comme 2009.
  • % H: heures à deux chiffres au format 24h, 00 à 23.
  • % I: heures à deux chiffres au format 12h, de 00 à 11.
  • % l (L minuscule): heures au format 12h, 1 à 11.
  • % M: minutes à deux chiffres, de 00 à 59.
  • % p: majuscules AM ou PM.
  • % P: minuscules AM ou PM.
  • % S: deux chiffres secondes, 00 à 59

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

Eolsson
la source
16
Peut-être une question stupide mais par curiosité ... où avez-vous trouvé le reste de ces codes de date? La référence montre uniquement les modèles par défaut que vous avez inclus.
buddyp450
20
Trouvé en lisant la source, vérifiez la méthode dateFormat ici: Utilities.js
eolsson
2
Pour ajouter à cela, le modèle par défaut pour le niveau de zoom actuel comprend également la touche «milliseconde».
Cory
1
Un grand merci pour cela - la documentation se réfère à "dateFormat", mais il n'est pas clair s'ils s'attendent à ce que vous fassiez référence à la méthode dans la source ou ailleurs dans la documentation. M'a sauvé beaucoup de temps :)
Jon
Je l'ai configuré comme dans votre exemple, mais il affiche toujours des millisecondes lorsque je lui donne des données plus d'une fois par seconde. Avez-vous une idée pourquoi?
Niels Brinch
32

Consultez cet exemple à partir de l'API Highcharts.

Remplacez ceci

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

Avec ça

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

Regardez ici à propos de la dateFormat()fonction.

Voir aussi - tickInterval et pointInterval

Bhesh Gurung
la source
C'est une vieille question, mais cette réponse a été très utile. Surtout le lien d'exemple que vous avez joint.
CyberMJ
Le lien exemple ne fonctionne plus. Rien ne se passe lorsque nous sélectionnons Exécuter.
Simsons
1
@Simsons Le lien Highcharts que j'utilisais était mort, j'ai donc mis à jour le lien. Maintenant, le violon semble fonctionner.
Bhesh Gurung
Voici une liste des codes de date dateFormatacceptés: github.com/highcharts/highcharts/issues/…
Trevor Gehman