Highcharts - Gráfico de barras apiladas

A continuación se muestra un ejemplo de un gráfico de barras básico.

Ya hemos visto la mayor parte de la configuración utilizada para dibujar un gráfico en el capítulo Sintaxis de configuración de Highcharts . A continuación se ofrece un ejemplo de gráfico de barras básico.

Configuraciones

Veamos ahora las configuraciones / pasos adicionales realizados.

plotOptions

Configure el apilado del gráfico usando plotOptions.series.stacking como "normal". Los valores posibles son nulos que deshabilita el apilamiento, "normal" apila por valor y "porcentaje" apila la serie por porcentajes.

var plotOptions = {
   series: {
      stacking: 'normal'
   }
};

Ejemplo

highcharts_bar_basic.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: 'bar'
            };
            var title = {
               text: 'Historic World Population by Region'   
            };
            var subtitle = {
               text: 'Source: Wikipedia.org'  
            };
            var xAxis = {
               categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
               title: {
                  text: null
               }
            };
            var yAxis = {
               min: 0,
               title: {
                  text: 'Population (millions)',
                  align: 'high'
               },
               labels: {
                  overflow: 'justify'
               }
            };
            var tooltip = {
               valueSuffix: ' millions'
            };
            var plotOptions = {
               bar: {
                  dataLabels: {
                     enabled: true
                  }
               },
               series: {
                  stacking: 'normal'
               }
            };
            var legend = {
               layout: 'vertical',
               align: 'right',
               verticalAlign: 'top',
               x: -40,
               y: 100,
               floating: true,
               borderWidth: 1,
               
               backgroundColor: (
                  (Highcharts.theme && Highcharts.theme.legendBackgroundColor)
                  || '#FFFFFF'),
               shadow: true
            };
            var credits = {
               enabled: false
            };
            var series = [
               {
                  name: 'Year 1800',
                  data: [107, 31, 635, 203, 2]
               }, 
               {
                  name: 'Year 1900',
                  data: [133, 156, 947, 408, 6]
               }, 
               {
                  name: 'Year 2008',
                  data: [973, 914, 4054, 732, 34]      
               }
            ];
      
            var json = {};   
            json.chart = chart; 
            json.title = title;   
            json.subtitle = subtitle; 
            json.tooltip = tooltip;
            json.xAxis = xAxis;
            json.yAxis = yAxis;  
            json.series = series;
            json.plotOptions = plotOptions;
            json.legend = legend;
            json.credits = credits;
            $('#container').highcharts(json);
         });
      </script>
   </body>
   
</html>

Resultado

Verifique el resultado.

↰ Previous page