Latest web development tutorials

Highcharts Intervall Karte

Highcharts Karte Highcharts Karte

Die folgenden Beispiele zeigen den Bereich Flächendiagramm.

Im vorigen Abschnitt wissen wir bereits Highcharts Basiskonfiguration Syntax. Schauen wir uns die anderen Konfigurationen zu suchen. Ändern Sie den Diagrammtyp-Attribut.

Chart-Konfiguration

Die Grafik des type-Attribut ist auf arearange, chart.type beschreibt den Diagrammtyp. Der Standardwert ist "Linie". 

var chart = {
   type: 'arearange'  
};

Beispiele

Dateiname: 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>

Das obige Beispiel Ausgabe lautet:

Highcharts Karte Highcharts Karte