Ich versuche, lazy loading mit dynamisch aktualisierte Daten in Highstock. Die Idee besteht darin, ein großes historisches Diagramm (mit Millionen von Datenpunkten) zu erstellen, das gleichzeitig in Echtzeit aktualisiert wird (wenn der Benutzer zum rechten Rand scrollt).
Um beim Laden von Daten ein zyklisches Laden zu verhindern, muss ich Folgendes einstellen:
%Vor%Bei dieser Einstellung wird der Navigator jedoch durch Hinzufügen eines neuen Datenpunkts zum Diagramm nicht mehr aktualisiert, und dies verhindert, dass ich diese neuen Datenpunkte überhaupt sehen kann (weil ich nicht über den vorherigen Eintrag in der rechten Seite blättern kann). . Ich habe versucht, diese neuen Datenpunkte der Navigator-Reihe hinzuzufügen, aber der Navigator wird immer noch nicht aktualisiert. Ich habe auch versucht, den maximalen Wert in den xAxis der Navigator-Reihe programmatisch, aber ohne Erfolg zu ändern.
Wie kann ich das schaffen?
Ich hatte ein paar Wochen damit verbracht, dieses Problem zu lösen, und es ist schwierig. Es ist sehr einfach, das Laden zu verzögern (siehe die "1,7 Millionen Punkte mit asynchronem Laden" -Demo in Ссылка ) ODER haben neue Datenpunkte hinzugefügt, aber beide erfordern ein bisschen ein Hack.
Zuerst werde ich die Lösung, mit der ich endete, detailliert beschreiben. Setzen Sie adaptToUpdatedData nicht auf false, lassen Sie es einfach weg. Alle Arbeiten, die Sie ausführen, erfordern Änderungen am Back-End-Code, der die Daten erzeugt. Im Wesentlichen sind die Daten, die an Highstock zurückgegeben werden, immer der vollständige Bereich der Daten, die Sie haben, jedoch haben Sie eine hohe Auflösung von Datenpunkten für das Fenster, das gerade angezeigt wird, aber niedrige Auflösung von Datenpunkten für den Bereich vor und nach diesem Fenster. Neue Datenpunkte werden am Ende der Daten hinzugefügt, wie Sie es normalerweise tun würden (siehe die Demo "dynamisch aktualisierte Daten" unter Ссылка )
Dies stellt sicher, dass beim Hinzufügen neuer Datenpunkte auch der Navigator aktualisiert wird. Es verhindert jedoch auch, dass Sie die gesamte Anzahl von Datenpunkten laden müssen (da die Vorher- und Nachher-Bereiche nur eine geringe Auflösung von Datenpunkten enthalten). Sie müssen Code schreiben, der Ihre Daten korrekt in weniger Datenpunkte mittelt, bevor sie in das Hochwertdiagramm zurückgeleitet werden.
In der Handler-Funktion setExtremes (die aufgerufen wird, wenn der Benutzer den Navigator scrollt), habe ich Code, der eine AJAX-Anfrage für neue Daten zum Highstocks-Diagramm macht. Ich habe auch Code, der setInterval () verwendet, um alle 10 Sekunden neue Datenpunkte zu holen. Sie benötigen eine Variable, die verfolgt, wenn das setInterval () - Update ausgeführt wird, denn wenn neue Datenpunkte zum Diagramm hinzugefügt werden, ruft dies auch die Handler-Funktion setExtremes auf, die dann eine weitere AJAX-Anforderung auslöst. Die AJAX-Anforderung in Ihrem setExtremes-Handler sollte nur ausgeführt werden, wenn eine setInterval () - Aktualisierung nicht stattfindet. (Es ist leicht, einen Fehler zu haben, der eine Endlosschleife von AJAX-Anforderungen für Daten verursacht.)
Sie benötigen auch eine Variable in der AJAX-Anfrage nach Daten, damit der Backend-Code weiß, ob die Anfrage von setInterval () oder von Ihrem setExtremes-Handler kommt (wenn der Benutzer den Navigator scrollt), damit er weiß, ob er es hat sollte nur die Daten für den angeforderten Zeitbereich zurückgeben, wie es ist (für setInterval () -Anfrage), oder die Mittelung mit niedriger / hoher Auflösung für den gesamten Datenbereich ausführen (für setExtremes-Handler-Anfragen).
Ich glaube nicht, dass diese Variablen das Potenzial für Rassenbedingungen vollständig beseitigen.
Die von Ihnen beschriebenen Probleme sind korrekt: Sie können adaptToUpdatedData nicht auf false setzen und neue Datenpunkte hinzufügen, da der Navigator nicht aktualisiert wird. Dies verhindert, dass Sie den Navigator zu den neuen Punkten scrollen können. Wenn Sie den Wert jedoch nicht festlegen und der neue (und kleinere) Datenbereich angefordert wird, aktualisiert der Navigator diesen Bereich. Der Navigator und das Hauptdiagramm zeigen denselben Datenbereich und machen den Navigator unbrauchbar.
Sebastian's Antwort funktioniert leider nicht. Die Aktualisierung der Reihe [0] hat keine Auswirkungen auf den Navigator, da die Einstellung von adaptToUpdatedData auf false den Navigator daran hindert, sich selbst neu zu zeichnen.
Dieser Ansatz mit niedriger / hoher Auflösung ist ein Hack, aber es ist der einzige Weg, den ich gefunden habe, der funktioniert (nach einem halben Dutzend anderer Wege, die nicht funktionierten.) Es wäre großartig, wenn das Highstocks-Team könnte diese Funktion zu ihrer Bibliothek hinzufügen.
Ich hatte dieses Problem zwei, und nachdem ich viele Lösungen ausprobiert hatte, bekam ich eine, die wirklich für mich funktionierte. Ich werde es für dich beschreiben:
Ich verwende eine globale Variable, die den Maximalwert von xAxis enthält. Wenn ich das Diagramm aktualisiere, überprüfe ich, ob der neue xAxis -Wert größer als die maxX -Variable ist.
Wenn es wahr ist, aktualisiere ich die maxX mit dem neuen Punkt und dann benutze ich chart.xAxis.setExtremes (chart.xAxis.min, maxX); und danach zeichne ich das Diagramm neu.
Mit diesen beiden Dingen simuliert das Diagramm das verzögerte Laden mit dynamischen Daten, aber ein anderes Problem trat auf: Der Bereichswahlschalter und der Navigator wurden nicht aktualisiert. Die Lösung war:
%Vor%Diese beiden Zeilen aktivieren den Bereichswähler wieder und alles ist in Ordnung.
Tags und Links highcharts highstock