Ich habe es geschafft, den Zeitmodus zu verwenden und die absolute Zeit, formatiert von Zeitstempeln, auf der x-Achse anzuzeigen.Anzeige vergangener Zeit in der Flot-Zeitreihe
Jetzt möchte ich die vergangene Zeit seit dem ersten Datenpunkt anzeigen.
Beispiel: Der erste Datenpunkt ist 17:40 und der zweite Datenpunkt ist 17:45, dann sollte der erste Punkt auf der x-Achse 00:00:00 und der zweite Tick 00:05:00 anzeigen.
Ist das mit Flot möglich?
Ja, das ist möglich.
Die Idee ist es, 2 x-Achsen zu verwenden: die ursprüngliche und zweite x-Achse mit Zeitrahmenbereich ab Mitternacht und für die gleiche Periode wie Ihre ursprüngliche x-Achse.
zum Beispiel also erste x-Achse 17:40 - 17:55 ist und die zweite: 0:00 - ?, die wir brauchen würden jedes Mal berechnen (jetzt wissen wir es 0:00 - 0:15 sein wird, aber flicht einen Wert in Timestamp).
Dies kann Ihnen eine Idee geben, wie das berechnen:
1467906900000 - 1467906000000 = 900000 // difference between 17:55 - 17:40 (result: 15 minutes in timestamp)
1467842400000 + 900000 = 1467843300000 // 0:00 + 15 minutes (result: 0:15 in timestamp)
(wenn Sie diesen Zeitstempel Sache finden verwirrend Sie diese timestamp converter überprüfen können)
Seit jetzt haben wir beide Bereiche für unsere x -Achsen, können wir sie zu Optionen hinzufügen:
"xaxes": [{
"mode": "time",
"timeformat": "%H:%M",
"tickSize": [5, "minute"],
"min": 1467906000000, // 17:40
"max": 1467906900000, // 17:55
"timezone": "browser"
}, {
"mode": "time",
"timeformat": "%H:%M",
"tickSize": [5, "minute"],
"min": 1467842400000, // 0:00
"max": 1467843300000, // 0:15
"timezone": "browser"
}]
Das Problem ist, dass diese zweite x-Achse noch nicht angezeigt werden, wenn wir vergeben keine Diagrammdaten zu. Zum Glück für uns, wir können es leicht auszutricksen durch einen leeren Datensatz übergeben:
$.plot('.graphContainer', [
{
// data for first x-axis
data: [
[1467906000000, 12], // data point at 17:40
[1467906300000, 14], // data point at 17:45, etc...
[1467906600000, 16],
[1467906900000, 23]
],
label: 'data1',
xaxis: 1
},
// data for second a-axis (empty data set in order to force displaying second x-axis)
{
data: [],
xaxis: 2
}
],
options);
Siehe mein Arbeitsbeispiel auf JSFiddle.
Wie Sie verstanden haben möchten Sie eine flache Linie für die Zeit vor 17:40 ... anzeigen? Von dem, was ich weiß, besteht die einzige Möglichkeit darin, die fehlenden Datenpunkte mit Nullwerten für jeden Tick zwischen 0:00 und 17:40 zu füllen. –
Nein. Sorry, vielleicht habe ich mich nicht gut ausgedrückt. Ich möchte die Dauer meiner Gesamtzeit anzeigen. Nehmen wir an, ich habe 3 Datenpunkte mit Zeitstempel für 17:40, 17:45 und 17:50 Dann möchte ich diese Etiketten auf der x-Achse anzeigen: 00:00:00, 00:05:00, 00: 10:00 Uhr – ReactiveMax