Gestapeltes Highcharts-Säulendiagramm

Highcharts Säulendiagramm

Das folgende Beispiel zeigt ein gestapeltes Gruppen-Balkendiagramm.

In den vorherigen Kapiteln haben wir die grundlegende Konfigurationssyntax von Highcharts kennengelernt. Jetzt werfen wir einen Blick auf andere Konfigurationen. Fügen Sie das Attribut stacking in plotOptions hinzu:

Konfiguration

plotOptions: Datenpunktoptionen

plotOptions wird verwendet, um Eigenschaften im Zusammenhang mit Datenpunkten im Diagramm festzulegen. Die Eigenschaftseinstellungen von plotOptions variieren je nach Diagrammtyp geringfügig.

Konfigurieren Sie die Stapelung des Diagramms, indem Sie plotOptions.area.stacking auf "percent" setzen. Wenn stacking deaktiviert ist, verwenden Sie null.

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

Konfiguration von Seriendatenpunkten

Konfigurieren Sie jedes entsprechende Element der Datenreihe in der gestapelten Gruppe.

series: [{
   name: 'John',
   data: [5, 3, 4, 7, 2],
   stack: 'male'
}]

Beispiel

Dateiname: highcharts_column_rotated.htm

<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | Example(example.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: 'Total fruit consumption, grouped by gender'   
   };    
   var xAxis = {
      categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
   };
   var yAxis ={
      allowDecimals: false,
      min: 0,
      title: {
        text: 'Number of fruits'
      }     
   }; 
   var plotOptions = {
      column: {
         stacking: 'normal'        
      }
   };
   var credits = {
      enabled: false
   };
   var series= [{
          name: 'John',
            data: [5, 3, 4, 7, 2],
            stack: 'male'
        }, {
            name: 'Joe',
            data: [3, 4, 4, 2, 5],
            stack: 'male'
        }, {
            name: 'Jane',
            data: [2, 5, 6, 2, 1],
            stack: 'female'
        }, {
            name: 'Janet',
            data: [3, 0, 4, 4, 3],
            stack: 'female'
   }];     
      
   var json = {};   
   json.chart = chart; 
   json.title = title;   
   json.xAxis = xAxis;
   json.yAxis = yAxis;  
   json.plotOptions = plotOptions;
   json.credits = credits;
   json.series = series;
   $('#container').highcharts(json);
  
});
</script>
</body>
</html>

Das Ausgabeergebnis des obigen Beispiels ist:

Highcharts Säulendiagramm

Weitere Erweiterungen