Was soll ich tun, wenn das Highcharts -Streudiagramm viele Datenstottern lädt?

Highcharts -Streudiagrammladungsleistungsprobleme und -lösungen für große Stapeldaten

Wenn Sie Diagramme mit Highcharts zeichnen, stoßen Sie häufig Probleme wie große Stapel der Datenbelastung, die eine Schnittstellenverzögerung oder einen Absturz verursachen. In diesem Artikel werden die Probleme analysiert, die auftreten, wenn Highcharts in einem praktischen Fall große Batch -Streudiagramme belastet und entsprechende Lösungen liefern.

Fallbeschreibung:

Entwickler verwenden VUE2 -Gerüst- und Highcharts -Version "^11.1.0", um Zeichnungsdiagramme und Streudiagramme zu zeichnen, die eine große Datenmenge enthalten. Das Zeilendiagramm kann normalerweise 300.000 Datenstücke laden, während das Streudiagramm Leistungsprobleme aufweist, wenn 1.000 Datenstücke geladen werden. Highcharts zeigt eine Warnung "Highcharts.js: 12 Highcharts -Warnung #12: www.highcharts.com/Errors/12/", und es gibt keine andere Fehlermeldung auf der Schnittstelle. Streudiagrammdaten werden über die Schnittstelle zurückgegeben, während Zeilenplotdaten in Stapeln über WebSocket empfangen werden. Alle Daten werden nach dem Empfang einheitlich gezeichnet. Der Entwickler versuchte das Laden von Daten (SetData- und AddPoint -Methoden), das Problem bleibt jedoch bestehen.

Codeanalyse:

Im Code besteht die Datenverarbeitungslogik des Zeilendiagramms darin, zuerst alle Daten über das WebSocket zu empfangen und dann die SetData -Methode gleichzeitig zu zeichnen, was bei der Verarbeitung einer großen Datenmenge effizienter ist. Das Streudiagramm verwendet die Batch -SetData -Methode, um jeden Zeitpunkt einen Teil der Daten zu laden. Das Problem ist, dass HighCharts standardmäßig einen Leistungsschwellenwert hat. Wenn die Datenmenge diesen Schwellenwert überschreitet, wird eine Leistungswarnung ausgelöst und sogar Fehler. Dieser Schwellenwert begrenzt die Effizienz der SetData -Methode, insbesondere in Streudiagrammen, die die Zeichnung einer großen Anzahl von Markierungspunkten erfordern.

Lösung:

HighCharts bietet die TurboThreshold -Eigenschaft zur Steuerung der Performance -Schwellenwertprüfungen. Die Überprüfung des Leistungsschwellenwerts kann abgeschaltet werden, indem die TurboThreshold auf 0 festgelegt wird, sodass größere Datensätze geladen werden können.

Codeänderung:

Fügen Sie in der Highcharts -Diagrammkonfiguration den folgenden Code hinzu:

 Plotoptionen: {
  Serie: {
    TurboThreshold: 0 // Setzen Sie 0, um den Leistungsschwellenwert zu deaktivieren oder auf Ihr Datenmaximum einzustellen}
},

Durch das Einstellen von TurbOreshold auf 0 können Highcharts die Leistungsprobleme lösen, die beim Laden großer Stapel von Streudiagrammen auftreten, wodurch das Laden von Datensätzen von 100.000 oder sogar größer geladen wird. Es ist zu beachten, dass die Datenmenge, wenn dies zu groß ist, immer noch zu einem Leistungs Engpass im Browser führen kann. Es wird empfohlen, andere Optimierungsmethoden zu kombinieren, wie z. B. Datendown -Sampling oder mithilfe von HighCharts -Boost -Modul, um die Leistung weiter zu verbessern.

Das obige ist der detaillierte Inhalt vonWas soll ich tun, wenn das Highcharts -Streudiagramm viele Datenstottern lädt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!