延遲加載Highcharts'圖表

Question

我想知道是否有一種方法延緩加載頁面加載Highcharts的圖表。目前我的圖表在頁面打開時加載，導致我的代碼崩潰，因爲腳本沒有足夠的時間爲圖表獲取數據。

有誰知道如何解決這個問題？

Answer 1

有幾種方法可以做到這一點。一個是當收到數據初始化圖表（使用jQuery交例如，數據看起來像[5,6,8,11]）：

$(function(){ 
    $.post('test_highchart.asp', {actn:'load-data'}, function(dat){ 
     $('#chart').highcharts({ 
      chart: { 
       type: 'bar' 
      }, 
      title: { 
       text: 'Delayed Loading' 
      }, 
      xAxis: { 
       title: { 
        text: 'Values' 
       } 
      }, 
      series:[{ 
       name: 'value', 
       data: dat 
      }] 
     }); 
    }, 'json'); 
}); 

或者，可以初始化負載圖表然後泵送數據到當你得到它的圖表（數據再次貌似[5,6,8,11]）：

$(function(){ 
    window.chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'chart', 
      type: 'bar' 
     }, 
     title: { 
      text: 'Delayed Loading' 
     }, 
     xAxis: { 
      title: { 
       text: 'Values' 
      } 
     }, 
     series:[{ 
      name: 'values', 
      id: 'series1', 
      data: [] 
     }] 
    }); 

    // load data: 
    $.post('test_highchart.asp', {actn:'load-data'}, function(dat){ 
     $.each(dat, function (val) { 
      // add points to chart: 
      window.chart.get('series1').addPoint(val); 
     }); 
    }, 'json'); 
}); 

檢查http://www.highcharts.com/docs/working-with-data/live-data瞭解詳情。

歡呼