Latest web development tutorials

Highcharts menggunakan grafik kolom negatif terbalik

bagan kolom Highcharts bagan kolom Highcharts

Contoh berikut menunjukkan penggunaan bagan kolom negatif terbalik.

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

konfigurasi

konfigurasi grafik

Menetapkan jenis grafik kolom atribut, chart.type menggambarkan jenis bagan. Nilai default adalah "line". 

var chart = {
   type: 'column'
};

contoh

File name: highcharts_column_negative.htm 

<html>
<head>
<meta charset="UTF-8" />
<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>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {  
   var chart = {
      type: 'column'
   };
   var title = {
      text: '使用负值的反向柱形图'   
   };   
   var xAxis = {
      categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
   };
   var credits = {
      enabled: false
   };
   var 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]
      }
   ];     
      
   var json = {};   
   json.chart = chart; 
   json.title = title; 
   json.xAxis = xAxis;
   json.credits = credits;
   json.series = series;
   $('#container').highcharts(json);
  
});
</script>
</body>
</html>

Contoh di atas output:

bagan kolom Highcharts bagan kolom Highcharts