Latest web development tutorials

Highcharts gestapeltes Säulendiagramm Gruppe

Highcharts Säulendiagramm Highcharts Säulendiagramm

Das folgende Beispiel zeigt gestapelte Säulendiagramm Gruppe.

Im vorigen Abschnitt wissen wir bereits Highcharts Basiskonfiguration Syntax. Schauen wir uns die anderen Konfigurationen zu suchen. Fügen Sie Eigenschaften in plotOptions in Stapeln:

Konfiguration

plotOptions: Datenpunktoptionen

plotOptions verwendet, um die Diagrammdatenpunkte bezogenen Eigenschaften einzustellen. plotOptions Nach verschiedenen Diagrammtypen, stellen ihre Eigenschaften etwas anders.

Diagramm Stapel Konfigurationseinstellungen plotOptions.area.stacking als "Prozent". Wenn Sie Stack Verwendung null deaktivieren. 

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

Serie Datenspalte Artikel Konfiguration

Konfiguration in einem Stapel für jede entsprechende Datenspalte Element. 

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

Beispiele

Dateiname: highcharts_column_rotated.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: '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 obige Beispiel Ausgabe lautet:

Highcharts Säulendiagramm Highcharts Säulendiagramm