超优秀 HTML5 甘特图类库GanttChart

2020-11-12

加入收藏

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

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

说明

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

快速创建

<!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>

为了配置甘特图所需外观，dhtmlxGantt提供了2个对象 config和templates。

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");

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");

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");

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

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

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

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

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