如何在高圖中一秒鐘繪製500點？

我們應該從ajax請求每秒鐘繪製500點，我們從WCF服務（託管在亞馬遜雲中）獲取它。我們使用高圖，但它非常慢。如何在高圖中一秒鐘繪製500點？

有沒有解決方法？或任何其他圖形控制，我們可以讓performnace高效

var chart = new Highcharts.Chart({ 
      chart: { 
       type: 'spline', 
       animation: false,//Highcharts.svg, // don't animate in old IE 
       marginRight: 10, 
       renderTo: 'Chart', 
       events: { 
        load: function() { 


        } 
       } 
      }, 
      title: { 
       text: 'Data' 
      }, 
      xAxis: { 
       type: 'datetime', 
       tickPixelInterval: 150, 
       max: ((new Date()).getTime()) + 50 * 10000 
      }, 

      yAxis: { 
       title: { 
        text: 'Data', 
        min: 50, 
        max: 500 
       }, 
       plotLines: [{ 
        value: 0, 
        width: 1, 
        color: '#FFFF00' 

       }] 
      }, 
      plotOptions: { 
       line: { 
        marker: { 
         enabled: false 
        } 
       } 
      }, 
      tooltip: { 

      }, 
      legend: { 
       enabled: false 
      }, 
      exporting: { 
       enabled: false 
      }, 
      plotOptions: { 
       series: { 

        marker: { 
         enabled: false 
        } 
       } 
      }, 

      series: [{ 
       name: 'Chart', 

       color: '#335de8', 

       //data: [] 
       data: (function() { 
        //generate an array of random data 
        var data = []; 
        var data = [], 
            time = (new Date()).getTime(), i; 
        for (i = 1; i <= 0; i++) { 
         data.push({ 
          x: time + i * 1000, 
          y: null 
         }); 
        } 

        return data; 

       })() 
      }] 

     }); 

     chart.yAxis[0].setExtremes(-200, 500); 

      UpdateChart(); 

     function UpdateChart() { 
     var Chrt = chart.series[0]; 
     setInterval(function() { 
       $.ajax({ 
        url: 'getChartData/', 
        cache: false, 
        type: "POST", 
        success: function (result) { 
      for (var tmpJ = 0; tmpJ < result.length; tmpJ++) { 

     Chrt.addPoint([(new Date()).getTime(), eval(result[tmpJ])], true, false); 
           Chrt.redraw(false); 
     } 
     }); 
     }, 1000); 
}

來源

2013-11-21 Praveenm05

你的代碼看起來像使用它在我們的例子？我建議添加點，但只有最後一個動畫/重繪。 –

@Sebastian Bochan，我已經添加了代碼 – Praveenm05

這是關於你的問題的主題，但在這件事情中使用'setInterval'可能會讓你的序列失序，不確定這是否是你關心的事情，解決方法之一是觸發該請求只有在完成接收前一個請求的情況下，網絡擁塞可以遠高於每請求分配1秒 –

試圖取代這一行

Chrt.addPoint([(new Date()).getTime(), eval(result[tmpJ])], true, false);

與

if(tmpJ==result.length-1){ 
     Chrt.addPoint([(new Date()).getTime(), eval(result[tmpJ])], false, false); 
} else { 
     Chrt.addPoint([(new Date()).getTime(), eval(result[tmpJ])], true, false); 
}

來源

2013-11-21 10:24:26

如何在高圖中一秒鐘繪製500點？

回答

相關問題