免费不卡在线观看av,精品亚洲精品中文字幕乱码,久久久国产精品视频

老司机夜插-理伦理片-理伦片免费-理伦片免费观看-理伦片免费看-理伦日韩-理论福利片-理论片第一页-理论片电影-理论片理论

dhtmlxGantt使用教程：如何設置規模

翻譯|使用教程|編輯：楊鵬連|2021-04-07 10:41:53.140|閱讀 892 次

概述：您可以通過在scales配置數組中設置比例尺對象來指定任意數量的比例尺。

相關鏈接：

dhtmlxGantt是用于跨瀏覽器和跨平臺應用程序的功能齊全的Gantt圖表。可滿足項目管理應用程序的所有需求，是最完善的甘特圖圖表庫。它允許你創建動態甘特圖，并以一個方便的圖形化方式可視化項目進度。有了dhtmlxGantt，你可以顯示活動之間的依賴關系，顯示具有完成百分比陰影的當前任務狀態以及組織活動到樹結構。

點擊下載dhtmlxGantt試用版

比例尺的配置是通過scales屬性指定的。您可以通過在scales配置數組中設置比例尺對象來指定任意數量的比例尺：

// a single day-scale
gantt.config.scales = [
    {unit: "day", step: 1, format: "%j, %D"}
];
 
// several scales at once
gantt.config.scales = [
    {unit: "month", step: 1, format: "%F, %Y"},
    {unit: "week", step: 1, format: weekScaleTemplate},
    {unit: "day", step:1, format: "%D", css:daysStyle }
];

時間單位

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

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

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

范圍

默認范圍設置

如果未明確指定日期范圍，則甘特圖將使用已加載任務的日期，并在比例尺中的第一個任務和最后一個任務之后添加偏移量。偏移量是由時間刻度的設置定義的。根據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初始化調用中指定它們：

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

除非標記為unscheduled，否則不適合指定時間間隔的任務將不會顯示在甘特圖中。

筆記

如果同時指定了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");

在這兩種情況下的起始日期和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));

結果，標識為“ 1”和“ 2”的任務將在頁面上顯示為時間軸區域中的空行，并在網格中具有指定的名稱和開始日期。

時間步長

要設置時間刻度的步進，請在相應的刻度對象中使用step屬性：

var monthScaleTemplate = function (date) {
    var dateToStr = gantt.date.date_to_str("%M");
    var endDate = gantt.date.add(date, 2, "month");
    return dateToStr(date) + " - " + dateToStr(endDate);
};
 
 
gantt.config.scales = [
    {unit: "year", step: 1, format: "%Y"},
    {unit: "month", step: 3, format: monthScaleTemplate},
    {unit: "month", step: 1, format: "%M"}
];
gantt.init("gantt_here");

高度

要設置比例尺的高度，請使用scale_height屬性：

gantt.config.scale_height = 54; 
gantt.init("gantt_here");

如果您有多個比例尺，它們將平均分配指定的高度。例如，如果scale_height為60像素，并且您有3個比例，則每個比例的高度將為60/3 = 20像素。

日期格式

要設置比例尺的格式，請在相應的比例尺對象中使用format屬性。日期的格式可以設置為字符串：

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

或作為一個將日期對象作為參數的函數：

gantt.config.scales = [
  { unit: "day", step:1, format: function(date){
    return "<strong>Day " + dayNumber(date) + "</strong><br/>" + dateFormat(date);
  }}
]

造型風格

要設置時間標度的單元格樣式，請在相應的標度對象中使用css屬性。

function getWeekOfMonthNumber(date){
    let adjustedDate = date.getDate()+date.getDay();
    let prefixes = ['0', '1', '2', '3', '4', '5'];
    return (parseInt(prefixes[0 | adjustedDate / 7])+1);
} 
 
gantt.config.scales = [
    {unit: "month", step: 1, format: "%F, %Y"},
    {unit: "week", step: 1, format: function(date){
       return "Week #" + getWeekOfMonthNumber(date);
    }},
    {unit: "day", step:1, format: "%j %D", css: function(date) { 
         if(!gantt.isWorkTime(date)){ 
             return "week-end"; 
         } 
    }} 
];

如果在標尺的配置中未指定css屬性，則可以定義scale_cell_class模板，以將CSS類應用于標尺配置的數組的第一時間標度。

function getWeekOfMonthNumber(date){
    let adjustedDate = date.getDate()+date.getDay();
    let prefixes = ['0', '1', '2', '3', '4', '5'];
    return (parseInt(prefixes[0 | adjustedDate / 7])+1);
} 
 
gantt.config.scales = [
    {unit: "month", step: 1, format: "%F, %Y"},
    {unit: "week", step: 1, format: function(date){
       return "Week #" + getWeekOfMonthNumber(date);
    }},
    {unit: "day", step:1, format: "%j %D"}
];
 
gantt.templates.scale_cell_class = function(date) {
         if(!gantt.isWorkTime(date)){
             return "week-end";
         }
};

要將scale_cell_class模板應用于時間標度的所有標度，請將Inherit_scale_class屬性設置為true。

gantt.config.scales = [
    {unit: "month", step: 1, format: "%F, %Y"},
    {unit: "week", step: 1, format: function(date){
       return "Week #" + getWeekOfMonthNumber(date);
    }},
    {unit: "day", step:1, format: "%j %D"}
];
 
gantt.templates.scale_cell_class = function(date) {
         if(!gantt.isWorkTime(date)){
             return "week-end";
         }
};
gantt.config.inherit_scale_class = true;

請注意，在使用工作時間計算時，可以使用isWorkTime代替硬編碼值：

gantt.config.work_time = true;
 
gantt.templates.scale_cell_class = function(date){
   if(!gantt.isWorkTime(date)){
      return "weekend";
   }
};

在“突出顯示時間段”文章中了解有關將自定義樣式應用于時間軸區域的更多信息。

自定義時間單位

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

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

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

第一個函數應返回任何給定日期的開始時間單位（例如，2月14日的month_start-> 2月1日）。
第二個函數將日期增加任何給定數量的持續時間單位（例如，“日期減去2天”）

讓我們創建一個“ 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"}
];

關產品推薦：

VARCHART XGantt：支持ActiveX、.Net等平臺的C#甘特圖控件

AnyGantt：構建復雜且內容豐富的甘特圖的理想工具

jQuery Gantt Package：基于HTML5 / jQuery的跨平臺jQuery Gantt包

phGantt Time Package：對任務和時間的分配管理的甘特圖

APS幫助提升企業生產效率，真正實現生產排程可視化呈現與控制,快速有效響應不同場景的生產計劃，提高準時交貨能力，提高產能和資源利用率

想要購買dhtmlxGantt正版授權，或了解慧都APS系統請點擊