根据业务需求，找到了这个很少使用的图形，话不多说，看看该如何使用。首先要引入支持文件：可根据链接下载。

exporting.js：https://img.hcharts.cn/highcharts/modules/exporting.js

xrange.js：https://img.hcharts.cn/highcharts/modules/xrange.js

<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>

<script src="js/exporting.js"></script>

<script src="js/xrange.js"></script>

具体示例代码如下：

<!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/exporting.js"></script>

        <script src="js/xrange.js"></script>

        <script>

            // 图表配置

            var options = {

                chart: {

                    type: 'xrange'

                },

                title: {

                    text: '简易甘特图'

                },

                xAxis: {

                    type: 'datetime',

                    dateTimeLabelFormats: {

                        week: '%Y/%m/%d'

                    }

                },

                yAxis: {

                    title: {

                        text: ''

                    },

                    categories: ['深睡眠', '浅睡眠', '醒着的'],

                    reversed: true

                },

                tooltip: {

                    dateTimeLabelFormats: {

                        day: '%Y/%m/%d'

                    }

                },

                series: [{

                    name: '睡眠检测',

                    // pointPadding: 0,

                    // groupPadding: 0,

                    borderColor: 'gray',

                    pointWidth: 20,

                    data: [{

                        x: Date.UTC(2014, 10, 21),

                        x2: Date.UTC(2014, 11, 2),

                        y: 0,

                        partialFill: 0.25

                    }, {

                        x: Date.UTC(2014, 11, 2),

                        x2: Date.UTC(2014, 11, 5),

                        y: 1

                    }, {

                        x: Date.UTC(2014, 11, 8),

                        x2: Date.UTC(2014, 11, 9),

                        y: 2

                    }, {

                        x: Date.UTC(2014, 11, 9),

                        x2: Date.UTC(2014, 11, 19),

                        y: 1

                    }, {

                        x: Date.UTC(2014, 11, 10),

                        x2: Date.UTC(2014, 11, 23),

                        y: 2

                    }],

                    dataLabels: {

                        enabled: true

                    }

                }]

            };

            // 图表初始化函数

            var chart = Highcharts.chart('container', options);

        </script>

    </body>

</html>

在线测试：https://www.hcharts.cn/demo/highcharts/x-range

在项目需求中，x轴要表示24小时之内的状态，不可以使用年月日坐标轴，需要使用时分秒，那么highcharts 怎么设置x轴时间格式？这个问题卡了好久，因为网上没有找到合适的方案，关于Highcharts图表的博客也不是很多，只能自己动手研究了

看完数据交互的文档，心中似乎有了答案，所以说啊，技术万变不离其宗，遇到问题，一定要反复研究api,这里有你想要的一切答案。关于数据交互：如果不懂x轴和y轴数据类型和格式，可以查看数据交互文档
https://www.hcharts.cn/docs/basic-series

另外

如果要去掉右下角highchart.com和右上角的打印及导出按钮

去掉右下角的highcharts.com需要加入以下内容：

    credits: {

              enabled:false

    },

如果不设置，那么默认为显示。

    exporting: {

                enabled:false

    },

原文作者：祈澈姑娘

原文链接：https://www.jianshu.com/u/05f416aefbe1创作不易，转载请告知

90后前端妹子，爱编程，爱运营，爱折腾。坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。

