功能需求：统计三种不同的状态在一天的时间段里面所占的范围
图片.png
第一步：引入highcharts.js和highcharts-more.js文件
引入文件文件源码：下载https://img.hcharts.cn/highcharts/highcharts-more.js
<!-- 引入highcharts.js和highcharts-more.js文件 -->
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script src="js/highcharts-more.js"></script>
第二步：
<!-- 图表容器 DOM -->
<div id="container" style=" 600px;height:400px;"></div>
第三步
具体示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三分钟上手Highcharts 图表</title>
</head>
<body>
<!-- 图表容器 DOM -->
<div id="container" style=" 600px;height:400px;"></div>
<!-- 引入 highcharts.js -->
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script src="js/highcharts-more.js"></script>
<script>
// 图表配置
var options = {
chart: {
type: 'columnrange', // columnrange 依赖 highcharts-more.js
inverted: true
},
title: {
text: '智能床垫变化范围'
},
subtitle: {
text: '智能床垫'
},
xAxis: {
categories: ['深睡眠', '浅睡眠', '醒着的']
},
yAxis: {
title: {
text: '时间 ( h )'
}
},
tooltip: {
valueSuffix: 'h'
},
plotOptions: {
columnrange: {
dataLabels: {
enabled: true,
formatter: function () {
return this.y + 'h';
}
}
}
},
legend: {
enabled: false
},
series: [{
name: '温度',
data: [
[1, 2],
[2, 5],
[5, 9],
]
}]
};
// 图表初始化函数
var chart = Highcharts.chart('container', options);
</script>
</body>
</html>
测试链接：https://www.hcharts.cn/demo/highcharts/columnrange
原文作者：祈澈姑娘
原文链接：https://www.jianshu.com/u/05f416aefbe1创作不易，转载请告知
90后前端妹子，爱编程，爱运营，爱折腾。坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。