javascript - 如何从 DHTMLX 甘特图中获取开始绘制日期和结束绘制日期
问题描述
我正在使用 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,
'order': 10,
'progress': 0.6,
'parent': 1
},
{
'id': 3,
'text': 'Task #2',
'start_date': '03-04-2019',
'duration': 2,
'order': 20,
'progress': 0.6,
'parent': 1
},
{
'id': 4,
'text': 'Task #3',
'start_date': '05-04-2019',
'duration': 1,
'order': 10,
'progress': 0.6,
'parent': 1
}
],
'links': [{
'id': 1,
'source': 1,
'target': 2,
'type': '1'
},
{
'id': 2,
'source': 2,
'target': 3,
'type': '0'
},
{
'id': 3,
'source': 3,
'target': 4,
'type': '0'
},
{
'id': 4,
'source': 2,
'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", step: 1, format: "%Y" },
{ unit: "month", step: 1, format: "%M" }
];
gantt.config.scale_height = 100;
gantt.init('gantt_here');
gantt.parse(task1);
</script>
</html>
解决方案
如果您想要甘特图中的开始日期和结束日期,有一个名为getState()的 API。
gantt.getState().min_date
将为您提供任务在图表中显示的日期,并gantt.getState().max_date
为您提供任务在图表中显示的日期。如果您想要在开始日期或结束日期之前或之后的日期,您可以根据需要通过此添加/减去天数gantt.date.add(new Date(gantt.getState().max_date), -1, 'day')
。这是工作示例:
<!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,
'order': 10,
'progress': 0.6,
'parent': 1
},
{
'id': 3,
'text': 'Task #2',
'start_date': '03-04-2019',
'duration': 2,
'order': 20,
'progress': 0.6,
'parent': 1
},
{
'id': 4,
'text': 'Task #3',
'start_date': '05-04-2019',
'duration': 1,
'order': 10,
'progress': 0.6,
'parent': 1
}
],
'links': [{
'id': 1,
'source': 1,
'target': 2,
'type': '1'
},
{
'id': 2,
'source': 2,
'target': 3,
'type': '0'
},
{
'id': 3,
'source': 3,
'target': 4,
'type': '0'
},
{
'id': 4,
'source': 2,
'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", step: 1, format: "%Y" },
{ unit: "month", step: 1, format: "%M" }
];
gantt.config.scale_height = 100;
gantt.init('gantt_here');
gantt.parse(task1);
console.log(gantt.getState().min_date);
console.log(gantt.getState().max_date);
console.log("Your custom date");
console.log(gantt.date.add(new Date(gantt.getState().min_date), 1, 'day'));
console.log(gantt.date.add(new Date(gantt.getState().max_date), -1, 'day'));
</script>
</html>
推荐阅读
- vb.net - 如何在 vb 中从访问 picturbox 中检索图像。网
- python - Excel:是否有 Excel 函数/查询或使用 Python,我可以在其中找到匹配字符的数量或两个单元格之间的匹配百分比?
- python - 迭代目标 FGSM 不适用于小批量
- android - 如何使用按钮从数据库中删除列表视图项?
- python - spaCy中的DocBin.merge方法
- javascript - 更改 HTML 的 JavaScript 函数不起作用
- javascript - 如何循环/使用等待 axios?
- node.js - 获取存在嵌套键的 dynamodb 项目
- excel - Power 查询数据加载到模型和表中未正确排序
- react-select - React-select 自定义 Option 对象也不接收 innerprops.key