Latest web development tutorials

peta area Interval Highcharts

peta area Highcharts peta area Highcharts

Contoh berikut menunjukkan grafik daerah jangkauan.

Pada bagian sebelumnya kita sudah tahu sintaks konfigurasi dasar Highcharts. Mari kita lihat konfigurasi lainnya. Memodifikasi atribut jenis bagan.

konfigurasi grafik

Grafik dari jenis atribut diatur ke arearange, chart.type menggambarkan jenis bagan. Nilai default adalah "line". 

var chart = {
   type: 'arearange'  
};

contoh

File name: 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>

Contoh di atas output:

peta area Highcharts peta area Highcharts