Come ottenere le date dei grafici alti nell'asse x?

119

Esiste un modo standard per ottenere le date sull'asse x per Highcharts? Non riesco a trovarlo nella loro documentazione: http://www.highcharts.com/ref/#xAxis--type

Quando il mio intervallo di tempo è sufficientemente ampio, mostra le date. Tuttavia, quando l'intervallo di tempo non è abbastanza ampio, mostra solo le ore, in questo modo:

inserisci qui la descrizione dell'immagine

Questo è tutt'altro che ideale ... se potesse mostrare una data e un'ora in questo caso, sarebbe fantastico. Qualcuno sa come?

javascript highcharts

— Jeff
fonte

Risposte:

260

Highcharts proverà automaticamente a trovare il formato migliore per l'attuale intervallo di zoom. Questo viene fatto se xAxis ha il tipo 'datetime'. Successivamente viene calcolata l'unità dello zoom corrente, potrebbe essere una delle seguenti:

secondo
minuto
ora
giorno
settimana
mese
anno

Questa unità viene quindi utilizzata per trovare un formato per le etichette degli assi. I modelli predefiniti sono:

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

Se vuoi che il giorno faccia parte delle etichette a livello di "ora" dovresti cambiare l' dateTimeLabelFormatsopzione per quel livello includi %do %e. Questi sono gli schemi disponibili:

% a: giorno feriale breve, come "Lun".
% A: lungo giorno della settimana, come "lunedì".
% d: giorno del mese a due cifre, da 01 a 31.
% e: giorno del mese, da 1 a 31.
% b: mese breve, come "gennaio".
% B: mese lungo, come "gennaio".
% m: numero del mese a due cifre, da 01 a 12.
% y: anno a due cifre, come 09 per il 2009.
% Y: anno a quattro cifre, come il 2009.
% H: ore di due cifre nel formato 24 ore, da 00 a 23.
% I: due cifre per le ore nel formato 12h, da 00 a 11.
% l (L minuscolo): ore nel formato 12h, da 1 a 11.
% M: minuti a due cifre, da 00 a 59.
% p: maiuscolo AM o PM.
% P: minuscolo AM o PM.
% S: due cifre secondi, da 00 a 59

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

— eolsson
fonte

Potrebbe essere una domanda stupida ma per curiosità ... dove hai trovato il resto di questi codici data? Il riferimento mostra solo i modelli predefiniti che hai incluso.

— buddyp450

Trovato leggendo la fonte, controlla il metodo dateFormat qui: Utilities.js

— eolsson

Solo per aggiungere a questo, il modello predefinito per il livello di zoom corrente include anche il tasto "millisecondi".

— Cory

Grazie mille per questo - la documentazione si riferisce a "dateFormat", ma non è chiaro se si aspettano che tu faccia riferimento al metodo nel codice sorgente o da qualche altra parte nei documenti. Mi ha fatto risparmiare un sacco di tempo :)

— Jon

L'ho impostato come nel tuo esempio, ma mostra ancora i millisecondi quando gli fornisco i dati più spesso di una volta al secondo. Hai idea del perché?

— Niels Brinch

Dai un'occhiata a questo esempio dall'API Highcharts.

Sostituisci questo

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

Con questo

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

Guarda qui sulla dateFormat()funzione.

Vedi anche - tickInterval e pointInterval

— Bhesh Gurung
fonte

È una vecchia domanda, ma questa risposta è stata molto utile. Soprattutto il link di esempio che hai allegato.

— CyberMJ

Il collegamento di esempio non funziona più. Non succede nulla quando selezioniamo Esegui.

— Simsons

@ Simsons Il collegamento Highcharts che ho usato era morto, quindi ho aggiornato il collegamento. Ora, il violino sembra funzionare.

— Bhesh Gurung

Ecco un elenco dei codici data che dateFormataccettano: github.com/highcharts/highcharts/issues/…

— Trevor Gehman,

Scrivi in questo modo:

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

controlla anche altri formati datetime

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

— Ronniemittal
fonte