Latest web development tutorials

Highcharts gestapeltes Säulendiagramm

Highcharts Säulendiagramm Highcharts Säulendiagramm

Das folgende Beispiel zeigt gestapelte Säulendiagramm.

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'
         }
      }
   }
};

Beispiele

Dateiname: 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>

Das obige Beispiel Ausgabe lautet:

Highcharts Säulendiagramm Highcharts Säulendiagramm