dhtmlxgantt甘特图(精确到分钟)

完整代码

<!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 '任务名称: ' + task.text + '
工作时间: '
+ 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>

效果图:
dhtmlxgantt甘特图(精确到分钟)_第1张图片

你可能感兴趣的:(dhtmlxgantt甘特图(精确到分钟))