web-dev-qa-db-fra.com

Comment obtenir les dates de graphiques en grand sur l'axe des x?

Existe-t-il un moyen standard d’obtenir des dates sur l’axe des abscisses pour les tableaux à haute altitude? Impossible de le trouver dans leur documentation: http://www.highcharts.com/ref/#xAxis--type

Lorsque mon intervalle de temps est suffisamment grand, il affiche les dates. Cependant, lorsque la plage de temps n’est pas assez grande, elle affiche simplement les heures, comme ceci:

enter image description here

C'est moins qu'idéal ... s'il pouvait afficher une date et une heure dans ce cas, ce serait génial. Quelqu'un sait comment?

javascripthighcharts
114
Jeff

Highcharts essaie automatiquement de trouver le meilleur format pour la plage de zoom actuelle. Ceci est fait si xAxis a le type 'datetime'. Ensuite, l'unité du zoom actuel est calculée, il peut s'agir de:

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

Cette unité est ensuite utilisée pour trouver un format pour les étiquettes d'axe. 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 libellés "heure", vous devez modifier l'option dateTimeLabelFormats de ce niveau, notamment %d ou %e. Ce sont les modèles disponibles:

  • % a: Court jour de semaine, comme 'Mon'.
  • % A: Longs jours de semaine, comme 'lundi'.
  • % d: jour du mois à deux chiffres, du 01 au 31.
  • % e: Jour du mois, 1 à 31.
  • % b: Mois court, comme 'Jan'.
  • % B: mois long, comme 'janvier'.
  • % m: numéro de mois à deux chiffres, 01 à 12.
  • % y: Année à deux chiffres, comme 09 pour 2009.
  • % Y: Année à quatre chiffres, comme en 2009.
  • % H: Heures à deux chiffres au format 24h, 00 à 23.
  • % I: Heures à deux chiffres au format 12h, 00 à 11.
  • % l (minuscule L): Heures au format 12h, 1 à 11.
  • % M: Deux chiffres minutes, 00 à 59.
  • % p: majuscule AM ​​ou PM.
  • % P: minuscule AM ​​ou PM.
  • % S: deux chiffres secondes, 00 à 59

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

248
eolsson

Vérifiez ceci 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 fonction dateFormat().

Voir aussi - tickInterval et pointInterval

30
Bhesh Gurung

Vous écrivez comme ceci:

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

vérifiez également pour un autre format de date/heure

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

17
Ronniemittal