Highcharts tập hợp dữ liệu lớn nhóm

Question

Tôi có hàng chục nghìn (có thể là hàng trăm nghìn) điểm mà tôi cần vẽ bằng Highcharts. Có cách nào tôi có thể nhóm dữ liệu trên máy chủ, vì vậy nó sẽ hiển thị ít hơn 1000 điểm, nhưng khi bạn phóng to nó sẽ thực hiện cuộc gọi AJAX đến máy chủ để lấy dữ liệu cho vùng được thu phóng đó (có thể nó sẽ chạy qua cùng một thuật toán cụm). Giao diện này sẽ như thế nào với API Highcharts?

Answer 1

Dưới đây là một cải tiến cho câu trả lời của Barbara,

Nó đăng ký sự kiện setExtremes, biết nếu điều này là một sự kiện thiết lập lại zoom. Nếu có - nó sẽ lấy toàn bộ tập dữ liệu, do đó cho phép thu phóng đặt lại hoạt động chính xác.

Nó cũng cho phép phóng to cả x và 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

Có bản giới thiệu highstock làm điều này http://www.highcharts.com/stock/demo/lazy-loading. Nhưng bạn có thể làm điều tương tự với highcharts http://jsfiddle.net/RHkgr/ Các bit quan trọng là afterSetExtremes hoạt

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

Trong trường hợp khi bạn sẽ không có một giới hạn của điểm, bạn có thể tăng turboThreshold paramter.