三分钟上手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还是比较不错的,文档也挺全的,还是中文的,给大家推荐一下. ...
随机推荐
- 学习Go语言之简易ORM框架
ORM即为对象关系映射,ORM常用于程序适配多种数据库,以达到开放扩展关闭修改的原则.笔者初学Golang,遂有意写个简易ORM框架,权当知识巩固. 首先需要有一个思想就是数据库表结构都是固定,但是每 ...
- jquery validate验证规则重用
当多个控件验证规则相同时,如何避免冗余代码并应用相同规则呢? [1st way. addMethod+addClassRules] 场景:维护学生档案时需要维护父母.监护人.紧急联系人的身份证号码,此 ...
- Laravel+vue实现history模式URL可行方案
项目:laravel + vue 实现前后端分离.vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. h ...
- python第三次作业——叶耀宗
作业1 import random#引入随机数模块xing=["小白","小黄","小王","小陈","小绿& ...
- linux6 安装oracle11g
转自:http://blog.csdn.net/nhm_lxy/article/details/37813789 安装环境: 虚拟机VMware Workstation 10.0 操作系统: ...
- Android Studio获取开发版SHA1值和发布版SHA1值，详细过程
转自原文 Android Studio获取开发版SHA1值和发布版SHA1值的史上最详细方法 前言: 今天我想把百度地图的定位集成到项目中来,想写个小小的案例,实现一下,但在集成百度地图时首先要申请秘 ...
- URAL 1614. National Project “Trams” （图论大YY）
1614. National Project "Trams" Time limit: 0.5 second Memory limit: 64 MB President has de ...
- Effective JavaScript Item 40 避免继承标准类型
本系列作为Effective JavaScript的读书笔记. ECMAScript标准库不大.可是提供了一些重要的类型如Array,Function和Date.在一些场合下.你或许会考虑继承当中的某 ...
- JNI 实战全面解析
项目决定移植一款C++开源项目到Android平台,开始对JNI深入研究. JNI是什么? JNI(JavaNative Interface)意为Java本地调用,它允许Java代码和其他语言写的代码 ...
- 26.angularJS $routeProvider
转自:https://www.cnblogs.com/best/tag/Angular/ O'Reilly书上的伪代码 var someModule = angular.module('someMod ...