dhtmlxgantt甘特图（精确到分钟）

最新推荐文章于 2025-04-23 09:46:52 发布
原创最新推荐文章于 2025-04-23 09:46:52 发布
· 5.7k 阅读
版权
完整代码
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>Basic initialization</title>
	<link rel="stylesheet" href="http://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.css" 
    type="text/css"> 
	<script src="http://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.js"></script>

	<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 tasks = {
		data: [
			{
				id: 1, //任务id
				text: "Project #1", //任务名
				// start_date: "18-08-2020", //开始时间
				// progress: 0.6,//任务完成情况，进度
				// duration: 2,//任务时长，从start_date开始计算 
				// order: 10, 
				open: true,//默认是否打开
				type: 'project',// project为项目任务类型，绿色，默认为task为普通任务类型，蓝色
				// users: [2, 3]
			},{
				id: 2, text: "Task #1", render:"split",parent: 1
			},{
				id: 22, text: "Stage #1", start_date: "2020-08-18 03:28",end_date:"2020-08-18 04:30", 
				parent: 2
			},{
				id: 222, text: "Stage #2", start_date: "2020-08-18 05:28",end_date:"2020-08-18 06:30", 
				parent: 2
			},{
				id: 3, text: "Task #2", start_date: "2020-08-18 08:10",end_date:"2020-08-18 08:20", parent: 1//父任务ID
			}
		],
		// 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";//设置数据中的时间格式，对应start_date格式
	gantt.config.columns = [//设置列
		{name:"text",       label:"Task name",  width:"*", tree:true },
		{name:"start_date", label:"Start time", align:"center" },
	];
	gantt.plugins({
		tooltip: true,//鼠标划过任务是否显示明细
		// auto_scheduling: true,//根据任务之间的关系自动安排任务
		// multiselect: true, //为任务激活多任务选择
	});
	gantt.config.duration_unit = "minute";
	// gantt.templates.tooltip_date_format=function (date){
	// 	var formatFunc = gantt.date.date_to_str("%Y-%m-%d %H:%i");
	// 	return formatFunc(date);
	// };
	//自定义工具栏
	gantt.templates.tooltip_text = function (start, end, task) {
      return '<b>任务名称:</b> ' + task.text + '<br/><b>工作时间:</b> ' + new Date(start).getHours()+':'+new Date(start).getMinutes()+' - '+ new Date(end).getHours()+':'+new Date(end).getMinutes()
	}
	//监测到鼠标已经离开包裹着ghtml的div的解决方案
	// gantt.ext.tooltips.tooltipFor({
    //   selector: '.gantt_grid [' + gantt.config.task_attribute + ']',
    //   global: true
    // })
	gantt.config.start_date = new Date("2020-08-18 00:00");//时间刻度的开始时间
	gantt.config.end_date = new Date("2020-08-18 23:59");//时间刻度的结束时间
	gantt.config.scales = [
		{unit: "hour", step: 1, format: "%H:%i"} //时间刻度的显示单位
	];
	// gantt.attachEvent("onGanttReady", function(){
	// 	var tooltips = gantt.ext.tooltips;
	// 	tooltips.tooltip.setViewport(gantt.$task_data);
	// });
	
	// gantt.config.multiselect = false
	// gantt.config.multiselect_one_level = true; //在一个或任何级别内是否可以使用多任务选择
	gantt.config.readonly=true;//只读模式的甘特图
	gantt.init("gantt_here");
	gantt.parse(tasks);
</script>
</body>
</html>
效果图：
在这里插入图片描述