這篇文章給大家帶來dhtmlxGantt時間和范圍設置的講解。

DhtmlxGantt正版試用下載

1、時間單位

要設置比例的單位，請使用相應比例對象中的unit屬性：

可能的值是：“分鐘”、“小時”、“天”、“周”、“季度”、“月”、“年”。

gantt.config.scales = [
    {unit: "month", step: 1, format: "%F, %Y"},
    {unit: "day", step: 1, format: "%j, %D"}
];
 
gantt.init("gantt_here");

2、范圍

默認范圍設置

 如果您沒有明確指定日期范圍，甘特圖會使用加載任務的日期，并在比例尺中的第一個任務之前和最后一個任務之后添加偏移量。偏移量由時間刻度的設置定義。根據scale_offset_minimal值，它可以是通過scales選項的unit屬性定義的時間單位，也可以是最小的時間刻度單位。

您可以使用getState方法以編程方式獲取顯示的日期范圍。

var state = gantt.getState();
 
console.log(state.min_date);
// -> Mon Jan 01 2018 00:00:00
 
console.log(state.max_date);
// -> Tue Jan 01 2019 00:00:00

比例范圍在甘特圖渲染上重新計算。如果用戶將任務移到顯示的時間范圍之外，則將顯示任務行，但在完成重新繪制完成之前，條形元素將不可見。

為了自動調整比例，請使用fit_tasks配置。

gantt.config.fit_tasks = true; 
gantt.init("gantt_here");

明確設置日期范圍

或者，您可以使用start_date和end_date配置選項明確設置日期范圍：

gantt.config.start_date = new Date(2018, 02, 31);
gantt.config.end_date = new Date(2018, 03, 09);
 
gantt.init("gantt_here");

它們也可以在甘特圖初始化調用中指定：

gantt.init("gantt_here", new Date(2018, 02, 31), new Date(2018, 03, 09));

如果同時指定了start_date和end_date選項，并且您創建了超出范圍的任務，則該任務將從圖表中消失。 要在圖表中顯示任務，請使用show_tasks_outside_timescale配置。

gantt.config.start_date = new Date(2019, 02, 31);
gantt.config.end_date = new Date(2019, 03, 09);
gantt.config.show_tasks_outside_timescale = true;
 
gantt.init("gantt_here");

如果您不使用此配置，您可以擴展范圍：

gantt.attachEvent("onLightboxSave", function(id, task, is_new){
 var taskStart = task.start_date;
 var taskEnd = task.end_date;
 var scaleStart = gantt.config.start_date;
 var scaleEnd = gantt.config.end_date;
 
 // if the task is out of the range
 if(scaleStart > taskEnd || scaleEnd < taskStart ){
  // update timescale range
  gantt.config.end_date=new Date(Math.max(taskEnd.valueOf(), scaleEnd.valueOf()));
  gantt.config.start_date=new Date(Math.min(taskStart.valueOf(),scaleStart.valueOf()));
  gantt.render();
 }    
 return true;
});

或者向燈箱控件添加驗證：

gantt.attachEvent("onLightboxSave", function(id, task, is_new){
    var taskStart = task.start_date;
    var taskEnd = task.end_date;
    var scaleStart = gantt.config.start_date;
    var scaleEnd = gantt.config.end_date;
 
    // check if the task is out of the range
    if(scaleStart > taskEnd || scaleEnd < taskStart ){
        gantt.message({
            type:"warning", 
            text:"Warning! The task is outside the date range!",
            expire:5000
        });
          return false;
    } 
    return true;
});

動態更改顯示范圍

有幾種方法可以動態更改顯示的范圍：

• 您可以借助start_date / end_date配置控制時間范圍，但可以動態調整它們以顯示加載的任務。

您可以通過在每次重新繪制甘特圖時更新start_date / end_date配置來重新計算比例范圍：

gantt.attachEvent("onBeforeGanttRender", function(){
   var range = gantt.getSubtaskDates();
   var scaleUnit = gantt.getState().scale_unit;
   if(range.start_date && range.end_date){
     gantt.config.start_date = gantt.calculateEndDate(range.start_date, -4, scaleUnit);
     gantt.config.end_date = gantt.calculateEndDate(range.end_date, 5, scaleUnit);
   }
});
 
gantt.init("gantt_here");

• 要“強制”每次任務不適合現有比例間隔時重新渲染比例，請將fit_tasks屬性設置為true：

gantt.config.fit_tasks = true; 
gantt.init("gantt_here");

如果同時指定了start_date和end_date選項，則需要使用上述選項之一才能使fit_tasks屬性正常工作。

• 通過在onTaskDrag事件的處理程序中指定必要的邏輯，還可以在拖動任務時自動更改比例：

gantt.attachEvent("onTaskDrag", function(id, mode, task, original){
 var state = gantt.getState();
 var minDate = state.min_date,
     maxDate = state.max_date;
 
 var scaleStep=gantt.date.add(new Date(),state.scale_step,state.scale_unit)-new Date();
 
 var showDate,
  repaint = false;
  if(mode == "resize" || mode == "move"){
    if(Math.abs(task.start_date - minDate) < scaleStep){
      showDate = task.start_date;
      repaint = true;
 
    }else if(Math.abs(task.end_date - maxDate) < scaleStep){
      showDate = task.end_date;
      repaint = true;
    }
 
    if(repaint){
      gantt.render();
      gantt.showDate(showDate);
    }
  }
});

顯示明確日期范圍之外的任務

為此，您需要將show_tasks_outside_timescale配置參數設置為true：

var data = {
  "tasks": [
    {"id":1, "text":"Project #1", "start_date": "01-09-2018", "end_date": "02-09-2018"},
    {"id":2, "text":"Project #2", "start_date": "01-09-2021", "end_date": "02-09-2021"},
    {"id":3, "text":"Task #1", "start_date": "03-02-2020", "end_date": "05-02-2020"},
    ],
    "links":[]
};
 
gantt.config.show_tasks_outside_timescale = true;
 
gantt.init("gantt_here", new Date(2020, 1, 1), new Date(2020, 2,1));

因此，id 為“1”和“2”的任務將在頁面上顯示為時間線區域中的空行，并在網格中顯示指定的名稱和開始日期。

dhtmlxGantt是用于跨瀏覽器和跨平臺應用程序的功能齊全的Gantt圖表，可滿足項目管理控件應用程序的所有需求，是最完善的甘特圖圖表庫。了解更多DhtmlxGantt相關內容和資訊，歡迎在線咨詢或者私信我獲取正版試用版及報價。

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

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