Highcharts gestapeltes Säulendiagramm mit Prozentangaben

Highcharts Säulendiagramm

Das folgende Beispiel demonstriert ein gestapeltes Säulendiagramm mit Prozentangaben.

In den vorherigen Kapiteln haben wir die grundlegende Konfigurationssyntax von Highcharts kennengelernt. Als Nächstes sehen wir uns andere Konfigurationen an. Fügen Sie die Eigenschaft 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 Stapelungseinstellung des Diagramms plotOptions.area.stacking auf "percent". Wenn die Stapelung deaktiviert ist, verwenden Sie null.

var plotOptions = {
   column: {
      stacking: 'percent'      
   }
};

Beispiel

Dateiname: highcharts_column_percentage.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: '堆叠柱形图' 
   };    
   var xAxis = {
      categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
   };
   var yAxis ={
      min: 0,
      title: {
        text: '水果总消费量'
      }
   };  
   var tooltip = {
      pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
      shared: true
   };
   var plotOptions = {
      column: {
         stacking: 'percent'        
      }
   };
   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.tooltip = tooltip;
   json.plotOptions = plotOptions;
   json.credits = credits;
   json.series = series;
   $('#container').highcharts(json);
  
});
</script>
</body>
</html>

Selbst ausprobieren »

Das Ausgabeergebnis des obigen Beispiels ist:

Highcharts Säulendiagramm