三分钟上手Highcharts简易甘特图
根据业务需求，找到了这个很少使用的图形，话不多说，看看该如何使用。首先要引入支持文件：可根据链接下载。
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>
在项目需求中，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简易甘特图的更多相关文章
- 在spring boot中三分钟上手apache顶级分布式链路追踪系统skywalking
原文:https://juejin.im/post/5cd10e81e51d453b560f2d53 skywalking在apache里全票通过成为了apache顶级链路追踪系统 项目地址:gith ...
- 三分钟快速上手TensorFlow 2.0 （下）——模型的部署 、大规模训练、加速
前文:三分钟快速上手TensorFlow 2.0 (中)——常用模块和模型的部署 TensorFlow 模型导出 使用 SavedModel 完整导出模型 不仅包含参数的权值,还包含计算的流程(即计算 ...
- 三分钟快速上手TensorFlow 2.0 （中）——常用模块和模型的部署
本文学习笔记参照来源:https://tf.wiki/zh/basic/basic.html 前文:三分钟快速上手TensorFlow 2.0 (上)——前置基础.模型建立与可视化 tf.train. ...
- gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
前言 Excel功能强大,应用广泛.随着web应用的兴起和完善,用户的要求也越来越高.很多Excel的功能都搬到了sass里面.恨不得给他们做个Excel出来...程序员太难了... 去年我遇到了 ...
- 工作必备，五分钟如何搞定Excel甘特图
工作必备,五分钟如何搞定Excel甘特图 https://www.sohu.com/a/212628821_641930 EXCEL中如何给图表添加标题 1.选中图表 >> [布局] 菜 ...
- 三分钟快速上手TensorFlow 2.0 （上）——前置基础、模型建立与可视化
本文学习笔记参照来源:https://tf.wiki/zh/basic/basic.html 学习笔记类似提纲,具体细节参照上文链接 一些前置的基础 随机数 tf.random uniform(sha ...
- Excel技巧：如何绘制一份优秀的甘特图（项目管理）
作者:秦路,天善智能特约专家.资深数据分析师,数据化运营专家.擅长结合运营和数据,建立数据化运营体系. 个人公众号:秦路(微信ID:tracykanc) 今天我给大家分享的内容是如何利用Excel绘制 ...
- Twproject Gantt开源甘特图功能扩展
1.Twproject Gantt甘特图介绍 Twproject Gantt 是一款基于 jQuery 开发的甘特图组件,也可以创建其它图表,例如任务树(Task Trees).内置编辑.缩放和 CS ...
- ECharts数据图表系统？ 5分钟上手！
目录: 前言 简介 方法一:模块化单文件引入(推荐) 方法二:标签式单文件引入 [前言] 最近在捣鼓各种插件各种框架,发现这个ECharts还是比较不错的,文档也挺全的,还是中文的,给大家推荐一下. ...
随机推荐
- 【iOS开发-34】自己主动释放池@autoreleasepool的使用注意事项以及ARC机制——面试必考内容
自己主动释放池@autorelease面试频率可能会吧release还要高. (1)在自己主动释放池@autoreleasepool{}中alloc一个对象后(如p1).仍然须要用[p1 autore ...
- CODE ---代码助手 (保存代码、搜代码、生成网页、自由界面)
四大功能 1 保存代码 2 搜索代码 3 生成网页 4 自由界面 www.gudianxiaoshuo.com
- Redis封装之String
RedisBase类 /// <summary> /// RedisBase类,是redis操作的基类,继承自IDisposable接口,主要用于释放内存 /// </summary ...
- ajax --- Ajax跨域请求保证同一个session的问题
我们知道,根据浏览器的保护规则,跨域的时候我们创建的sessionId是不会被浏览器保存下来的,这样,当我们在进行跨域访问的时候,我们的sessionId就不会被保存下来,也就是说,每一次的请求,服务 ...
- VB.NET中文双引号的处理方法
相信朋友们也都碰到了这样的问题了,VS的IDE会不分青红皂白的把中文双引号变成英文的双引号,当然可以通过关闭自动重排功能来回避这个问题,但不是一个好的解决办法,以下这个方式不错: 如果在实际的使用中我 ...
- linux安装lrzsz支持rz从windows上传文件到linux
1.下载lrzsz wget https://wangxuejin-data-1252194948.cos.ap-shanghai.myqcloud.com/lrzsz-0.12.20.tar.gz ...
- 最近遇到的若干Web前端问题：disable和readonly，JqueryEasyUI，KindEditor
最近项目中用到了Jquery Easyui和KindEditor等框架组件,问题真不少啊~ 一些看起来很简单理所当然的事情,竟然花费了不少时间,才解决好~ 1.readonly和disable的区 ...
- 文件/文件夹权限设置命令chmod的具体使用方法
chmod是文件/文件夹权限设置的命令,在Linux中常常遇到.本博文下面总结chmod的具体使用方法. Linux/Unix的档案调用权限分为三级,即档案拥有者user.群组group.其它othe ...
- 关于getinstalledpackages參数的分析。
此blog不写API的使用方法仅仅分析此參数的知识点. 今天学习安卓突然学习到了getinstalledpackages()的方法获取到安装应用信息 ,他接收一个int flags的值.然后在网上查询 ...
- RvmTranslator6.2 is released
RvmTranslator6.2 is released eryar@163.com RvmTranslator can translate the RVM file exported by AVEV ...