Highcharts-Bereichsflächendiagramm

Highcharts Flächendiagramm

Das folgende Beispiel veranschaulicht ein Bereichsflächendiagramm.

In den vorherigen Kapiteln haben wir die grundlegende Konfigurationssyntax von Highcharts kennengelernt. Als Nächstes sehen wir uns andere Konfigurationen an. Ändern Sie das Attribut type in chart.

Chart-Konfiguration

Setzen Sie das type-Attribut des Diagramms auf arearange. chart.type beschreibt den Diagrammtyp. Der Standardwert ist "line".

var chart = {
   type: 'arearange'  
};

Beispiel

Dateiname: highcharts_area_range.htm

<html>
<head>
<title>Highcharts 教程 | Example(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>

Selbst ausprobieren »

Die Ausgabe des obigen Beispiels ist:

Highcharts Flächendiagramm