Highcharts gráfico de columnas de diseño fijo

Highcharts gráfico de columnas

El siguiente ejemplo demuestra un gráfico de columnas de diseño fijo.

Ya hemos aprendido la sintaxis básica de configuración de Highcharts en los capítulos anteriores. A continuación, veamos otras configuraciones. Agregue las configuraciones pointPlacement y pointPadding en series.

series.pointPadding

Controla el valor de distancia entre cada columna. Cuando el ancho del gráfico Highcharts es fijo, cuanto mayor sea este valor, menor será el ancho de las columnas, y viceversa. El valor predeterminado es 0.1.

series.pointPlacement

En un gráfico de columnas, cuando pointPlacement se establece en "on", los puntos en el eje X no tienen espacio. Si pointPlacement se establece en "between", las columnas se distribuyen según las marcas (ticks).

En versiones posteriores a Highcharts 3.0.2, pointPlacement admite números. 0 es el valor en el eje, -0.5 es el intervalo entre el valor actual y el anterior, y 0.5 es el intervalo entre el valor actual y el siguiente. A diferencia de las opciones de configuración de texto, la configuración numérica no afecta el intervalo entre los ejes.

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

Ejemplo

Nombre de archivo: highcharts_column_fixed.htm

<html>
<head>
<title>Highcharts 教程 | Ejemplo(example.com)</title>
   <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
   <script src="http://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>

El resultado del ejemplo anterior es:

Highcharts gráfico de columnas

Otras extensiones