Highcharts Gráfico de área de rango

Highcharts Gráfico de área

El siguiente ejemplo demuestra un gráfico de área de rango.

En los capítulos anteriores, ya hemos aprendido la sintaxis básica de configuración de Highcharts. A continuación, veamos otras configuraciones. Modifique el atributo type en chart.

Configuración de chart

Establezca el atributo type de chart a arearange. chart.type describe el tipo de gráfico. El valor predeterminado es "line".

var chart = {
   type: 'arearange'  
};

Ejemplo

Nombre de archivo: highcharts_area_range.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>  
   <script src="http://code.highcharts.com/highcharts-more.js"></script>   
   <script src="http://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>

El resultado del ejemplo anterior es:

Highcharts Gráfico de área

Otras extensiones