Diagramme à colonnes empilées Highcharts

L'exemple suivant illustre un graphique à barres groupées empilées.

Dans les chapitres précédents, nous avons appris la syntaxe de configuration de base de Highcharts. Voyons maintenant d'autres configurations. Ajoutez l'attribut stacking dans plotOptions :

Configuration

plotOptions: options des points de données

plotOptions est utilisé pour définir les propriétés liées aux points de données dans le graphique. Les paramètres de propriétés de plotOptions varient légèrement selon le type de graphique.

Configurez l'empilement du graphique en définissant plotOptions.area.stacking sur "percent". Si l'empilement est désactivé, utilisez null.

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

configuration des éléments de données de série

Configurez chaque élément de colonne de données correspondant dans le groupe empilé.

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

Exemple

Nom du fichier : 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>

Le résultat de sortie de l'exemple ci-dessus est :

Diagramme à colonnes Highcharts

autres extensions