使用DHTMLX甘特图的双周视图

Question

在我的dhtmlx gantt图表中，我已经配置了我的天平来显示年份和季度(每个季度3个PI(

gantt.config.scales = [
{ name: 'year', format: '%Y' },
{ name: 'quarter', template: date => `PI-${(Math.floor((new Date(date).getMonth() / 3)) + 1 )}` },
]

这给了我的结果

|             2022             |
|   PI-1  |   PI-2   |  PI-3   |

我现在想在我的量表中增加两周的增量，以表示每季度的冲刺(每季度6次，每年24次(

|             2022             |
|  PI-1   |   PI-2   |  PI-3   |
| S1 | S2 | S3 |  S4 | S5 | S6 |

我不知道如何构建我的模板来实现这一点。有什么想法吗？

Answer 1

需要注意的是，如果增量为2周，那么一年中将有超过24次冲刺。月份也是如此，一个季度等于3个月，其中包含非整数周，因此季度和冲刺量表的边界不能重合。要在量表中设置sprint，需要使用Custom time units。因此，我可以提供以下解决方案：

如果增量严格为2周，首先确定每个sprint的开始日期。也有必要为第一次冲刺设定开始时间，例如，我将其设定为一年中第一周的周一开始：

// specify the start date of the first sprint
gantt.config.project_start = new Date(2022, 0, 3);
// find a sprint for a given date
function findSprint(date) {
const firstSprint = gantt.date.week_start(new Date(gantt.config.project_start));
let currentDate = firstSprint;
let direction = 1;
if (date < firstSprint) {
direction = -1;
}
const increment = 2 * direction;
let nextDate = gantt.date.add(currentDate, increment, "week");
let num = 0;

while (!(currentDate.valueOf() <= date.valueOf() && nextDate.valueOf() > date.valueOf())) {
if (increment > 0) {
currentDate = nextDate;
nextDate = gantt.date.add(currentDate, increment, "week");
} else {
nextDate = currentDate;
currentDate = gantt.date.add(currentDate, increment, "week");
}
num += 1 * direction;
}
return {
sprintStart: currentDate,
sprintEnd: nextDate,
sprintNumber: num
}
}
// custom scale unit definition
gantt.date.sprint_start = function (date) {
return findSprint(date).sprintStart;
};

下一步是指定增量为两周：

gantt.date.add_sprint = function (date, inc) {
return gantt.date.add(gantt.date.sprint_start(date), inc * 2, "week");
};

最后，在天平上添加一个新单位：

gantt.config.scales = [
{ unit: "year", step: 1, format: "%Y" },
{
unit: 'quarter',
format: date => {
return `PI-${(Math.floor((new Date(date).getMonth() / 3)) + 1)}`
}
},
{ unit: 'sprint', step: 1, template: function (date) {
const sprintInfo = findSprint(date);
return `Sprint ${sprintInfo.sprintNumber + 1}, (${gantt.templates.date_grid(sprintInfo.sprintStart)} - ${gantt.templates.date_grid(new Date(sprintInfo.sprintEnd - 1))})`
}
}
];

请参见示例：https://snippet.dhtmlx.com/15u2bd85.

有时由于某种原因，季度和年度的边界不匹配，这很可能是一个错误，如果这种情况发生在您身上，请联系dhtmlx技术支持。

如果你想在一年中进行24次冲刺，你可以为每次冲刺设定特定的日期，它可能看起来像这样：

const sprints = [
{ name: 'S1',  start_date: new Date(2022,00,01), end_date: new Date(2022,00,15) },
{ name: 'S2',  start_date: new Date(2022,00,15), end_date: new Date(2022,01,01) },
{ name: 'S3',  start_date: new Date(2022,01,01), end_date: new Date(2022,01,15) },
{ name: 'S4',  start_date: new Date(2022,01,15), end_date: new Date(2022,02,01) },
{ name: 'S5',  start_date: new Date(2022,02,01), end_date: new Date(2022,02,15) },
{ name: 'S6',  start_date: new Date(2022,02,15), end_date: new Date(2022,03,01) },
...
];

您需要将给定的sprint添加到单元中：

gantt.date.sprints_start = function(date) {
return date;
};
function getSprint(date,type) {
const tempDate = new Date(date);
for (let i = 0; i < sprints.length; i++) {
if (+tempDate >= +sprints[i].start_date && +tempDate < +sprints[i].end_date) {
if (type == 'scaleUnit') {
return sprints[i].end_date;
}
if (type == 'template') {
return "<div class='sprint'>"+sprints[i].name+"</div>";
}
}
}
if (type == 'scaleUnit') {
const newDate = gantt.date.add(date, 1,'day');
return newDate;
}
if (type == 'template') {
return gantt.date.date_to_str("%m-%d")(date);
}
}
gantt.date.add_sprints = function(date, inc) {
return getSprint(date, 'scaleUnit');
};
const sprintsTemplate = function(date) {
return getSprint(date,'template');
}

并在天平上添加一个新单位：

gantt.config.scales = [
{ unit: "year", step: 1, format: "%Y" },
{
unit: 'quarter',
format: date => {
return `PI-${(Math.floor((new Date(date).getMonth() / 3)) + 1 )}`
}
},
{ unit: 'month', step: 1, format: "%M" },
{ unit: 'sprints', step: 1, template: sprintsTemplate },
];

以下是一个示例：https://snippet.dhtmlx.com/0xznw5m9