2013-06-04 2 views
0

다음 HighChart 코드가 있습니다. 나는 데이터를 & 카테고리를 객체를 통해 하드 코딩하는 대신 사용할 수있게하고 싶습니다. 그래서 나중에 동적으로 데이터를 가져 와서 객체에 할당 할 수 있습니다. 이 목적을 위해 필요한 변경 사항을 알려주십시오. 미리 감사드립니다.데이터를 동적으로 Highchart에 전달

$('#stackedChartContainer').highcharts({ 
       chart: { 
        type: 'column' 
       }, 
       title: { 
        text: '' 
       }, 
       xAxis: { 
        categories: ['IAS', 'Funding', 'Gilts', 'BuyOut'] 
       }, 
       yAxis: { 
        min: 0, 
        title: { 
         text: 'Millions' 
        }, 
        stackLabels: { 
         enabled: true, 
         style: { 
          fontWeight: 'bold', 
          color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray' 
         } 
        } 
       }, 
       legend: { 
        align: 'right', 
        x: -100, 
        verticalAlign: 'top', 
        y: 20, 
        floating: true, 
        backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white', 
        borderColor: '#CCC', 
        borderWidth: 1, 
        shadow: false 
       }, 
       tooltip: { 
        formatter: function() { 
         return '<b>' + this.x + '</b><br/>' + 
         this.series.name + ': ' + this.y + '<br/>' + 
         'Total: ' + this.point.stackTotal; 
        } 
       }, 
       plotOptions: { 
        column: { 
         stacking: 'normal', 
         dataLabels: { 
          enabled: true, 
          color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white' 
         } 
        } 
       }, 
       series: [{ 
        name: 'Pensioners', 
        data: [800000000, 904080340, 961576651, 998929115] 
       }, { 
        name: 'Deferreds', 
        data: [700000000, 925466733, 1063478804, 1158224555] 
       }, { 
        name: 'Active', 
        data: [200000000, 265524863, 305739877, 333386521] 
       }] 
      }); 

답변

0

데이터/시리즈를 수정할 수있는 addSeries/addPoint/setData 함수를 사용할 수 있습니다. 카테고리는 setCategories() 함수로 수정할 수 있습니다. 여기에 모두 설명되어 있습니다. http://api.highcharts.com/highcharts

서버/데이터베이스 등에서 동적으로 데이터를 가져 오려는 경우 ajax 호출을 사용할 수 있습니다.

여기의 예는 다음과 같습니다. http://docs.highcharts.com/#preprocessing