Highcharts - Gráfico de área de porcentaje

Ya hemos visto la configuración utilizada para dibujar un gráfico en el capítulo Sintaxis de configuración de Highcharts . A continuación se muestra un ejemplo de un gráfico de área porcentual.

Comprendamos configuraciones adicionales aquí. Hemos agregado el atributo de apilamiento en plotoptions.

plotOptions

PlotOptions es un objeto contenedor para objetos de configuración para cada tipo de serie. Los objetos de configuración para cada serie también se pueden anular para cada elemento de la serie como se indica en la matriz de series. Esto es para apilar los valores de cada serie uno encima del otro.

Configure el apilado del gráfico usando plotOptions.area.stackingcomo "porcentaje". Los valores posibles son nulos, lo que deshabilita el apilamiento, "normal" apila por valor y "porcentaje" apila el gráfico por porcentajes.

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

Ejemplo

highcharts_area_percentage.htm

<html>
   <head>
      <title>Highcharts Tutorial</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
      <script src = "https://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>

Resultado

Verifique el resultado.

↰ Previous page