這篇文章給大家?guī)?lái)dhtmlxGantt如何自定義時(shí)間的單位。

DhtmlxGantt正版試用下載

自定義時(shí)間單位

dhtmlxGantt 允許您定義自定義時(shí)間單位并在比例配置中為標(biāo)簽設(shè)置模板。

要定義自定義單位，您需要在Date 對(duì)象中定義 2 個(gè)函數(shù)：

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

• 第一個(gè)函數(shù)應(yīng)返回任何給定日期的開始時(shí)間單位（例如，2 月 14 日 -> 2 月 1 日的 month_start）。
• 第二個(gè)函數(shù)將日期增加任何給定的持續(xù)時(shí)間單位數(shù)（例如“日期減 2 天”）

示例 1

讓我們創(chuàng)建一個(gè)“fiscal_year”單位并假設(shè)一個(gè)財(cái)政年度將在 1 月 31 日結(jié)束。這是指定新單位的方式：

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

您可以將每個(gè)“日”單元格劃分為三個(gè)“小時(shí)”單元格，標(biāo)簽分別為 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"

讓我們考慮一下甘特如何創(chuàng)建第一個(gè)“小時(shí)”單元格。從示例中可以看出，最早的任務(wù)從 07:00 開始。但是 7 不是 8 的倍數(shù)，因此甘特圖遵循以下規(guī)則：

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
}

• 甘特圖計(jì)算 8:00 和 7:00 之間的時(shí)間間隔：diff = 08:00 - 07:00 = 1 小時(shí)
• 然后，甘特求時(shí)間間隔和增量的乘積：diff * inc = 1 小時(shí) * (-1) = -1 小時(shí)，作為inc參數(shù)的值，甘特使用時(shí)間步長(zhǎng)的負(fù)值 ( -1 )。
• 最后，甘特將接收到的值與最早任務(wù)的時(shí)間相加：07:00 + (- 1 小時(shí)) = 06:00，第一個(gè)單元格的值為06。

為了創(chuàng)建第二個(gè)“小時(shí)”單元格，甘特圖遵循相同的邏輯，但使用正增量

• 差異 = 08:00 - 06:00 = 2 小時(shí)
• diff * inc = 2 小時(shí) * 1 = 2 小時(shí)
• 06:00 + 2 小時(shí) = 08:00 ，第二個(gè)單元格的值為08

在這個(gè)階段，我們可以看到 8 是 8 的倍數(shù)，因此下一個(gè)單元格的值計(jì)算為08:00 + 8 hours = 16:00，其他單元格以此類推。

dhtmlxGantt是用于跨瀏覽器和跨平臺(tái)應(yīng)用程序的功能齊全的Gantt圖表，可滿足項(xiàng)目管理控件應(yīng)用程序的所有需求，是最完善的甘特圖圖表庫(kù)。了解更多DhtmlxGantt相關(guān)內(nèi)容和資訊，歡迎在線咨詢或者私信我獲取正版試用版及報(bào)價(jià)。

甘特圖控件交流群：764148812    歡迎進(jìn)群交流討論

更多正版甘特圖軟件下載、購(gòu)買、授權(quán)咨詢，請(qǐng)點(diǎn)這里！