您当前的位置:首页 > 电脑百科 > 程序开发 > 移动端 > H5

超优秀 HTML5 甘特图类库GanttChart

时间:2020-11-12 10:44:53  来源:  作者:

今天给大家分享一款超全功能的跨浏览器平台甘特图表库DhtmlXGantt

超优秀 HTML5 甘特图类库GanttChart

 

dhtmlx-gantt DHTMLX公司开源的 JAVAScript 甘特图/横道图/条状图类库。用来快速构建显示项目、进度,和随着时间关联的相关进展情况。

超优秀 HTML5 甘特图类库GanttChart

 

说明

dhtmlx-Gantt 由位于俄罗斯圣彼得堡DHTMLX公司开发的甘特图组件,适用于B/S模式的Web应用开发。被广泛应用于项目管理、建筑、IT软件、汽车等领域。

超优秀 HTML5 甘特图类库GanttChart

 

快速创建

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>gantt demo</title>
	<script src="dhtmlxgantt.js?v=6.0.0"></script>
	<link rel="stylesheet" href="dhtmlxgantt.css?v=6.0.0">
	<style>
		html, body {
			height: 100%;
			padding: 0px;
			margin: 0px;
			overflow: hidden;
		}
	</style>
</head>
<body>
<div id="gantt_here" style='width:100%; height:100%;'></div>
<script>
	var taskList = {
		data: [
			{
				id: 1, text: "Project #2", start_date: "01-04-2018", duration: 18, order: 10,
				progress: 0.4, open: true
			},
			{
				id: 2, text: "Task #1", start_date: "02-04-2018", duration: 8, order: 10,
				progress: 0.6, parent: 1
			},
			{
				id: 3, text: "Task #2", start_date: "11-04-2018", duration: 8, order: 20,
				progress: 0.6, parent: 1
			}
		],
		links: [
			{id: 1, source: 1, target: 2, type: "1"},
			{id: 2, source: 2, target: 3, type: "0"}
		]
	};
	
	gantt.config.date_format = "%Y-%m-%d %H:%i";
	gantt.init("gantt_here");
	gantt.parse(taskList);
</script>
</body>
</html>
超优秀 HTML5 甘特图类库GanttChart

 

为了配置甘特图所需外观,dhtmlxGantt提供了2个对象 configtemplates

gantt.config //日期,比例,控件等的配置选项。
gantt.templates //格式化甘特图中使用的日期和标签的模板。
  • gantt.config 年示图
gantt.config.scale_unit = "year"; //按年显示
gantt.config.step = 1.5;	//设置时间刻度的步长(X轴)
gantt.config.date_scale = "%Y";	//日期尺度按年

gantt.init("gantt_here");
超优秀 HTML5 甘特图类库GanttChart

 

  • gantt.config 月示图
gantt.config.scale_unit = "month"; //按月显示
gantt.config.date_scale = "%F, %Y"; //设置时间刻度的格式(X轴) 多个尺度

gantt.config.scale_height = 50; //设置时间刻度的高度和网格的标题

gantt.config.subscales = [
	{unit: "day", step: 1, date: "%j, %D"}
]; //指定第二个时间刻度

gantt.init("gantt_here");
超优秀 HTML5 甘特图类库GanttChart

 

  • gantt.templates 可用于更改日期和标签的显示。
gantt.templates.task_text=function(start,end,task){
	return "<b>Text:</b> "+task.text+",<b> Holders:</b> "+task.username;
};
gantt.init("gantt_here");
超优秀 HTML5 甘特图类库GanttChart

 

官网提供了丰富的文档示例。

超优秀 HTML5 甘特图类库GanttChart

 


超优秀 HTML5 甘特图类库GanttChart

 


超优秀 HTML5 甘特图类库GanttChart

 

非常棒的一款开源甘特图库,可以让你预测时间、成本、数量及质量上的关联并回溯结果。也能帮助你考虑人力、资源、日期、项目中重复的要素和关键部分,让你更加直观的看到任务进展及资源的利用率等。

# 官网地址
https://dhtmlx.com/docs/products/dhtmlxGantt/

# 仓库地址
https://github.com/DHTMLX/gantt

好了,今天就介绍到这里。大家如果有其它不错的甘特图库,欢迎一起交流讨论!



