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