Highcharts - Gráfico de área usando rangos

A continuación se muestra un ejemplo de un gráfico de área que usa rangos de uso.

Ya hemos visto la configuración utilizada para dibujar un gráfico en el capítulo Sintaxis de configuración de Highcharts . Ahora, veamos un ejemplo de un gráfico de área que usa rangos. También veremos configuraciones adicionales.

Hemos cambiado el atributo de tipo en el gráfico.

gráfico

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

var chart = {
   type: 'arearange'  
};

Ejemplo

highcharts_area_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/modules/data.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: 'arearange',
               zoomType: 'x'	  
            };
            var title = {
               text: 'Temperature variation by day'   
            };    
            var xAxis = {
               type: 'datetime'     
            };
            var yAxis = {
               title: {
                  text: null
               }      
            };
            var tooltip = {
               shared: true,
               crosshairs: true,
               valueSuffix: '\xB0C'
            };
            var legend = {
               enabled: false
            }    
      
            var json = {};   
            json.chart = chart; 
            json.title = title;    
            json.xAxis = xAxis;
            json.yAxis = yAxis;
            json.legend = legend;     
   
            $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=range.json&callback=?',
            function (data) {
               var series = [{
                  name: 'Temperatures',
                  data: data
               }];     
               json.series = series;
               $('#container').highcharts(json);
            });    
         });
      </script>
   </body>
</html>

Resultado

Verifique el resultado.

↰ Previous page