2013-12-11 5 views
2

커다란 CakePHP 포털 중 하나를 사용하여 그래픽 표현을 위해 Highcharts를 사용했습니다.많은 양의 데이터가 작동하지 않는 HighChart

거의 모든 간단한 그래프에 대해 잘 작동하지만 Query가 데이터베이스에서 큰 데이터를 검색하여 하이 차트에 플롯하려고하면 문제가 발생합니다.

[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 
         ) 
        ) 
      ) 

그러나 오랫동안 페이지 로딩 후

흰색 빈 페이지로 이동 :

다음은 내가 HighChart에서 렌더링을 시도 예제 데이터입니다.

아무도 도와주세요. 매우 감사하겠습니다!

+0

나는 또한 당신은 JS 콘솔에 오류가 있습니까, 당신은 또한 문제 – epoch

+0

을 보여주는 예 바이올린을 만들 수 있습니다, 완벽하게 작동 많은 양의 데이터를 음모? –

+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(); 


     }); 

    } 

감사

관련 문제