三分钟上手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还是比较不错的,文档也挺全的,还是中文的,给大家推荐一下. ...
随机推荐
- windos下安装多个mysql服务
最近需要使用Mysql制造大量数据,需要多个Mysql服务器.一开始的解决方案是使用多个windows机器.实体机不够,则用虚拟机来搞.但,,,,安装多个虚拟机…….好吧, 在网上查了下,有使用单个机 ...
- Javascript中正则的 match、test、exec使用方法和区别
总结: match 是str调用 test和exec是正则表达式调用 test只返回true或false, exec和match的结果是相同的,返回结果比较复杂
- python IO编程-StringIO和BytesIO
链接:https://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000/0014319187857 ...
- 洛谷 P1156 垃圾陷阱 （01背包拓展）（好题！！）
这真是一道好题目 学到了很多 一开始感觉吃或者不吃会有后效性 然后看到洛谷的题解,直接把这个有后效性的部分当作dp的维度和值 因为这个垃圾可以堆或者不堆,所以这个很像01背包, 但是加了非常多的限制条 ...
- 使用maven安装jar到本地仓库
mvn install:install-file "-DgroupId={安装的jar包的groupid,可以随意起名}" "-DartifactId={安装jar包的I ...
- 第五讲 自对偶的Yang-Mills方程及Polyakov和t'Hooft解
$\newcommand{\R}{\mathbb{R}}$以下我们考虑的是$\R^4$或者$S^4$上的Yang-Mills泛函,它们是共形不变的. 一.自对偶和反自对偶 我们寻找$\R^4$或$S^ ...
- jquery快速清除复选框、单选框的选中
$(":checked").attr("checked", "");
- Linux查看当前正在执行的进程
Linux查看当前正在执行的进程 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ ps PID TTY TIME CMD 2576 pts/0 00:00:00 ...
- iOS 开发百问（5）
42. 警告:Multiplebuild commands for output file target引用了名字反复的资源 找到当前的target,展开之后.找到CopyBundle Resourc ...
- Unity 之 C# 利用回调函数实现C++匿名函数
做C++开发的都用过匿名函数很好用,可是C#开发怎么实现呢?前几天做一个拍照功能的时候.我偶然发现某个函数假设是C++的话.用匿名函数太好了,于是開始研究C#的回调,代理.托付等,最后总算是实现了我想 ...