Tags:HTML5   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
《开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目,包括技术、学习、实用与各种有趣的内容。本期推荐的是一个开源的 HTML5 视频播放器插件&mdash;&mdash;MuiP...【详细内容】
2021-12-16  Tags: HTML5  点击:(22)  评论:(0)  加入收藏
前言在刚接触HTML的时候,你是否被它众多的标签所惊讶?尤其是HTNL5的标签,新增了不少,很多HTML4的标签跨版本之后就用不了了,如此多的标签,要记是不可能记完的,我们只需要一些常用的...【详细内容】
2021-08-27  Tags: HTML5  点击:(343)  评论:(0)  加入收藏
今天给大家隆重推荐一款超强功能的H5西瓜视频播放器插件xgplayer。 xgplayer 字节跳动公司西瓜播放器技术团队推出的开源音视频解决方案,star高达3.2K+。实现自定义加载、缓...【详细内容】
2020-11-24  Tags: HTML5  点击:(199)  评论:(0)  加入收藏
今天给大家分享一款超全功能的跨浏览器平台甘特图表库DHTMLXGantt。 dhtmlx-gantt DHTMLX公司开源的 JavaScript 甘特图/横道图/条状图类库。用来快速构建显示项目、进度,和...【详细内容】
2020-11-12  Tags: HTML5  点击:(113)  评论:(0)  加入收藏
在本文中,我列出了十个我过去没用过的HTML5功能,但现在发现它们很有用,废话不多说,让我们开始吧。 detais 标签<details>标签向用户提供按需查看详细信息的效果。如果需要按需...【详细内容】
2020-10-09  Tags: HTML5  点击:(98)  评论:(0)  加入收藏
本文重点还是要介绍Canvas,但每次提起Canvas,脑海总会想起SVG,因此先做个简单的对比。 &emsp;*Canvas 和 SVG 对比&emsp;Canvas 和 SVG 都是 HTML5 中推荐的也是主要的2D图形绘...【详细内容】
2020-08-10  Tags: HTML5  点击:(59)  评论:(0)  加入收藏
为了让你的 HTML5 代码引起Google等搜索引擎的注意,你需要在HTML语言规则上下一番功夫,并在编写代码时应用一些策略。编写这样的代码其实并不难,而且还有很多好处。...【详细内容】
2020-01-14  Tags: HTML5  点击:(99)  评论:(0)  加入收藏
Plyr是一款简单并且十分简洁的Wordpress Html5 视频播放器插件,安装插件以后,在后台启用,在发布文章的时候使用如下短代码就可以插入一款漂亮的播放器了。代码如下:[plyr poster...【详细内容】
2019-09-22  Tags: HTML5  点击:(259)  评论:(0)  加入收藏
和往常一样,jsPDF是一个开源的客户端的PDF解决方案,在之前的文章中已经介绍过几个Web端和PDF相关的库,jsPDF同样是一个不错的客户端PDF引 SDK,你可以通过jsPDF在客户端完成相关操作,它包含了非常丰富的API,帮助你完成一系列...【详细内容】
2019-09-09  Tags: HTML5  点击:(192)  评论:(0)  加入收藏
前两天发布了一篇关于利用html5在手机端进行拨号和发送短信的教程,今天再说一下利用html5在手机端调用摄像头以及录音的教程 HTML5 调用手机摄像头在html5中可以利用type类型...【详细内容】
2019-08-08  Tags: HTML5  点击:(269)  评论:(0)  加入收藏
▌简易百科推荐
前言在刚接触HTML的时候,你是否被它众多的标签所惊讶?尤其是HTNL5的标签,新增了不少,很多HTML4的标签跨版本之后就用不了了,如此多的标签,要记是不可能记完的,我们只需要一些常用的...【详细内容】
2021-08-27  鳌拜的表哥熬夜    Tags:HTML5   点击:(343)  评论:(0)  加入收藏
前言前段时间笔者一直忙于数据可视化方面的工作,比如如何实现拖拽式生成可视化大屏,如何定制可视化图表交互和数据导入方案等,这块需求在B端企业中应用非常大,所以非常有探索价...【详细内容】
2021-08-18  趣谈前端    Tags:H5编辑器   点击:(90)  评论:(0)  加入收藏
前言移动端开发在前端里像神一样地存在,不是说它多难而是说它坑位实在太多了,怎样填都填不完。Android和iOS各显神通,Android的系统版本和屏幕分辨率多得难以一招兼容,iOS的顽固...【详细内容】
2021-03-18      Tags:H5   点击:(228)  评论:(0)  加入收藏
1.HTML5是什么HTML是web开发中三大规范之一,可以参考:Web前端开发-HTML入门干货 。HTML产生于1990年,1997年的HTML4.0成为互联网标准并广泛应用,HTML5是在HTML4.01(1999年发布)的...【详细内容】
2021-02-19      Tags:HTML5   点击:(195)  评论:(0)  加入收藏
HTML5是HTML4.01和XHTML1.0之后超文本标记语言的最新版本,由一群自由思想者设计,最终实现了多媒体支持、交互性、更智能的表单和更好的语义标注。 HTML 5不只是 HTML规范的最...【详细内容】
2021-01-20      Tags:HTML5   点击:(179)  评论:(0)  加入收藏
前言浏览器越来越强大,从文字、图片、到声音、视频、动画与游戏都有了丰富的应用。H5之后,不仅仅是表现层,数据存储与通讯能力也得到大幅度提高,并逐渐取得共识,形成了标准。随着...【详细内容】
2020-12-29      Tags:H5应用   点击:(165)  评论:(0)  加入收藏
今天给大家隆重推荐一款超强功能的H5西瓜视频播放器插件xgplayer。 xgplayer 字节跳动公司西瓜播放器技术团队推出的开源音视频解决方案,star高达3.2K+。实现自定义加载、缓...【详细内容】
2020-11-24      Tags:XGPlayer   点击:(199)  评论:(0)  加入收藏
今天给大家推荐一款超棒的H5可视化网页制作编辑工具H5DS。 h5ds 基于HTML5构建的web网页可视化制作器。通过轻松拖拽元素即可快速生成精美的H5页面。 技术栈 前端:React+Mo...【详细内容】
2020-11-12      Tags:H5DS   点击:(393)  评论:(0)  加入收藏
今天给大家分享一款超全功能的跨浏览器平台甘特图表库DHTMLXGantt。 dhtmlx-gantt DHTMLX公司开源的 JavaScript 甘特图/横道图/条状图类库。用来快速构建显示项目、进度,和...【详细内容】
2020-11-12      Tags:HTML5   点击:(113)  评论:(0)  加入收藏
项目已经在10月底上线,最近又进入到其他项目里,到今天才抽出时间对这个项目总结一下。回顾一下,在项目的初期就设定为轻量级H5 App,上线后已经运行在 原生app、微信小程序、百...【详细内容】
2020-11-10      Tags:app开发   点击:(109)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条