Gráfico de colunas com posicionamento fixo

A seguir está um exemplo de um Gráfico de colunas com posicionamento fixo.

Já vimos a configuração usada para desenhar um gráfico no capítulo Highcharts Configuration Syntax . Vamos agora ver configurações adicionais e também como adicionamospointPlacement e pointPadding em série.

Um exemplo de Gráfico de colunas com posicionamento fixo é fornecido abaixo.

series.pointPadding

Preenchimento entre cada coluna ou barra, em unidades do eixo x; o padrão é 0,1.

series.pointPlacement

Em um gráfico de colunas, quando pointPlacement está "ativado", o ponto não criará nenhum preenchimento do eixo X. Em um gráfico de colunas polares, isso significa que a primeira coluna aponta diretamente para o norte. Se o pointPlacement estiver "entre", as colunas serão dispostas entre os tiques. Isso pode ser útil para visualizar uma quantidade entre dois pontos no tempo ou em um determinado setor de um gráfico polar.

Desde Highcharts 3.0.2, o posicionamento do ponto também pode ser numérico, onde 0 está no valor do eixo, -0,5 está entre este valor e o anterior e 0,5 está entre este valor e o próximo. Ao contrário das opções textuais, as opções de posicionamento de pontos numéricos não afetam o preenchimento do eixo.

series: {
   name: 'Employees',
   color: 'rgba(165,170,217,1)',
   data: [150, 73, 20],
   pointPadding: 0.3,
   pointPlacement: -0.2
}

Exemplo

highcharts_column_fixed.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: 'Efficiency Optimization by Branch'   
            };   
            var xAxis = {
               categories: ['Seattle HQ', 'San Francisco', 'Tokyo']
            };
            var yAxis = [
               {
                  min: 0,
                  title: {
                     text: 'Employees'
                  }
               }, 
               {
                  title: {
                     text: 'Profit (millions)'
                  },
                  opposite: true
               }
            ];
            var legend = {
               shadow: false
            };
            var tooltip = {
               shared: true
            };
            var credits = {
               enabled: false
            };
            var plotOptions = {
               column: {
                  grouping: false,
                  shadow: false,
                  borderWidth: 0
               }
            };
            var series = [
               {
                  name: 'Employees',
                  color: 'rgba(165,170,217,1)',
                  data: [150, 73, 20],
                  pointPadding: 0.3,
                  pointPlacement: -0.2
               }, 
               {
                  name: 'Employees Optimized',
                  color: 'rgba(126,86,134,.9)',
                  data: [140, 90, 40],
                  pointPadding: 0.4,
                  pointPlacement: -0.2
               }, 
               {
                  name: 'Profit',
                  color: 'rgba(248,161,63,1)',
                  data: [183.6, 178.8, 198.5],
                  
                  tooltip: {
                     valuePrefix: '$',
                     valueSuffix: ' M'
                  },
                  pointPadding: 0.3,
                  pointPlacement: 0.2,
                  yAxis: 1
               }, 
               {
                  name: 'Profit Optimized',
                  color: 'rgba(186,60,61,.9)',
                  data: [203.6, 198.8, 208.5],
                  
                  tooltip: {
                     valuePrefix: '$',
                     valueSuffix: ' M'
                  },
                  pointPadding: 0.4,
                  pointPlacement: 0.2,
                  yAxis: 1      
               }
            ];     
            var json = {};   
            json.chart = chart; 
            json.title = title; 
            json.xAxis = xAxis;
            json.yAxis = yAxis;
            json.credits = credits;
            json.legend = legend;
            json.tooltip = tooltip;
            json.plotOptions = plotOptions;
            json.series = series;
            $('#container').highcharts(json);
         });
      </script>
   </body>
   
</html>

Resultado

Verifique o resultado.

↰ Previous page