完整代码
<!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>
效果图: