Zestaw Highcharts dużych zestawów danych

Question

Mam dziesiątki tysięcy (być może setki tysięcy) punktów, które muszę opracować w Highcharts. Czy istnieje sposób, w jaki mogę zgrupować dane na serwerze, więc będzie on pokazywał mniej niż 1000 punktów, ale w miarę zbliżania się będzie wywoływał AJAX na serwerze, aby uzyskać dane dla tego powiększonego regionu (prawdopodobnie przez to przebiegnie ten sam algorytm klastra). Jak ten interfejs z interfejsem API Highcharts?

Answer 1

Tutaj jest poprawa na odpowiedź Barbary,

Rejestruje do zdarzenia setExtremes, wiedzieć, czy jest to zdarzenie resetowania zoom. Jeśli tak jest - pobiera cały zestaw danych, , umożliwiając poprawne działanie zoomu.

Umożliwia także powiększanie zarówno w osi X, jak i Y.

http://jsfiddle.net/DktpS/8/

var isReset = false; 

... 

      xAxis: { 
       events: { 
         afterSetExtremes : afterSetExtremes, 
        setExtremes: function (e) { 


         if (e.max == null || e.min == null) { 
          isReset = true;        
         } 
         else 
         { 
         isReset = false; 
         } 
        } 
       }, 
       minRange: 3600 * 1000 // one hour 
      }, 

      series: [{ 
       data: data, 
       dataGrouping: { 
        enabled: false 
       } 
      }] 
     }); 
    }); 
}); 


    /** 
    * Load new data depending on the selected min and max 
    */ 
    function afterSetExtremes(e) { 

     var url, 
     currentExtremes = this.getExtremes(), 
      range = e.max - e.min; 
     var chart = $('#container').highcharts(); 

     var min = 0; 
     var max = 1.35e12; 
     if(!isReset) 
     { 
      min = e.min; 
      max = e.max; 
     } 
     chart.showLoading('Loading data from server...'); 
     $.getJSON('http://www.highcharts.com/samples/data/from-sql.php?start=' + Math.round(min) + 
      '&end=' + Math.round(max) + '&callback=?', function (data) { 

      chart.series[0].setData(data); 

      chart.hideLoading(); 


     }); 

    } 

Answer 2

Istnieje demonstracja highstock, która wykonuje to http://www.highcharts.com/stock/demo/lazy-loading. Ale można zrobić to samo z highcharts http://jsfiddle.net/RHkgr/ Ważne bit jest afterSetExtremes funkcjonować

... 
      xAxis : { 
       events : { 
        afterSetExtremes : afterSetExtremes 
       }, 
... 


/** 
* Load new data depending on the selected min and max 
*/ 
function afterSetExtremes(e) { 

    var url, 
     currentExtremes = this.getExtremes(), 
     range = e.max - e.min; 
    var chart = $('#container').highcharts(); 
    chart.showLoading('Loading data from server...'); 
    $.getJSON('http://www.highcharts.com/samples/data/from-sql.php?start='+ Math.round(e.min) + 
      '&end='+ Math.round(e.max) +'&callback=?', function(data) { 

     chart.series[0].setData(data); 
     chart.hideLoading(); 
    }); 

} 

Answer 3

W przypadku, gdy nie będzie miał limit punktów, można zwiększyć turboThreshold paramter.