项目管理软件dhtmlxGantt配置教程（十二）：如何自定义时间单位

自定义时间单位

dhtmlxGantt 允许您定义自定义时间单位并在比例配置中为标签设置模板。

要定义自定义单位，您需要在Date 对象中定义 2 个函数：

Date gantt.date._start(Date date);
Date gantt.date.add_(Date date, Integer increment);

• 第一个函数应返回任何给定日期的开始时间单位（例如，2 月 14 日 -> 2 月 1 日的 month_start）。
• 第二个函数将日期增加任何给定的持续时间单位数（例如“日期减 2 天”）

示例 1

让我们创建一个“fiscal_year”单位并假设一个财政年度将在 1 月 31 日结束。这是指定新单位的方式：

var firstMonth = 1,
    firstDay = 1;
 
gantt.date.fiscal_year_start = function(date){       
   var next = new Date(date);
   if(next.getMonth() < firstMonth || 
      (next.getMonth() === firstMonth && next.getDate() < firstDay)){
      next = gantt.date.add(next, -1, "year"); 
   }
 
  next = gantt.date.year_start(next);
  next.setMonth(firstMonth);
  next.setDate(firstDay);
 
  return next;
}; 
 
gantt.date.add_fiscal_year = function(date, inc){    
   return gantt.date.add(date, inc, "year");
};

然后在代码中使用它，如下所示：

var dateToStr = gantt.date.date_to_str("%Y");
function fiscalYearLabel(date){
    return dateToStr(gantt.date.fiscal_year_start(date));
};
 
gantt.config.scales = [
  {unit:"year", step:1, format:"Calendar year %Y"},
  {unit:"fiscal_year", step:1, format:fiscalYearLabel},
  {unit:"month", step: 1, format: "%M %Y"},
  {unit:"day", step: 1, format:"%d %M"}
];

示例 2

您可以将每个“日”单元格划分为三个“小时”单元格，标签分别为 00、08、16。逻辑如下所示：

gantt.date.hour_custom_start = function (date) {
    return date;
};
 
gantt.date.add_hour_custom = function (date, inc) { // inc depends on the "step" 
    const nextDate = new Date(date);
    if (nextDate.getHours() % 8 != 0) { // the hour value is not 0, 8 or 16 
        const diff = Math.abs(8 - nextDate.getHours()); 
        return gantt.date.add(nextDate, diff * inc, "hour"); 
    } 
    return gantt.date.add(date, 8 * inc, "hour"); 
};
 
gantt.config.scales = [
    { unit: "day", step: 1, date: "%d %F" },
    { unit: "hour_custom", step: 1, date: "%H" },
];
 
gantt.config.date_grid = "%Y-%m-%d %H:%i"

让我们考虑一下甘特如何创建第一个“小时”单元格。从示例中可以看出，最早的任务从 07:00 开始。但是 7 不是 8 的倍数，因此甘特图遵循以下规则：

if (nextDate.getHours() % 8 != 0) {
    const diff = Math.abs(8 - nextDate.getHours());  // 8 - 7 = 1
    return gantt.date.add(nextDate, diff * inc, "hour"); // 7 - 1 = 6
}

• 甘特图计算 8:00 和 7:00 之间的时间间隔：diff = 08:00 - 07:00 = 1 小时
• 然后，甘特求时间间隔和增量的乘积：diff * inc = 1 小时 * (-1) = -1 小时，作为inc参数的值，甘特使用时间步长的负值 ( -1 )。
• 最后，甘特将接收到的值与最早任务的时间相加：07:00 + (- 1 小时) = 06:00，第一个单元格的值为06。

为了创建第二个“小时”单元格，甘特图遵循相同的逻辑，但使用正增量

• 差异 = 08:00 - 06:00 = 2 小时
• diff * inc = 2 小时 * 1 = 2 小时
• 06:00 + 2 小时 = 08:00 ，第二个单元格的值为08

在这个阶段，我们可以看到 8 是 8 的倍数，因此下一个单元格的值计算为08:00 + 8 hours = 16:00，其他单元格以此类推。

dhtmlxGantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表，可满足项目管理控件应用程序的所有需求，是最完善的甘特图图表库。了解更多DhtmlxGantt相关内容和资讯，欢迎在线咨询或者私信我获取正版试用版及报价。