Highchart多行顯示多行的線條需要30秒才能顯示

Question

我在vaadin應用程序中使用highcharts。它以單線圖的最佳方式工作。 如果我把49行，每行包含2048個值。我已禁用標記，陰影， 工具提示，動畫。但圖表仍需30秒才能在谷歌瀏覽器中顯示，而在Firefox中需要30秒以上。如何以快速方式顯示。代碼如下：

String s = ""; 
s+="chart = Highcharts.setOptions(Highcharts.theme);"+ 
       " chart = new Highcharts.Chart({\n" + 
       "   chart: {\n" + 
       "    renderTo: 'container5',\n" + 
       "    type: 'line',\n" +     
       "   },\n" + 
       "   title: {\n" + 
       "    text: 'Intensity Graph'\n" + 
       "   },\n" + 
       "   xAxis: {\n" + 
       "   min:0,\n"+ 
       "   max:2100,\n"+ 
       "   tickInterval:100,\n"+ 
       "    labels: {\n" + 
       "     rotation: -45,\n" + 
       "     align: 'right',\n" + 
       "     style: {\n" + 
       "      fontSize: '13px',\n" + 
       "      fontFamily: 'Verdana, sans-serif'\n" + 
       "     }\n" + 
       "    }\n" + 
       "   },\n" + 
       "  yAxis: {\n" + 
       "   title:{\n" + 
       "   text:''\n" +    
       "   },"+     
       "    min:0,\n"+ 
       "    max:255,\n"+ 
       "   tickInterval:20,\n"+ 
       "  },\n" + 
       "plotOptions: {\n" + 
       "   series: {\n" + 
       "    marker: {\n" + 
       "     enabled: false,\n" +     
       "     shadow : false,\n"+ 
       "     animation : false\n"+    
       "   },"+ 
       "color: '#00FF00',\n"+ 
       "   lineWidth: 0.1"+ 
       "   },"+    
       "  },"+ 
       " tooltip: {\n" + 
       "   enabled: false\n" + 
       "  },"+ 
       "   legend: {\n" + 
       "    enabled: false\n" + 
       "   },\n" + 
//    "   tooltip: {\n" + 
//    "    formatter: function() {\n" + 
//    "     return '<b>'+ this.x +'</b><br/>'+\n" + 
//    "      'lux: '+ Highcharts.numberFormat(this.y, 1) +\n" + 
//    "      ' px';\n" + 
//    "    }\n" + 
//    "   },\n" + 
       "    series: [{\n" + 
       "    name: 'Ejection Count',\n" + 
       "    data: [" + 
       "],\n" + 
       "    dataLabels: {\n" + 
       "     enabled: true,\n" + 
       "     rotation: -90,\n" + 
       "     color: '#FFFFFF',\n" + 
       "     align: 'right',\n" + 
       "     x: -3,\n" + 
       "     y: 10,\n" + 
       "     formatter: function() {\n" + 
       "      return this.y;\n" + 
       "     },\n" + 
       "     style: {\n" + 
       "      fontSize: '13px',\n" + 
       "      fontFamily: 'Verdana, sans-serif'\n" + 
       "     }\n" + 
       "    }\n" + 
       "   }]\n" + 
       "  });" +    
       " });"); 

long len = 2,kk1 = 0; 
      Highchart hc = new Highchart(); 
      byte[] cor = new byte[4584];// I am adding this array content to the graph 
        StringBuffer sb = new StringBuffer(); 
      try 
      { 
       for (long l = 0; l < len; l++) 
       { 
        sb.append(" this.chart.addSeries({\n" + 
        "   data: [");  
        for (int i = 0; i < 2; i++) 
       {     
         if(i == 0) 
         { 
         //2048 points 
          for (int j = 0,k = 276; k < 2324; j++,k++) 
         { 
            if(j == 2323) 
          { 
           sb.append(cor[k]) ; 
          }       
          else 
          { 
           sb.append((cor[k] +","); 
          } 
         } 
         }      
       } 
        sb.append("],"+ 
        "  redraw :false,\n"+ 
        "  animation:false\n"+ 
        "});") ;           
       } 
       } 
       catch (FileNotFoundException e) 
       { 
        // TODO Auto-generated catch block 
        e.printStackTrace(); 
       } 
       catch (IOException e) 
       { 
        // TODO Auto-generated catch block 
        e.printStackTrace(); 
       } 
       sb.append("this.chart.redraw();"); 
         hc.drawChart(sb.toString()); 

         } 

Answer 1

Highcharts不是很快才能顯示100k點。爲此，我建議使用Highstock，請參閱54k點示例：http://www.highcharts.com/stock/demo/data-grouping，其中圖表在0.2秒內構建。 Highstock主要加速爲dataGrouping。