Latest web development tutorials

Highcharts mappa intervallo

Highcharts mappa Highcharts mappa

I seguenti esempi dimostrano il grafico ad area gamma.

Nella sezione precedente che già conosciamo Highcharts sintassi di configurazione di base. Diamo un'occhiata ad altre configurazioni. Modificare l'attributo tipo di grafico.

configurazione grafico

Il grafico dell'attributo tipo è impostato su arearange, chart.type descrive il tipo di grafico. Il valore di default è "linea". 

var chart = {
   type: 'arearange'  
};

Esempi

Nome file: highcharts_area_range.htm 

<html>
<head>
<title>Highcharts 教程 | 本教程(w3big.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>

L'output sopra esempio è:

Highcharts mappa Highcharts mappa