Highcharts懸停延遲，並沒有與多個系列呈現

Question

作爲一個免責聲明，我對JS很新。話雖如此，我有多個系列，我從數據庫加載到Highcharts。如果加載單個系列，則圖表呈現很好，並且響應速度很快。在加載多個系列時，懸停後​​數據的十字準線會大幅延遲，並且Chrome甚至無法在Chrome（版本59.0.3071.104（官方版本）（64位））屏幕上呈現圖表，除非我放大一點。它會在Firefox和IE中呈現，但響應時間很慢。它也將保存在所有瀏覽器上的磁盤上。

圖表是簡單的線條，每條線約包含33k個數據點。我使用一些簡單的php函數來遍歷數據集並生成腳本。

<div id="container" style="width: 1200px; height: 600px; margin: 0 auto"></div> 

     <!-- 1. Add JQuery and Highcharts in the head of your page --> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
     <script src="http://code.highcharts.com/highcharts.js"></script> 

     <!-- 2. You can add print and export feature by adding this line --> 
     <script src="http://code.highcharts.com/modules/exporting.js"></script> 

     <script src="https://code.highcharts.com/highcharts.js"></script> 

     <script src="https://code.highcharts.com/modules/exporting.js"></script> 


     <script src="https://code.highcharts.com/modules/offline-exporting.js"></script> 

     <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
     <script src="https://code.highcharts.com/stock/highstock.js"></script> 
     <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 


     <script> 
      exporting:{ 
          url:"http://localhost:8080/highcharts-export-web/" 
         }; 

       var chart = Highcharts.chart("container", { 
           chart: { 
            zoomType: "x", 
            panning: true, 
            panKey: "shift", 
            //~ plotShadow: true, 
            plotBorderWidth: 1 

           }, 
           tooltip: { enabled: false}, 
           title: { 
            text: "Experiments" 
           }, 


           yAxis: { 
            minorTickInterval: "auto", 
            lineColor: "#000", 
            lineWidth: 1, 
            tickWidth: 1, 
            tickColor: "#000", 
            crosshair: { 
             color: "blue", 
            }, 
            title: { 
             text: "Y", 


            } 
           }, 

           xAxis: { 
            //type: "datetime", 
            minorTickInterval: "auto", 
            lineColor: "#000", 
            lineWidth: 1, 
            tickWidth: 1, 
            tickColor: "#000", 
            crosshair: { 
             color: "blue", 
            }, 
            title: { 
             text: "X", 
            }, 


           }, 
           legend: { 
            layout: "vertical", 
            align: "right", 
            verticalAlign: "middle" 
           }, 

           series : [] 


          }); 






     $.getJSON('./from-sql.php?callback=data&zone=1055&ma=120', function(data) { 


     chart.addSeries({ 
      data: data.data, 

      }); 

    }); 


     $.getJSON('./from-sql.php?callback=data&zone=1056&ma=120', function(data) { 


     chart.addSeries({ 
      data: data.data, 

      }); 

    }); 


     $.getJSON('./from-sql.php?callback=data&zone=1&ma=120', function(data) { 


     chart.addSeries({ 
      data: data.data, 

      }); 

    }); 
    </script> 

我不會考慮33K點是一個龐大的數字，從我讀過的數據分組默認情況下，我認爲將有助於啓用。過去我曾經提出過問題，禁用工具提示似乎解決了這個問題。我在做一些天生錯誤的事情，並讓它變慢？

在此先感謝您的任何建議和/或提示。

Answer 1

33k大到足以降低性能。使用特殊的圖表組，例如Master-detail chart或Highstock series