這篇文章給大家?guī)?a >dhtmlxGantt時(shí)間和范圍設(shè)置的講解。

DhtmlxGantt正版試用下載

1、時(shí)間單位

要設(shè)置比例的單位，請(qǐng)使用相應(yīng)比例對(duì)象中的unit屬性：

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

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

2、范圍

默認(rèn)范圍設(shè)置

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

您可以使用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

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

為了自動(dòng)調(diào)整比例，請(qǐng)使用fit_tasks配置。

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

明確設(shè)置日期范圍

或者，您可以使用start_date和end_date配置選項(xiàng)明確設(shè)置日期范圍：

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

它們也可以在甘特圖初始化調(diào)用中指定：

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

如果同時(shí)指定了start_date和end_date選項(xiàng)，并且您創(chuàng)建了超出范圍的任務(wù)，則該任務(wù)將從圖表中消失。 要在圖表中顯示任務(wù)，請(qǐng)使用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");

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

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;
});

或者向燈箱控件添加驗(yàn)證：

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;
});

動(dòng)態(tài)更改顯示范圍

有幾種方法可以動(dòng)態(tài)更改顯示的范圍：

• 您可以借助start_date / end_date配置控制時(shí)間范圍，但可以動(dòng)態(tài)調(diào)整它們以顯示加載的任務(wù)。

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

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");

• 要“強(qiáng)制”每次任務(wù)不適合現(xiàn)有比例間隔時(shí)重新渲染比例，請(qǐng)將fit_tasks屬性設(shè)置為true：

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

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

• 通過在onTaskDrag事件的處理程序中指定必要的邏輯，還可以在拖動(dòng)任務(wù)時(shí)自動(dòng)更改比例：

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);
    }
  }
});

顯示明確日期范圍之外的任務(wù)

為此，您需要將show_tasks_outside_timescale配置參數(shù)設(shè)置為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”的任務(wù)將在頁面上顯示為時(shí)間線區(qū)域中的空行，并在網(wǎng)格中顯示指定的名稱和開始日期。

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

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

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