Diagramme à colonnes empilées Highcharts utilisant des pourcentages

L'exemple suivant illustre un diagramme à colonnes empilées utilisant des pourcentages.

Dans les chapitres précédents, nous avons appris la syntaxe de configuration de base de Highcharts. Voyons maintenant d'autres configurations. Ajoutez la propriété 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 le paramètre d'empilement du graphique plotOptions.area.stacking sur "percent". Si l'empilement est désactivé, utilisez null.

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

Exemple

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

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

Diagramme à colonnes Highcharts

autres extensions