2013-12-11 61 views
2

我正在使用一個大的CakePHP門戶,其中我使用Highcharts進行了一些圖形表示。帶有大量數據無法正常工作的HighChart

它幾乎適用於所有簡單的圖表,但是當Query從數據庫中檢索大數據並嘗試在高圖中繪圖時出現問題。

下面是我試圖HighChart呈現示例數據:

[series] => Array 
     (
      [0] => Array 
       (
        [name] => Name 1 
        [data] => Array 
         (
          [0] => 1080 
          [1] => 25 
          [2] => 0.92 
          [3] => 19.5 
          [4] => 0 
          [5] => 0 
          [6] => 0 
          [7] => 0 
          [8] => 0 
          [9] => 0 
          [...] => 0 
           . 
           . 
          [320] => 0 
         ) 
        ) 
        . 
        . 
        . 
        . 
        . 

      [upto 400] => Array 
       (
        [name] => Name 2 
        [data] => Array 
         (
          [0] => 250 
          [1] => 25 
          [2] => 0.92 
          [3] => 19.5 
          [4] => 0 
          [5] => 0 
          [6] => 0 
          [7] => 0 
          [8] => 0 
          [9] => 0 
          [...] => 0 
           . 
           . 
          [320] => 0 
         ) 
        ) 
      ) 

但裝載了很久頁之後變成一片空白空白頁。

有人能幫我嗎?這將非常感激!

+0

我還繪製大量數據的完美的工作,你可以創建一個示例演示小提琴問題 – epoch

+0

另外,你有JS控制檯任何錯誤? –

+0

@PawełFus:不,沒什麼。 – Chandresh

回答

2

請看下面的代碼。

它還允許縮放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(); 


     }); 

    } 

感謝

相關問題