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幫助提升企業生產效率，真正實現生產排程可視化呈現與控制,快速有效響應不同場景的生產計劃，提高準時交貨能力，提高產能和資源利用率
標簽：
本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉載自：
半島外圍網上直營 
21次
相關產品
正式授權
最新文章 
半島外圍網上直營相關的文章 
微信
在線咨詢
渝公網安備
50010702500608號
客服熱線