Highcharts 标示区曲线图

最新推荐文章于 2023-09-09 08:38:44 发布

chengqiuming

最新推荐文章于 2023-09-09 08:38:44 发布

阅读量486

点赞数

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

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

版权

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>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {
   //图表类型
   var chart = {
      type: 'spline'
   };
   //标题
   var title = {
      text: '2天的风速'
   };
   //子标题
   var subtitle = {
      text: '2009年10月6号和7号，地点索恩，挪威'
   };
   //X轴
   var xAxis = {
      type: 'datetime',
      labels: {
         overflow: 'justify'
      }
   };
   //Y轴
   var yAxis = {
      title: {
         text: '风速 (m/s)'
      },
      min: 0,
      minorGridLineWidth: 0,
      gridLineWidth: 0,
      alternateGridColor: null,
      //使用 yAxis.plotBands 属性来配置标示区。区间范围使用 'from' 和 'to' 属性。
      //颜色设置使用 'color' 属性。标签样式使用 'label' 属性。
      plotBands: [{ // 一级风
         from: 0.3,
         to: 1.5,
         color: 'rgba(68, 170, 213, 0.1)',
         label: {
            text: '一级风',
            style: {
               color: '#606060'
            }
         }
      }, { // 二级风
         from: 1.5,
         to: 3.3,
         color: 'rgba(0, 0, 0, 0)',
         label: {
            text: '二级风',
            style: {
               color: '#606060'
            }
         }
      }, { // 三级风
         from: 3.3,
         to: 5.5,
         color: 'rgba(68, 170, 213, 0.1)',
         label: {
            text: '三级风',
            style: {
               color: '#606060'
            }
         }
      }, { // 四级风
         from: 5.5,
         to: 8,
         color: 'rgba(0, 0, 0, 0)',
         label: {
            text: '四级风',
            style: {
               color: '#606060'
            }
         }
      }, { // 五级风
         from: 8,
         to: 11,
         color: 'rgba(68, 170, 213, 0.1)',
         label: {
            text: '五级风',
            style: {
               color: '#606060'
            }
         }
      }, { // 六级风
         from: 11,
         to: 14,
         color: 'rgba(0, 0, 0, 0)',
         label: {
            text: '六级风',
            style: {
               color: '#606060'
            }
         }
      }, { // 七级风
         from: 14,
         to: 15,
         color: 'rgba(68, 170, 213, 0.1)',
         label: {
            text: '七级风',
            style: {
               color: '#606060'
            }
         }
      }]
   };
   //提示
   var tooltip = {
      valueSuffix: ' m/s'
   };
   //数据点选项
   var plotOptions = {
      spline: {
         lineWidth: 4,
         states: {
            hover: {
               lineWidth: 5
            }
         },
         marker: {
            enabled: false
         },
         pointInterval: 3600000, // one hour
         pointStart: Date.UTC(2009, 9, 6, 0, 0, 0)
      }
   };
   var series= [{
         name: '索恩',
         data: [4.3, 5.1, 4.3, 5.2, 5.4, 4.7, 3.5, 4.1, 5.6, 7.4, 6.9, 7.1,
         7.9, 7.9, 7.5, 6.7, 7.7, 7.7, 7.4, 7.0, 7.1, 5.8, 5.9, 7.4,
         8.2, 8.5, 9.4, 8.1, 10.9, 10.4, 10.9, 12.4, 12.1, 9.5, 7.5,
         7.1, 7.5, 8.1, 6.8, 3.4, 2.1, 1.9, 2.8, 2.9, 1.3, 4.4, 4.2,
         3.0, 3.0]
      }, {
         name: '挪威',
         data: [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.1, 0.0, 0.3, 0.0,
         0.0, 0.4, 0.0, 0.1, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0,
         0.0, 0.6, 1.2, 1.7, 0.7, 2.9, 4.1, 2.6, 3.7, 3.9, 1.7, 2.3,
         3.0, 3.3, 4.8, 5.0, 4.8, 5.0, 3.2, 2.0, 0.9, 0.4, 0.3, 0.5, 0.4]
   }];
   var navigation = {
      menuItemStyle: {
         fontSize: '10px'
      }
   }

   var json = {};
   json.chart = chart;
   json.title = title;
   json.subtitle = subtitle;
   json.tooltip = tooltip;
   json.xAxis = xAxis;
   json.yAxis = yAxis;
   json.series = series;
   json.plotOptions = plotOptions;
   json.navigation = navigation;
   $('#container').highcharts(json);

});
</script>
</body>
</html>

二运行结果

chengqiuming

关注

0
点赞
踩
1

收藏

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

扫一扫

专栏目录