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?

javascript highcharts

— Jeff
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
source

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

Trouvé en lisant la source, vérifiez la méthode dateFormat ici: Utilities.js

— eolsson

Pour ajouter à cela, le modèle par défaut pour le niveau de zoom actuel comprend également la touche «milliseconde».

— Cory

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

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
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

@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

Vous écrivez comme ceci:

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

vérifiez également les autres formats de date / heure

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

— Ronniemittal
source