Graphique en aires empilées Highcharts

L'exemple suivant illustre un graphique en aires 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 la propriété stacking dans plotOptions :

Configuration

plotOptions : Options des points de données

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

Définissez l'option d'empilement du graphique plotOptions.area.stacking sur "normal". Utilisez null pour désactiver l'empilement. Si la valeur est "percent", l'empilement est calculé en pourcentage.

var plotOptions = {
   area: {
      stacking: 'normal',
      lineColor: '#666666',
      lineWidth: 1,
      marker: {
         lineWidth: 1,
         lineColor: '#666666'
      }
   }
};

Exemple

Nom du fichier : highcharts_area_stacked.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: 'area'
   };
   var title = {
      text: 'Historic and Estimated Worldwide Population Growth by Region'   
   }; 
   var subtitle = {
      text: 'Source: Wikipedia.org'
   };
   var xAxis = {
      categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
      tickmarkPlacement: 'on',
      title: {
         enabled: false
      }
   };
   var yAxis = {
      title: {
         text: 'Billions'
      },
      labels: {
         formatter: function () {
            return this.value / 1000;
         }
      }
   };
   var tooltip = {
      shared: true,
      valueSuffix: ' millions'
   };
   var plotOptions = {
      area: {
         stacking: 'normal',
         lineColor: '#666666',
         lineWidth: 1,
         marker: {
            lineWidth: 1,
            lineColor: '#666666'
         }
      }
   };
   var credits = {
      enabled: false
   };
   var series= [{
       name: 'Asia',
            data: [502, 635, 809, 947, 1402, 3634, 5268]
        }, {
            name: 'Africa',
            data: [106, 107, 111, 133, 221, 767, 1766]
        }, {
            name: 'Europe',
            data: [163, 203, 276, 408, 547, 729, 628]
        }, {
            name: 'America',
            data: [18, 31, 54, 156, 339, 818, 1201]
        }, {
            name: 'Oceania',
            data: [2, 2, 2, 6, 13, 30, 46]
      }
   ];     
      
   var json = {};   
   json.chart = chart; 
   json.title = title; 
   json.subtitle = subtitle; 
   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 :

Graphique en aires Highcharts

autres extensions