功能需求：统计三种不同的状态在一天的时间段里面所占的范围





Highcharts柱形范围图使用示例_html


图片.png


第一步：引入highcharts.js和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>