三分钟上手Highcharts简易甘特图的更多相关文章

  1. 在spring boot中三分钟上手apache顶级分布式链路追踪系统skywalking

    原文:https://juejin.im/post/5cd10e81e51d453b560f2d53 skywalking在apache里全票通过成为了apache顶级链路追踪系统 项目地址:gith ...

  2. 三分钟快速上手TensorFlow 2.0 （下）——模型的部署 、大规模训练、加速

    前文:三分钟快速上手TensorFlow 2.0 (中)——常用模块和模型的部署 TensorFlow 模型导出 使用 SavedModel 完整导出模型 不仅包含参数的权值,还包含计算的流程(即计算 ...

  3. 三分钟快速上手TensorFlow 2.0 （中）——常用模块和模型的部署

    本文学习笔记参照来源:https://tf.wiki/zh/basic/basic.html 前文:三分钟快速上手TensorFlow 2.0 (上)——前置基础.模型建立与可视化 tf.train. ...

  4. gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)

    前言   Excel功能强大,应用广泛.随着web应用的兴起和完善,用户的要求也越来越高.很多Excel的功能都搬到了sass里面.恨不得给他们做个Excel出来...程序员太难了... 去年我遇到了 ...

  5. 工作必备，五分钟如何搞定Excel甘特图

    工作必备,五分钟如何搞定Excel甘特图  https://www.sohu.com/a/212628821_641930 EXCEL中如何给图表添加标题 1.选中图表 >> [布局] 菜 ...

  6. 三分钟快速上手TensorFlow 2.0 （上）——前置基础、模型建立与可视化

    本文学习笔记参照来源:https://tf.wiki/zh/basic/basic.html 学习笔记类似提纲,具体细节参照上文链接 一些前置的基础 随机数 tf.random uniform(sha ...

  7. Excel技巧：如何绘制一份优秀的甘特图（项目管理）

    作者:秦路,天善智能特约专家.资深数据分析师,数据化运营专家.擅长结合运营和数据,建立数据化运营体系. 个人公众号:秦路(微信ID:tracykanc) 今天我给大家分享的内容是如何利用Excel绘制 ...

  8. Twproject Gantt开源甘特图功能扩展

    1.Twproject Gantt甘特图介绍 Twproject Gantt 是一款基于 jQuery 开发的甘特图组件,也可以创建其它图表,例如任务树(Task Trees).内置编辑.缩放和 CS ...

  9. ECharts数据图表系统？ 5分钟上手！

    目录: 前言 简介 方法一:模块化单文件引入(推荐) 方法二:标签式单文件引入 [前言] 最近在捣鼓各种插件各种框架,发现这个ECharts还是比较不错的,文档也挺全的,还是中文的,给大家推荐一下. ...

随机推荐

  1. bzoj1922 [SDOI2010]大陆争霸 分层图

    问题描述 幻想历8012年5月12日深夜,斯普林·布拉泽降下神谕:“Trust me, earn eternal life.”克里斯军团士气大增.作为克里斯军团的主帅,你决定利用这一机会发动奇袭,一举 ...

  2. POJ-2142 The Balance 扩展欧几里德（+绝对值和最小化）

    题目链接:https://cn.vjudge.net/problem/POJ-2142 题意 自己看题吧,懒得解释 思路 第一部分就是扩展欧几里德 接下来是根据 $ x=x_0+kb', y=y_0- ...

  3. caioj 1080 动态规划入门（非常规DP4：乘电梯）(dp数组更新其他量)

    我一开始是这么想的 注意这道题数组下标是从大到小推,不是一般的从小到大推 f[i]表示从最高层h到第i层所花的最短时间,答案为f[1] 那么显然 f[i] = f[j] + wait(j) + (j ...

  4. CMSIS-RTOS 简介

    CMSIS-RTOS API是基于Arm®Cortex®-M处理器的设备的通用RTOS接口.CMSIS-RTOS为需要RTOS功能的软件组件提供标准化API,从而为用户和软件行业带来了巨大的好处. C ...

  5. Spring学习详解（1）——Spring入门详解

    一:spring的基本用法: 1,关于spring容器: spring容器是Spring的核心,该 容器负责管理spring中的java组件, ApplicationContext ctx  = ne ...

  6. 打印机共享为什么老是出现“操作无法完成（错误 0X00000709）。再次检查打印机名称、并确保打印机连接网络

    这个情况应该是访问IP连接打印机才会出现的.解决办法:不使用IP访问,使用网上邻居找计算机名称再连接打印机即可. ------------------------------------------- ...

  7. vuex的mutations如何传多个传参?

    1.不传参时的写法(官网例子): const store = new Vuex.Store({ state: { count: 1 }, mutations: { increment (state) ...

  8. 应用层协议——HTTP

    HTTP: Client HTTP <--> 应用程序HTTP报文 <--> Server HTTP 应用程序 由TCP支持 Statelessprotocol:不会记录客户端 ...

  9. expr---计算工具

    expr命令是一款表达式计算工具,使用它完成表达式的求值操作. expr的常用运算符: 加法运算:+ 减法运算:- 乘法运算:\* 除法运算:/ 求摸(取余)运算:% 语法 expr(选项)(参数) ...

  10. 51nod 最大子矩阵和

    一个M*N的矩阵,找到此矩阵的一个子矩阵,并且这个子矩阵的元素的和是最大的,输出这个最大的值. 我们可以降维,枚举矩形的长,然后算出一个一维数组,然后就转化成了最大字段和问题 #include< ...