Highcharts - Gráfico de columnas usando rangos

A continuación se muestra un ejemplo de un gráfico de columnas que utiliza rangos.

Ya hemos visto la configuración utilizada para dibujar un gráfico en el capítulo Sintaxis de configuración de Highcharts .

A continuación se muestra un ejemplo de un gráfico de columnas que utiliza rangos.

Configuraciones

Veamos ahora configuraciones adicionales.

gráfico

Configure el tipo de gráfico para que esté basado en 'rango de columnas'. chart.typedecide el tipo de serie del gráfico. El valor predeterminado es "línea".

var chart = {
   type: 'columnrange',
   inverted: true
};

Ejemplo

highcharts_column_range.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>  
      <script src = "https://code.highcharts.com/highcharts-more.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: 'columnrange',
              inverted:true
            };
            var title = {
               text: 'Temperature variation by month'   
            };  
            var subtitle = {
               text: 'Observed in Vik i Sogn, Norway, 2009'   
            };  
            var xAxis = {
               categories: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug',
                  'Sep','Oct','Nov','Dec']      
            };
            var yAxis = {     
               title: {
                  text: 'Temperature ( \xB0C )'         
               }      
            };
            var tooltip = {
               headerFormat: '<span style = "font-size:10px">{point.key}</span><table>',
               pointFormat: '<tr><td style = "color:{series.color};padding:0">{series.name}: </td>' +
                  '<td style = "padding:0"><b>{point.y:.1f} mm</b></td></tr>',
               footerFormat: '</table>',
               shared: true,
               useHTML: true
            };
            var plotOptions = {
               columnrange: {
                  dataLabels: {
                     enabled: true,
                     formatter: function () {
                        return this.y + '\xB0C';
                     }
                  }
               }
            };  
            var credits = {
               enabled: false
            };
            var series = [{
               name: 'Temperatures',
               data: [
                  [-9.7, 9.4],
                  [-8.7, 6.5],
                  [-3.5, 9.4],
                  [-1.4, 19.9],
                  [0.0, 22.6],
                  [2.9, 29.5],
                  [9.2, 30.7],
                  [7.3, 26.5],
                  [4.4, 18.0],
                  [-3.1, 11.4],
                  [-5.2, 10.4],
                  [-13.5, 9.8]
               ]
            }];     
               
            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.credits = credits;
            $('#container').highcharts(json);
           
         });
      </script>
   </body>
   
</html>

Resultado

Verifica el resultado.

↰ Previous page