Apa yang perlu saya lakukan jika plot penyebaran highCharts memuatkan banyak stutter data?

HighCharts Scatter Grafik Memuatkan Masalah Prestasi dan Penyelesaian untuk Data Kumpulan Besar

Apabila melukis carta menggunakan highcharts, anda sering menghadapi masalah seperti kumpulan besar pemuatan data yang menyebabkan lag atau kemalangan antara muka. Artikel ini akan menganalisis masalah yang berlaku apabila HighCharts memuat plot penyebaran batch besar dalam kes praktikal dan menyediakan penyelesaian yang sepadan.

Penerangan Kes:

Pemaju menggunakan versi perancah VUE2 dan HighCharts "^11.1.0" untuk menarik carta talian dan plot penyebaran yang mengandungi sejumlah besar data. Carta garis boleh memuatkan 300,000 keping data biasanya, manakala carta penyebaran mempunyai masalah prestasi apabila ia memuat 1,000 keping data. HighCharts melemparkan amaran "HighCharts.js: 12 HighCharts Amaran #12: www.highcharts.com/errors/12/", dan tidak ada mesej ralat lain di antara muka. Data plot penyebaran dikembalikan melalui antara muka, manakala data plot garis diterima dalam kelompok melalui WebSocket. Semua data ditarik secara seragam selepas menerima. Pemaju mencuba pemuatan data (setData dan kaedah addpoint), tetapi masalahnya berterusan.

Analisis Kod:

Dalam kod, logik pemprosesan data carta baris adalah untuk pertama kali menerima semua data melalui WebSocket, dan kemudian gunakan kaedah SetData untuk menariknya pada satu masa, yang lebih efisien apabila memproses sejumlah besar data. Plot penyebaran menggunakan kaedah setData batch untuk memuatkan sebahagian daripada data setiap kali. Masalahnya adalah bahawa HighCharts mempunyai ambang prestasi secara lalai, dan apabila jumlah data melebihi ambang ini, amaran prestasi akan dicetuskan, dan bahkan menyebabkan kegagalan. Ambang ini mengehadkan kecekapan kaedah setData, terutamanya dalam plot berselerak, yang memerlukan lukisan sejumlah besar titik penandaan.

Penyelesaian:

HighCharts menyediakan harta Turbothreshold untuk mengawal pemeriksaan ambang prestasi. Pemeriksaan ambang prestasi boleh dimatikan dengan menetapkan Turbothreshold ke 0, membolehkan dataset yang lebih besar dimuatkan.

Pengubahsuaian Kod:

Dalam konfigurasi carta HighCharts, tambahkan kod berikut:

 PlotOptions: {
  Siri: {
    Turbothreshold: 0 // Tetapkan 0 untuk mematikan pemeriksaan ambang prestasi, atau tetapkan ke maksimum data anda}
},

Dengan menetapkan Turbothreshold ke 0, HighCharts dapat menyelesaikan masalah prestasi yang dihadapi ketika memuatkan kelompok besar plot penyebaran, yang membolehkan pemuatan set data sebanyak 100,000 atau bahkan lebih besar. Harus diingat bahawa jika jumlah data terlalu besar, ia mungkin masih membawa kepada kesesakan prestasi dalam penyemak imbas. Adalah disyorkan untuk menggabungkan kaedah pengoptimuman lain, seperti data downsampling atau menggunakan modul HighCharts 'untuk meningkatkan lagi prestasi.

Atas ialah kandungan terperinci Apa yang perlu saya lakukan jika plot penyebaran highCharts memuatkan banyak stutter data?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!