Latest web development tutorials

Highcharts ditumpuk bagan kolom

bagan kolom Highcharts bagan kolom Highcharts

Contoh berikut menunjukkan grafik kolom ditumpuk.

Pada bagian sebelumnya kita sudah tahu sintaks konfigurasi dasar Highcharts. Mari kita lihat konfigurasi lainnya. Tambahkan susun properti di plotOptions di:

konfigurasi

plotOptions: Pilihan data titik

plotOptions digunakan untuk mengatur titik data grafik properti terkait. plotOptions Menurut berbagai jenis grafik, sifat mereka mengatur sedikit berbeda.

pengaturan grafik konfigurasi tumpukan plotOptions.area.stacking sebagai "persen". Jika Anda menonaktifkan penggunaan tumpukan nol. 

var plotOptions = {
   column: {
      stacking: 'normal',
      dataLabels: {
         enabled: true,
         color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
         style: {
            textShadow: '0 0 3px black'
         }
      }
   }
};

contoh

File name: highcharts_column_stacked.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 yAxis ={
      min: 0,
      title: {
        text: '水果总消费量'
      },
      stackLabels: {
        enabled: true,
        style: {
           fontWeight: 'bold',
           color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
        }
      }
   };
   var legend = {
      align: 'right',
      x: -30,
      verticalAlign: 'top',
      y: 25,
      floating: true,
      backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
      borderColor: '#CCC',
      borderWidth: 1,
      shadow: false
   };   
   var tooltip = {
      formatter: function () {
         return '<b>' + this.x + '</b><br/>' +
            this.series.name + ': ' + this.y + '<br/>' +
            'Total: ' + this.point.stackTotal;
      }
   };
   var plotOptions = {
      column: {
         stacking: 'normal',
         dataLabels: {
            enabled: true,
            color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
            style: {
               textShadow: '0 0 3px black'
            }
         }
      }
   };
   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.yAxis = yAxis;
   json.legend = legend;
   json.tooltip = tooltip;
   json.plotOptions = plotOptions;
   json.credits = credits;
   json.series = series;
   $('#container').highcharts(json);
  
});
</script>
</body>
</html>

Contoh di atas output:

bagan kolom Highcharts bagan kolom Highcharts