하이차트 Highcharts Stacked column chart

high차트 중 Stacked column chart 예제입니다.

<script type="text/javascript" src="/?/highcharts.js"></script>
<script type="text/javascript" src="/?/modules/exporting.js"></script>

<script type="text/javascript">
$(document).ready(function(){
//var chart1 = new Highcharts.Chart(options);
new Highcharts.Chart({
   chart: {
    renderTo: 'chartBox',
       type: 'column'
   },
    //상단 버튼 제거
     exporting: {
         enabled: false
     },
     //하단 라벨 삭제
credits: {
          enabled: false
          },
   title: {
        text: 'Stacked column chart'
        //text: null
   },
   xAxis: {
       categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
   },
   yAxis: {
       min: 0,
       title: {
           text: 'Total fruit consumption'
       },
       stackLabels: {
           enabled: true,
           style: {
               fontWeight: 'bold',
               color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
           }
       }
   },
   legend: {
       align: 'right',
       x: -30,
       verticalAlign: 'top',
       y: 25,
       floating: true,
       backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
       borderColor: '#CCC',
       borderWidth: 1,
       shadow: false
   },
      //툴팁 제거
      /*
      tooltip: {
          enabled: false
      },
      */
   tooltip: {
       headerFormat: '<b>{point.x}</b><br/>',
       pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
   },
   plotOptions: {
       column: {
           stacking: 'normal',
           dataLabels: {
               enabled: true,
               color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
           }
       }
   },
   series: [{
       name: 'John',
       data: [5, 3, 4, 7, 2]
   }, {
       name: 'Jane',
       data: [2, 2, 3, 2, 1]
   }, {
       name: 'Joe',
       data: [3, 4, 4, 2, 5]
   }]
});
});

</script>


<div id="chartBox" style="height:240px;">

highCharts에 대한 자세한 정보는

highCharts 홈페이지