Latest web development tutorials

Highcharts grafik berbagai bar

bagan kolom Highcharts bagan kolom Highcharts

Contoh berikut menunjukkan kisaran bar chart.

Pada bagian sebelumnya kita sudah tahu sintaks konfigurasi dasar Highcharts. Mari kita lihat konfigurasi lainnya.

konfigurasi grafik

Mengkonfigurasi jenis grafik 'columnrange'. chart.type menggambarkan jenis bagan. Nilai default adalah "line". 

var chart = {
   type: 'columnrange',
   inverted: true
};

contoh

File name: highcharts_column_range.htm 

<html>
<head>
<title>Highcharts 教程 | 本教程(w3big.com)</title>
   <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
   <script src="http://code.highcharts.com/highcharts.js"></script>  
   <script src="http://code.highcharts.com/highcharts-more.js"></script>  
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {  
   var chart = {
      type: 'columnrange',
     inverted:true
   };
   var title = {
      text: 'Temperature variation by month'   
   };  
   var subtitle = {
      text: 'Observed in Vik i Sogn, Norway, 2009'   
   };  
   var xAxis = {
      categories: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']      
   };
   var yAxis = {     
      title: {
         text: 'Temperature ( \xB0C )'         
      }      
   };
   var tooltip = {
      headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
      pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
         '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
      footerFormat: '</table>',
      shared: true,
      useHTML: true
   };
   var plotOptions = {
      columnrange: {
         dataLabels: {
            enabled: true,
            formatter: function () {
               return this.y + '\xB0C';
            }
         }
      }
   };  
   var credits = {
      enabled: false
   };
   
   var series= [{
        name: 'Temperatures',
        data: [
           [-9.7, 9.4],
           [-8.7, 6.5],
           [-3.5, 9.4],
           [-1.4, 19.9],
           [0.0, 22.6],
           [2.9, 29.5],
           [9.2, 30.7],
           [7.3, 26.5],
           [4.4, 18.0],
           [-3.1, 11.4],
           [-5.2, 10.4],
           [-13.5, 9.8]
        ]
   }];     
      
   var json = {};   
   json.chart = chart; 
   json.title = title;   
   json.subtitle = subtitle; 
   json.tooltip = tooltip;
   json.xAxis = xAxis;
   json.yAxis = yAxis;  
   json.series = series;
   json.plotOptions = plotOptions;  
   json.credits = credits;
   $('#container').highcharts(json);
  
});
</script>
</body>
</html>

Contoh di atas output:

bagan kolom Highcharts bagan kolom Highcharts