Highcharts gráfico de área apilada porcentual

Highcharts gráfico de área

El siguiente ejemplo demuestra un gráfico de área apilada porcentual.

Ya hemos aprendido la sintaxis básica de configuración de Highcharts en los capítulos anteriores. Ahora veamos otras configuraciones. Agregue la propiedad stacking en plotOptions:

---

Configuración

plotOptions: opciones de puntos de datos

plotOptions se utiliza para configurar las propiedades relacionadas con los puntos de datos en el gráfico. Las configuraciones de propiedades de plotOptions varían ligeramente según el tipo de gráfico.

Configure la propiedad de apilado del gráfico plotOptions.area.stacking como "percent". Use null para deshabilitar el apilado.

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

Ejemplo

Nombre de archivo: highcharts_area_percentage.htm

<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | Ejemplo(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: 'percent',
         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>

El resultado del ejemplo anterior es:

Highcharts gráfico de área

Otras extensiones