功能需求：统计三种不同的状态在一天的时间段里面所占的范围
第一步：引入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="width: 600px;height:400px;"></div>
第三步
具体示例代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>三分钟上手Highcharts 图表</title> </head> <body> <!-- 图表容器 DOM --> <div id="container" style="width: 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>
