Que dois-je faire si le tracé de dispersion des HighCharts charge beaucoup de données bégayant?

HighCharts Scatch Graph Chargement Problèmes de performances et solutions pour les données de lots importantes

Lorsque vous dessinez des graphiques à l'aide de HighCharts, vous rencontrez souvent des problèmes tels que de grands lots de chargement de données provoquant un décalage ou un crash de l'interface. Cet article analysera les problèmes qui se produisent lorsque HighCharts chargera de grands tracés de dispersion par lots dans un cas pratique et fournit des solutions correspondantes.

Description du cas:

Les développeurs utilisent l'échafaudage Vue2 et la version HighCharts "^ 11.1.0" pour dessiner des graphiques de ligne et des parcelles de dispersion contenant une grande quantité de données. Le graphique de ligne peut charger 300 000 données normalement, tandis que le graphique de dispersion a des problèmes de performances lorsqu'il charge 1 000 éléments de données. HighCharts lance un avertissement "HighCharts.js: 12 HighCharts Avertissement # 12: www.highcharts.com/errors/12/", et il n'y a pas d'autre message d'erreur sur l'interface. Les données de tracé de dispersion sont renvoyées via l'interface, tandis que les données de tracé de ligne sont reçues en lots via WebSocket. Toutes les données sont dessinées uniformément après la réception. Le développeur a essayé le chargement par lots des données (SetData et Méthodes AddPoint), mais le problème persiste.

Analyse du code:

Dans le code, la logique de traitement des données du graphique de ligne est de recevoir d'abord toutes les données via le WebSocket, puis d'utiliser la méthode SetData pour la dessiner en même temps, ce qui est plus efficace lors du traitement d'une grande quantité de données. Le tracé de dispersion utilise la méthode par lots SetData pour charger une partie des données à chaque fois. Le problème est que HighCharts a un seuil de performance par défaut, et lorsque la quantité de données dépasse ce seuil, un avertissement de performance sera déclenché et même des échecs. Ce seuil limite l'efficacité de la méthode SetData, en particulier dans les parcelles de dispersion, qui nécessitent le dessin d'un grand nombre de points de marquage.

Solution:

HighCharts fournit la propriété Turbothreshold pour contrôler les vérifications du seuil de performances. La vérification du seuil de performances peut être désactivée en définissant Turbothreshold sur 0, permettant le chargement de plus gros ensembles de données.

Modification du code:

Dans la configuration des graphiques HighCharts, ajoutez le code suivant:

 PlotOptions: {
  série: {
    Turbothreshold: 0 // Définissez 0 pour désactiver la vérification du seuil de performances ou définir sur vos données maximum}
},

En réglant Turbothreshold à 0, HighCharts peut résoudre les problèmes de performances rencontrés lors du chargement de gros lots de parcelles de dispersion, permettant le chargement d'ensembles de données de 100 000 ou même plus. Il convient de noter que si la quantité de données est trop grande, cela peut toujours conduire à un goulot d'étranglement des performances dans le navigateur. Il est recommandé de combiner d'autres méthodes d'optimisation, telles que la réduction des données ou l'utilisation du module Boost de HighChart pour améliorer encore les performances.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!