2014-03-18 5 views
0

페이지로드시 Highcharts'차트의로드를 지연시키는 방법이 있는지 궁금합니다. 현재 스크립트가 차트 용 데이터를 가져올 충분한 시간이 없기 때문에 내 코드가 충돌하는 페이지가 열리면 내 차트가로드됩니다.지연로드 Highcharts '차트

누구든지이 문제를 해결하는 방법을 알고 있습니까?

+0

외부 소스에서 데이터를로드하는 경우 차트의 함수 콜백에서 초기화해야합니다. –

+0

만약 내가 이렇게하면 "TypeError : $ (...) .highcharts가 함수가 아닙니다."하이 챠트가 제대로 작동하기 전에 올바르게 초기화되었습니다. – benandrews54

+0

예제를 라이브 데모로 복제하십시오. –

답변

0

몇 가지 방법이 있습니다. 하나는 사용자가 데이터를 수신 할 때 차트를 초기화하는 것입니다 (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'); 
}); 

또는 당신은 다음 데이터 펌프 부하에 차트를 초기화 할 수 있습니다 자세한 내용은

$(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 : 당신이 그것을 얻을 차트에 (다시 데이터는 [5,6,8,11] 모양).

건배