Highcharts 区间面积图 - 学习 Hightcharts

下面图表演示了 Highcharts 区间面积图 的使用

配置

将属性 chart.type 设置为 arearange 即可显示区间面积图

var chart = {
   type: 'arearange'  
};

范例

下面的代码列出了 Highcharts 区间面积图 的基本配置

<!doctype html>
<meta charset="utf-8" />
<title>Highcharts 基础教程 | 简单教程(www.twle.cn)</title>
<script src="https://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script src="https://cdn.hcharts.cn/highcharts/highcharts-more.js"></script>   
<script src="https://cdn.hcharts.cn/highcharts/modules/data.js"></script>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<div id="container" style="width: 500px; height: 400px; margin: 0 auto"></div>
<script>

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 options = {};

options.chart = chart;
options.title = title;
options.xAxis = xAxis;
options.yAxis = yAxis;
options.legend = legend;


$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=range.json&callback=?', function (data) {
      var series= [{
         name: 'Temperatures',
         data: data
         }
      ];     
    options.series = series;
    var chart = Highcharts.chart('container',options);
})

</script>

运行范例 »

以上范例输出如下