Highcharts большой набор данных кластеров

Question

У меня есть десятки тысяч (возможно, сотни тысяч) точек, которые мне нужны, с графиками Highcharts. Есть ли способ, с помощью которого я могу скопировать данные на сервере, поэтому он будет показывать менее 1000 точек, но по мере того, как вы увеличиваете масштаб, это вызовет AJAX на сервер, чтобы получить данные для этого увеличенного региона (он, вероятно, пройдет через один и тот же кластерный алгоритм). Как этот интерфейс с API Highcharts?

Answer 1

Вот улучшение ответа Барбары,

Он регистрируется в случае setExtremes, знать, если это событие сброса масштаба. Если это так - он получает весь набор данных, , что позволяет сбрасывать масштаб для правильной работы.

Он также позволяет масштабировать как x, так и 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

Существует демонстрация высокого уровня, которая делает это http://www.highcharts.com/stock/demo/lazy-loading. Но вы можете сделать то же самое с Highcharts http://jsfiddle.net/RHkgr/ Важным бит является afterSetExtremes функционировать

... 
      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

В случае, если вы не будете иметь предел точек, можно увеличить turboThreshold параметра Я.