Gráfico de columnas con ubicación fija

A continuación se muestra un ejemplo de un gráfico de columnas con una ubicación fija.

Ya hemos visto la configuración utilizada para dibujar un gráfico en el capítulo Sintaxis de configuración de Highcharts . Veamos ahora configuraciones adicionales y también cómo hemos agregadopointPlacement y pointPadding bajo serie.

A continuación se ofrece un ejemplo de gráfico de columnas con ubicación fija.

series.pointPadding

Relleno entre cada columna o barra, en unidades del eje x; este valor predeterminado es 0,1.

series.pointPlacement

En un gráfico de columnas, cuando pointPlacement está "activado", el punto no creará ningún relleno en el eje X. En un gráfico de columnas polares, esto significa que la primera columna apunta directamente al norte. Si pointPlacement está "entre", las columnas se distribuirán entre marcas. Esto puede resultar útil para visualizar una cantidad entre dos puntos en el tiempo o en un determinado sector de un gráfico polar.

Desde Highcharts 3.0.2, la ubicación de los puntos también puede ser numérica, donde 0 está en el valor del eje, -0,5 está entre este valor y el anterior y 0,5 está entre este valor y el siguiente. A diferencia de las opciones textuales, las opciones de ubicación de puntos numéricos no afectarán el relleno del eje.

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

Ejemplo

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

Verifica el resultado.

↰ Previous page