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

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. type与isinstance使用区别

    Python中,type与isinstance都可以用来判断变量的类型,但是type具有一定的适用性,用它来判断变量并不总是能够获取到正确的值. Python在定义变量的时候不用指明具体的的类型,解释 ...

  2. 第一章、zabbix安装

    前言: 注意:本文不涉及性能测试.性能优化中的监控,所有文字的出发点都是日常运维监控. 在开始之前,我们还是先统一下认识:要监控一个对象,需要掌握哪些东西呢? 监控对象的理解:要监控的对象你是否了解呢 ...

  3. minixml的安装教程

    最近想要实现对xml的解析,上网看到有很多库可以直接调用,例如minixml,tinyxml等,我选择了minixml(没有原因,纯属是因为这个找到了中文文档- -) 附上中文文档链接:https:/ ...

  4. ECNUOJ 2147 字符环

    字符环 Time Limit:1000MS Memory Limit:65536KBTotal Submit:562 Accepted:146 Description  字符环:就是将给定的一个字符串 ...

  5. hdu 1423 最长公共递增子序列 LCIS

    最长公共上升子序列(LCIS)的O(n^2)算法 预备知识:动态规划的基本思想,LCS,LIS. 问题:字符串a,字符串b,求a和b的LCIS(最长公共上升子序列). 首先我们可以看到,这个问题具有相 ...

  6. Android4.42-Settings源代码分析之蓝牙模块Bluetooth(上)

    继上一篇Android系统源代码剖析(一)---Settings 接着来介绍一下设置中某个模块的源代码.本文依然是基于Android4.42源代码进行分析,分析一下蓝牙模块的实现.建议大致看一下关于S ...

  7. 制作自己的特色PE----Mr.Zhang

    必备的文件和工具 win7.iso/win8.iso Windows系统ISO镜像 WimTool BOOT.WIM文件的改动 RegWorkShop 注冊表编辑和分析利器 UltraISO 改动wi ...

  8. Task Scheduler

    https://technet.microsoft.com/en-us/library/cc748993(v=ws.11).aspx#BKMK_winui If Task Scheduler is n ...

  9. Codefroces A. Saitama Destroys Hotel

    A. Saitama Destroys Hotel time limit per test 1 second memory limit per test 256 megabytes input sta ...

  10. Sandbox

    Sandbox Contents Overview Design principles Sandbox windows architecture The broker process The targ ...