Highcharts 使用区间和线的区域图

最新推荐文章于 2022-11-13 09:21:50 发布

chengqiuming

最新推荐文章于 2022-11-13 09:21:50 发布

阅读量1k

点赞数

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

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

版权

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>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {
    var ranges = [
      [1246406400000, 14.3, 27.7],
      [1246492800000, 14.5, 27.8],
      [1246579200000, 15.5, 29.6],
      [1246665600000, 16.7, 30.7],
      [1246752000000, 16.5, 25.0],
      [1246838400000, 17.8, 25.7],
      [1246924800000, 13.5, 24.8],
      [1247011200000, 10.5, 21.4],
      [1247097600000, 9.2, 23.8],
      [1247184000000, 11.6, 21.8],
      [1247270400000, 10.7, 23.7],
      [1247356800000, 11.0, 23.3],
      [1247443200000, 11.6, 23.7],
      [1247529600000, 11.8, 20.7],
      [1247616000000, 12.6, 22.4],
      [1247702400000, 13.6, 19.6],
      [1247788800000, 11.4, 22.6],
      [1247875200000, 13.2, 25.0],
      [1247961600000, 14.2, 21.6],
      [1248048000000, 13.1, 17.1],
      [1248134400000, 12.2, 15.5],
      [1248220800000, 12.0, 20.8],
      [1248307200000, 12.0, 17.1],
      [1248393600000, 12.7, 18.3],
      [1248480000000, 12.4, 19.4],
      [1248566400000, 12.6, 19.9],
      [1248652800000, 11.9, 20.2],
      [1248739200000, 11.0, 19.3],
      [1248825600000, 10.8, 17.8],
      [1248912000000, 11.8, 18.5],
      [1248998400000, 10.8, 16.1]
   ];
   var averages = [
      [1246406400000, 21.5],
      [1246492800000, 22.1],
      [1246579200000, 23],
      [1246665600000, 23.8],
      [1246752000000, 21.4],
      [1246838400000, 21.3],
      [1246924800000, 18.3],
      [1247011200000, 15.4],
      [1247097600000, 16.4],
      [1247184000000, 17.7],
      [1247270400000, 17.5],
      [1247356800000, 17.6],
      [1247443200000, 17.7],
      [1247529600000, 16.8],
      [1247616000000, 17.7],
      [1247702400000, 16.3],
      [1247788800000, 17.8],
      [1247875200000, 18.1],
      [1247961600000, 17.2],
      [1248048000000, 14.4],
      [1248134400000, 13.7],
      [1248220800000, 15.7],
      [1248307200000, 14.6],
      [1248393600000, 15.3],
      [1248480000000, 15.3],
      [1248566400000, 15.8],
      [1248652800000, 15.2],
      [1248739200000, 14.8],
      [1248825600000, 14.4],
      [1248912000000, 15],
      [1248998400000, 13.6]
   ];
   //主标题
   var title = {
      text: '七月温度'
   };
   // X 轴
   var xAxis = {
      type: 'datetime'
   };
   // Y 轴
   var yAxis = {
      title: {
         text: null
      }
   };
   // 提示
   var tooltip = {
       shared: true,
      crosshairs: true,
       valueSuffix: '\xB0C'
   };
   var legend = {
   }
   // 数据
   var series= [
        {
            name: '温度',
            data: averages,  //平均温度
            zIndex: 1,
            marker: {
                fillColor: 'white',
                lineWidth: 2,
                lineColor: Highcharts.getOptions().colors[0]
            }
        },
        {
            name: 'Range',
            data: ranges,    //温度范围
            type: 'arearange',
            lineWidth: 0,
            linkedTo: ':previous',
            color: Highcharts.getOptions().colors[0],
            fillOpacity: 0.3,
            zIndex: 0
        }
   ];
   var json = {};
   json.title = title;
   json.xAxis = xAxis;
   json.yAxis = yAxis;
   json.tooltip = tooltip;
   json.legend = legend;
   json.series = series;
   $('#container').highcharts(json);
});

</script>
</body>
</html>

二运行结果

chengqiuming

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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&quo
复制链接

扫一扫