问题描述
我正在使用 DHTMLX 甘特图，在这里我需要从甘特图中获取开始绘制日期和结束绘制日期。例如，这里的开始日期是 2019 年 3 月 31 日，结束日期是图表中的 2019 年 4 月 7 日，我希望这个日期不从 JSON 中获取。实际上，我想在开始日期和结束日期添加更多天数，这就是我需要它的原因。这是下面的代码。
HTML
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' type='text/css' href='http://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.css'>
<script src='http://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.js'></script>
<style>
.gantt_custom_button {
background-color: rgb(206,206,206);
position: absolute;
right: -10px;
top: 5px;
width: 20px;
height: 26px;
border-radius: 0;
}
</style>
</head>
<div id='gantt_here' style='width:100%; height:500px;'></div>
<body>
<script>
var task1 = {
'data': [{
'id': 1,'text': 'Project #1','start_date': '01-04-2019','duration': 2,'order': 10,'progress': 0.4,'open': true
},{
'id': 2,'text': 'Task #1','start_date': '02-04-2019','duration': 1,'progress': 0.6,'parent': 1
},{
'id': 3,'text': 'Task #2','start_date': '03-04-2019','order': 20,{
'id': 4,'text': 'Task #3','start_date': '05-04-2019','parent': 1
}
],'links': [{
'id': 1,'source': 1,'target': 2,'type': '1'
},'source': 2,'target': 3,'type': '0'
},'source': 3,'target': 4,'target': 5,'type': '2'
}
]
};
//console.log(task1.data)
task1.data.forEach(function (val,index) {
console.log(val.start_date);
//gantt.config.start_date = gantt.date.add(new Date(val.start_date),-2,'month');
// gantt.config.end_date = gantt.date.add(new Date(val.start_date),2,'month');
})
// gantt.config.start_date = gantt.date.add(new Date(2019,02,31),-1,'month');
// gantt.config.end_date = gantt.date.add(new Date(2019,03,8),1,'month');;
gantt.config['scales'] = [{
unit: 'day',step: 1,format: '%d %M'
},{ unit: "year",format: "%Y" },{ unit: "month",format: "%M" }
];
gantt.config.scale_height = 100;
gantt.init('gantt_here');
gantt.parse(task1);
</script>
</html>
解决方法
如果您需要甘特图中的开始日期和结束日期，有一个名为 getState() 的 API。
col3 将为您提供在图表中显示任务的日期，gantt.getState().min_date 将为您提供显示任务的日期在图表中直到。如果您想要开始日期或结束日期之前或之后的日期，您可以通过此gantt.getState().max_date 根据您的需要添加/减去天数。这是工作示例：
gantt.date.add(new Date(gantt.getState().max_date),-1,'day')