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

第一步：引入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>

测试链接：https://www.hcharts.cn/demo/highcharts/columnrange

Highcharts柱形范围图使用示例的更多相关文章

  1. highcharts 柱形堆叠图

    <!doctype html> <html lang="en"> <head> <script type="text/javas ...

  2. 可视化操作，实现横向柱形echart图 无边框

    图片的实现: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti ...

  3. Highcharts 柱图 每个柱子外围的白色边框

    Highcharts 柱图中每条柱外会有默认白色的边框, 去边框代码如下: plotOptions: { bar: { borderColor: "",//去边框 } }

  4. HighChartS cpu利用率动态图（Java版）

    来源:http://www.cnblogs.com/haifg/p/3217699.html   最近项目需要监控服务器cpu的利用率,并做成动态图.在网上查找了一些资料,最终选择了HighChart ...

  5. [Swift通天遁地]三、手势与图表-(12)创建复合图表：包含线性图表和柱形图表

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  6. HighCharts之2D面积图

    HighCharts之2D面积图  1.HighCharts之2D面积图源码 <!DOCTYPE html> <html> <head> <meta char ...

  7. HighCharts之2D折线图

    HighCharts之2D折线图 1.HighCharts之2D折线图源码 line.html: <!DOCTYPE html> <html> <head> < ...

  8. HighCharts之2D金字塔图

    HighCharts之2D金字塔图 1.实例源码 Pyramid.html: <!DOCTYPE html> <html> <head> <meta char ...

  9. HighCharts之2D半圆环图

    HighCharts之2D半圆环图 1.实例源码 HalfDonut.html: <!DOCTYPE html> <html> <head> <meta ch ...

随机推荐

  1. tensorflow-gpu

    1.Cuda 查看Cuda支持的GPU型号:https://developer.nvidia.com/cuda-gpus 下载cuda:https://developer.nvidia.com/cud ...

  2. 【cdoj 1544】当咸鱼也要按照基本法

    [题目链接]:http://acm.uestc.edu.cn/#/problem/show/1544 [题意] [题解] 容斥原理题; 1..(2^m)-1枚举 设k为其二进制形式中1的个数; k为奇 ...

  3. Canvas与Paint的0基础使用

    看了非常多android自己定义方面的资料,了解了非常多原理,遇到人家自己定义的东西也可以看得懂,可是.当自己去自己定义的时候.发现脑袋一片空白,所以就先从认识Canvas和Paint開始吧! Can ...

  4. 【JavaScript】分秒倒计时器

    一.基本目标 在JavaScript设计一个分秒倒计时器,一旦时间完毕使button变成不可点击状态 详细效果例如以下图.为了说明问题.调成每50毫秒也就是每0.05跳一次表, 真正使用的时候,把wi ...

  5. HDU 1730 Northcott Game

    简单的尼姆博弈.想到了非常easy! 就拿一行举例.怎么赢.? 就是死劲挨着对方移,当然假设本身就是挨着的,又轮到你移动了,那么对于这一行来讲.你就是输的!! 由此可见每一行的棋子起始距离就显得尤为重 ...

  6. ECharts简单入门

    图1和图2是手机上显示的效果, 图3是电脑浏览器显示的效果. 如何使用ECharts? 1.下载echarts.js 2.引入echarts.js <script type="text ...

  7. HDU 4349 Xiao Ming's Hope 组合数学

    题意:给你n,问在C(n,1),C(n,2)...C(n,n)中有多少个奇数. 比赛的时候打表看出规律,这里给一个数学上的说明. Lucas定理:A,B非负整数,p是质数,A,B化为p进制分别为a[n ...

  8. vue 指令的用法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. excel操作小技巧

    excel拼接sql语句时,时间格式问题 问题:若直接插入时间的单元格 :="insert into t_entity_car (create_time,name,age) value (' ...

  10. Flex之登录界面

    制作登录框界面 环境搭建:MyEclipse 6.5+Flex Builder 3 Plug-in <?xml version="1.0" encoding="ut ...