Ich verwende Highcharts, um ein zoombares Liniendiagramm mit 1440 Datenpunkten zu erstellen. Hier ist eine JSFiddle-Demo .
>In Firefox ist die Leistung des Diagramms sehr träge, es dauert einige Sekunden, bis es gerendert wird, und es gibt eine lange Verzögerung zwischen dem Schweben über einem Datenpunkt und dem Erscheinen des Tooltips. Auf meiner Seite gibt es mehrere solcher Diagramme und ihre kombinierte Wirkung macht die Seite fast unbrauchbar.
Gibt es Tricks / Tipps, um die Leistung von Charts mit relativ großen Datenmengen zu verbessern? Ich habe den JSON des Diagramms an das Ende dieses Posts angehängt (wobei die Daten selbst abgeschnitten sind).
Übrigens, bevor ich die Eigenschaft turboThreshold: 0 hinzugefügt habe, wurde das Diagramm überhaupt nicht gerendert, weil die Serie mehr als 1000 Datenpunkte hat. Laut den Dokumenten :
%Vor%Wenn eine Serie ein Datenarray enthält, das länger als dieses ist, sind nur eindimensionale Arrays von Zahlen oder zweidimensionale Arrays mit x- und y-Werten zulässig. Außerdem wird nur der erste Punkt getestet, und der Rest wird als das gleiche Format angenommen. Dies spart teure Datenprüfung und Indexierung in langen Reihen. Setzen Sie es auf 0 deaktivieren. Der Standardwert ist 1000.
Ich habe die Demo aktualisiert , um alle Vorschläge, die ich bisher erhalten habe, einzuschließen. Die Deaktivierung von Animationen half ein wenig, aber die Seite ist immer noch sehr träge in Firefox (was der Hauptbrowser ist, auf den ich ziele). Ich habe ein Kopfgeld in der Hoffnung begonnen, weitere Vorschläge zu bekommen.
Hier finden Sie FAQ zur Beantwortung Ihrer Frage.
Zusätzlicher Hinweis: Eine große Leistungssteigerung erhalten Sie, wenn Sie den Tooltip deaktivieren.
Oder verwenden Sie einfach Highstock, das dataGrouping implementiert hat, zum Beispiel Diagramm mit 52.000 Punkten .
Ich habe einen Vorschlag, aber ich weiß nicht, ob dir das gefällt. Ich benötigte Diagramme mit mehreren Achsen und jede Achse hat 1440 Datenpunkte (sie können in meinem Fall nur 0 oder 1 sein) und sie funktionieren gut. Was ich dafür tun musste, ist den X-Achsen-Datentyp zu ändern und das Datum 'manuell' zu generieren.
Erstellen Sie Kategorien auf der x-Achse mit dem Datum:
%Vor%Dann ist jeder Datenpunkt genauso geordnet wie die Kategorie:
%Vor%Ich weiß, dass das unordentlich ist, aber wenn Sie das tun, können Sie das Datenarray auf nur den y-Achsenwert reduzieren und das Rendering benötigt weniger Zeit. Siehe JSFiddle.
Tags und Links javascript performance highcharts