Wie bekomme ich Highcharts-Daten in der x-Achse?

119

Gibt es eine Standardmethode zum Abrufen von Daten auf der x-Achse für Highcharts? Kann es nicht in ihrer Dokumentation finden: http://www.highcharts.com/ref/#xAxis--type

Wenn mein Zeitbereich groß genug ist, werden Daten angezeigt. Wenn der Zeitbereich jedoch nicht groß genug ist, werden nur Stunden wie folgt angezeigt:

Geben Sie hier die Bildbeschreibung ein

Dies ist weniger als ideal ... wenn es in diesem Fall ein Datum und eine Uhrzeit anzeigen könnte, wäre das großartig. Weiß jemand wie?

javascript highcharts

— Jeff
quelle

Antworten:

259

Highcharts versuchen automatisch, das beste Format für den aktuellen Zoombereich zu finden. Dies erfolgt, wenn die xAxis den Typ hat 'datetime'. Als nächstes wird die Einheit des aktuellen Zooms berechnet. Dies kann eine der folgenden sein:

zweite
Minute
Stunde
Tag
Woche
Monat
Jahr

Diese Einheit wird dann verwendet, um ein Format für die Achsenbeschriftungen zu finden. Die Standardmuster sind:

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

Wenn Sie möchten, dass der Tag Teil der Beschriftungen auf "Stunden" -Ebene ist, sollten Sie die dateTimeLabelFormatsOption für diese Ebene ändern , einschließlich %doder %e. Dies sind die verfügbaren Muster:

% a: Kurzer Wochentag wie 'Mo'.
% A: Langer Wochentag wie 'Montag'.
% d: Zweistelliger Tag des Monats, 01 bis 31.
% e: Tag des Monats, 1 bis 31.
% b: Kurzer Monat, wie 'Jan'.
% B: Langer Monat, wie 'Januar'.
% m: Zweistellige Monatsnummer, 01 bis 12.
% y: Zweistelliges Jahr, wie 09 für 2009.
% Y: Vierstelliges Jahr, wie 2009.
% H: Zweistellige Stunden im 24-Stunden-Format, 00 bis 23.
% I: Zweistellige Stunden im 12-Stunden-Format, 00 bis 11.
% l (Kleinbuchstabe L): Stunden im 12-Stunden-Format, 1 bis 11.
% M: Zwei Ziffern Minuten, 00 bis 59.
% p: AM oder PM in Großbuchstaben.
% P: AM oder PM in Kleinbuchstaben.
% S: Zweistellige Sekunden, 00 bis 59

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

— Eolsson
quelle

Mag eine dumme Frage sein, aber aus Neugier ... wo haben Sie den Rest dieser Datumscodes gefunden? Die Referenz zeigt nur die Standardmuster, die Sie eingeschlossen haben.

— buddyp450

Überprüfen Sie die dateFormat-Methode hier, indem Sie die Quelle lesen: Utilities.js

— eolsson

Um dies hinzuzufügen, enthält das Standardmuster für die aktuelle Zoomstufe auch die Millisekunden-Taste.

— Cory

Vielen Dank dafür - die Dokumentation bezieht sich auf "dateFormat", aber es ist unklar, ob erwartet wird, dass Sie auf die Methode in der Quelle oder irgendwo anders in den Dokumenten verweisen. Hat mir ein paar Zeit gespart :)

— Jon

Ich habe es wie in Ihrem Beispiel eingerichtet, aber es zeigt immer noch Millisekunden an, wenn ich ihm Daten öfter als einmal pro Sekunde gebe. Hast du eine Idee warum?

— Niels Brinch

Überprüfen Sie dieses Beispiel in der Highcharts-API.

Ersetzen Sie dies

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

Mit diesem

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

Schauen Sie sich hier die dateFormat()Funktion an.

Siehe auch - tickInterval und pointInterval

— Bhesh Gurung
quelle

Es ist eine alte Frage, aber diese Antwort war sehr hilfreich. Besonders der Beispiellink, den Sie angehängt haben.

— CyberMJ

Der Beispiellink funktioniert nicht mehr. Wenn wir Ausführen auswählen, passiert nichts.

— Simsons

@ Simsons Der Highcharts-Link, den ich verwendet habe, war tot, also habe ich den Link aktualisiert. Jetzt scheint die Geige zu funktionieren.

— Bhesh Gurung

Hier ist eine Liste der Datumscodes, die dateFormatakzeptiert werden: github.com/highcharts/highcharts/issues/…

— Trevor Gehman

Du schreibst so:

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

Suchen Sie auch nach einem anderen Datums- / Uhrzeitformat

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

— Ronniemittal
quelle