Gráfico de colunas empilhadas com porcentagens

A seguir está um exemplo de um Gráfico de colunas empilhadas com porcentagens.

Já vimos a configuração usada para desenhar um gráfico no capítulo Highcharts Configuration Syntax . Vamos agora ver as configurações adicionais e também como adicionamos o atributo de empilhamento nas opções de plotagem.

Um exemplo de gráfico de colunas empilhadas com porcentagens é fornecido a seguir.

plotOptions

O plotOptions é um objeto wrapper para objetos de configuração para cada tipo de série. Os objetos de configuração para cada série também podem ser substituídos para cada item da série, conforme fornecido na matriz da série. Isso é para empilhar os valores de cada série uns sobre os outros.

Configure o empilhamento do gráfico usando plotOptions.column.stacking como "porcentagem". Os valores possíveis são nulos, o que desativa o empilhamento, pilhas "normais" por valor e "porcentagem" pilhas o gráfico por porcentagens.

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

Exemplo

highcharts_column_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: 'column'
            };
            var title = {
               text: 'Stacked column chart'   
            };    
            var xAxis = {
               categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
            };
            var yAxis = {
               min: 0,
               title: {
                  text: 'Total fruit consumption'
               }
            };  
            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>

Resultado

Verifique o resultado.

↰ Previous page