Jak uzyskać daty z najlepszych wykresów na osi X?

119

Czy istnieje standardowy sposób pobierania dat na osi X dla wykresów Highcharts? Nie można go znaleźć w ich dokumentacji: http://www.highcharts.com/ref/#xAxis--type

Kiedy mój zakres czasu jest wystarczająco duży, pokazuje daty. Jeśli jednak zakres czasu nie jest wystarczająco duży, pokazuje tylko godziny, na przykład:

wprowadź opis obrazu tutaj

To mniej niż idealne ... gdyby w tym przypadku pokazywała datę i godzinę, byłoby świetnie. Czy ktoś wie jak?

javascript highcharts

— Jeff
źródło

Odpowiedzi:

260

Highcharts automatycznie spróbuje znaleźć najlepszy format dla bieżącego zakresu zoomu. Dzieje się tak, jeśli xAxis ma typ 'datetime'. Następnie obliczana jest jednostka aktualnego powiększenia, może to być:

druga
minuta
godzina
dzień
tydzień
miesiąc
rok

Ta jednostka jest następnie używana do znalezienia formatu etykiet osi. Domyślne wzory to:

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

Jeśli chcesz, aby dzień był częścią etykiet poziomu „godzinowego”, zmień dateTimeLabelFormatsopcję dla tego poziomu na %dlub %e. Oto dostępne wzory:

% a: Krótki dzień roboczy, np. „Pon”.
% A: długi dzień roboczy, np. „Poniedziałek”.
% d: dwucyfrowy dzień miesiąca, od 01 do 31.
% e: dzień miesiąca, od 1 do 31.
% b: Krótki miesiąc, np. „Jan”.
% B: długi miesiąc, np. „Styczeń”.
% m: dwucyfrowy numer miesiąca, od 01 do 12.
% y: rok dwucyfrowy, np. 09 w 2009.
% Y: czterocyfrowy rok, np. 2009.
% H: dwie cyfry godziny w formacie 24-godzinnym, od 00 do 23.
% I: dwie cyfry godzin w formacie 12-godzinnym, od 00 do 11.
% l (mała litera L): godziny w formacie 12-godzinnym, od 1 do 11.
% M: minuty dwucyfrowe, od 00 do 59.
% p: wielkie litery AM lub PM.
% P: małe litery AM lub PM.
% S: dwie cyfry sekund, od 00 do 59

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

— eolsson
źródło

Może to głupie pytanie, ale z ciekawości ... gdzie znalazłeś pozostałe kody dat? Odniesienie pokazuje tylko domyślne wzory, które dołączyłeś.

— buddyp450

Znalezione po przeczytaniu źródła, sprawdź metodę dateFormat tutaj: Utilities.js

— eolsson

Aby dodać do tego, domyślny wzorzec dla bieżącego poziomu powiększenia zawiera również klawisz „milisekunda”.

— Cory

Wielkie dzięki za to - dokumentacja odnosi się do "dateFormat", ale nie jest jasne, czy oczekują, że będziesz odnosić się do metody w kodzie źródłowym, czy w innym miejscu w dokumentacji. Zaoszczędziło mi to sporo czasu :)

— Jon

Ustawiłem to tak jak w twoim przykładzie, ale nadal pokazuje milisekundy, gdy podaję mu dane częściej niż raz na sekundę. Czy masz pojęcie, dlaczego?

— Niels Brinch

Sprawdź tę próbkę z interfejsu API Highcharts.

Wymień to

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

Z tym

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

Spójrz tutaj na dateFormat()funkcję.

Zobacz także - tickInterval i pointInterval

— Bhesh Gurung
źródło

To stare pytanie, ale ta odpowiedź była bardzo pomocna. Zwłaszcza przykładowy link, który załączyłeś.

— CyberMJ

Przykładowy link już nie działa. Nic się nie dzieje, gdy wybieramy Uruchom.

— Simsons,

@Simsons Link do Highcharts, którego użyłem na nim, był martwy, więc zaktualizowałem link. Teraz wydaje się, że skrzypce działają.

— Bhesh Gurung

Oto lista dateFormatakceptowanych kodów dat : github.com/highcharts/highcharts/issues/…

— Trevor Gehman

Piszesz w ten sposób-:

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

sprawdź także inny format daty i godziny

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

— Ronniemittal
źródło