Highcharts 区间区域图

最新推荐文章于 2022-02-23 10:27:34 发布

chengqiuming

最新推荐文章于 2022-02-23 10:27:34 发布

阅读量499

点赞数

分类专栏： Highcharts 文章标签： Highcharts

本文链接：https://blog.csdn.net/chengqiuming/article/details/85008097

版权

Highcharts 专栏收录该内容

58 篇文章 0 订阅

订阅专栏

一代码

<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 区间区域图</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: '逐日气温变化'
   };
   // X 轴类型
   var xAxis = {
      type: 'datetime'
   };
   // Y 轴
   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>

二运行结果

chengqiuming

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Highcharts 区间区域图

一代码&lt;html&gt;&lt;head&gt;&lt;meta charset="UTF-8" /&gt;&lt;title&gt;Highcharts 区间区域图&lt;/title&gt; &lt;script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"&gt;&am
复制链接

扫一扫