What should I do if the Highcharts scatter plot is loading a lot of data stutter?

Highcharts scatter graph loading performance problems and solutions for large batch data

When drawing charts using highcharts, you often encounter problems such as large batches of data loading causing interface lag or crash. This article will analyze the problems that occur when highcharts loads large batch scatter plots in a practical case and provide corresponding solutions.

Case description:

Developers use vue2 scaffolding and highcharts version "^11.1.0" to draw line charts and scatter plots containing a large amount of data. The line chart can load 300,000 pieces of data normally, while the scatter chart has performance problems when it loads 1,000 pieces of data. Highcharts throws a warning "highcharts.js:12 highcharts warning #12: www.highcharts.com/errors/12/", and there is no other error message on the interface. Scatter plot data is returned through the interface, while line plot data is received in batches through websocket. All data is drawn uniformly after receiving. The developer tried batch loading of data (setdata and addpoint methods), but the problem persists.

Code analysis:

In the code, the data processing logic of the line chart is to first receive all data through the websocket, and then use the setdata method to draw it at one time, which is more efficient when processing a large amount of data. The scatter plot uses the batch setdata method to load part of the data each time. The problem is that highcharts has a performance threshold by default, and when the amount of data exceeds this threshold, a performance warning will be triggered, and even rendering failures. This threshold limits the efficiency of the setdata method, especially in scatter plots, which require the drawing of a large number of marking points.

Solution:

Highcharts provides the turbothreshold property to control performance threshold checks. Performance threshold checking can be turned off by setting turbothreshold to 0, allowing larger datasets to be loaded.

Code modification:

In the highcharts chart configuration, add the following code:

 plotOptions: {
  series: {
    turboThreshold: 0 //Set 0 to turn off the performance threshold check, or set to your data maximum}
},

By setting turbothreshold to 0, highcharts can solve the performance problems encountered when loading large batches of scatter plots, allowing loading of data sets of 100,000 or even larger. It should be noted that if the amount of data is too large, it may still lead to a performance bottleneck in the browser. It is recommended to combine other optimization methods, such as data downsampling or using highcharts' boost module to further improve performance.

The above is the detailed content of What should I do if the Highcharts scatter plot is loading a lot of data stutter?. For more information, please follow other related articles on the PHP Chinese website!