這篇文章給大家帶來dhtmlxGantt如何自定義時間的單位。

DhtmlxGantt正版試用下載

自定義時間單位

dhtmlxGantt 允許您定義自定義時間單位并在比例配置中為標簽設置模板。

要定義自定義單位，您需要在Date 對象中定義 2 個函數：

Date gantt.date.<unit>_start(Date date);
Date gantt.date.add_<unit>(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相關內容和資訊，歡迎在線咨詢或者私信我獲取正版試用版及報價。

甘特圖控件交流群：764148812    歡迎進群交流討論

更多正版甘特圖軟件下載、購買、授權咨詢，請點這里！