dhtmlxGantt是用于跨瀏覽器和跨平臺應(yīng)用程序的功能齊全的Gantt圖表?？蓾M足項(xiàng)目管理應(yīng)用程序的所有需求，是最完善的甘特圖圖表庫。它允許你創(chuàng)建動態(tài)甘特圖，并以一個(gè)方便的圖形化方式可視化項(xiàng)目進(jìn)度。有了dhtmlxGantt，你可以顯示活動之間的依賴關(guān)系，顯示具有完成百分比陰影的當(dāng)前任務(wù)狀態(tài)以及組織活動到樹結(jié)構(gòu)。
點(diǎn)擊下載dhtmlxGantt試用版
比例尺的配置是通過scales屬性指定的。您可以通過在scales配置數(shù)組中設(shè)置比例尺對象來指定任意數(shù)量的比例尺：
// 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 }
];
時(shí)間單位
要設(shè)置比例單位，請?jiān)谙鄳?yīng)的比例對象中使用unit屬性：
可能的值為：“分鐘”，“小時(shí)”，“天”，“周”，“季度”，“月”，“年”。
gantt.config.scales = [
{unit: "month", step: 1, format: "%F, %Y"},
{unit: "day", step: 1, format: "%j, %D"}
];
gantt.init("gantt_here");
范圍
默認(rèn)范圍設(shè)置
如果未明確指定日期范圍，則甘特圖將使用已加載任務(wù)的日期，并在比例尺中的第一個(gè)任務(wù)和最后一個(gè)任務(wù)之后添加偏移量。偏移量是由時(shí)間刻度的設(shè)置定義的。根據(jù)scale_offset_minimal值，它可以是通過scales選項(xiàng)的unit屬性定義的時(shí)間單位，也可以是最小的時(shí)間標(biāo)度單位。
您可以使用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ù)行，但是直到完成完整的重新繪制操作，才可以看到條形元素。
為了自動調(diào)整比例，請使用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");
也可以在gantt初始化調(diào)用中指定它們：
gantt.init("gantt_here", new Date(2018, 02, 31), new Date(2018, 03, 09));
除非標(biāo)記為unscheduled，否則不適合指定時(shí)間間隔的任務(wù)將不會顯示在甘特圖中。
筆記
如果同時(shí)指定了start_date和end_date選項(xiàng)，并且您創(chuàng)建的任務(wù)不在范圍內(nèi)，則該任務(wù)將從圖表中消失。 要在圖表中顯示任務(wù)，請使用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;
});
動態(tài)改變顯示范圍
有幾種方法可以即時(shí)更改顯示的范圍：
-
您可以借助start_date / end_date配置控制時(shí)間范圍，但可以動態(tài)調(diào)整它們以顯示加載的任務(wù)。
您可以通過在每次重新繪制甘特圖時(shí)更新start_date / end_date配置來重新計(jì)算比例范圍，以實(shí)現(xiàn)此目的：
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");
要在每次任務(wù)不適合現(xiàn)有縮放間隔時(shí)“強(qiáng)制”縮放比例重新渲染，請將fit_tasks屬性設(shè)置為true：
gantt.config.fit_tasks = true;
gantt.init("gantt_here");
在這兩種情況下的起始日期和END_DATE指定了選項(xiàng)，你需要使用上述選項(xiàng)之一為fit_tasks屬性正常工作。
-
通過在onTaskDrag事件的處理程序中指定必要的邏輯，也可以在拖動任務(wù)時(shí)自動更改比例：
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ù)
可以在甘特圖中顯示不符合指定日期范圍的任務(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));
結(jié)果，標(biāo)識為“ 1”和“ 2”的任務(wù)將在頁面上顯示為時(shí)間軸區(qū)域中的空行，并在網(wǎng)格中具有指定的名稱和開始日期。
時(shí)間步長
要設(shè)置時(shí)間刻度的步進(jìn)，請?jiān)谙鄳?yīng)的刻度對象中使用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");
高度
要設(shè)置比例尺的高度，請使用scale_height屬性：
gantt.config.scale_height = 54;
gantt.init("gantt_here");
如果您有多個(gè)比例尺，它們將平均分配指定的高度。例如，如果scale_height為60像素，并且您有3個(gè)比例，則每個(gè)比例的高度將為60/3 = 20像素。
日期格式
要設(shè)置比例尺的格式，請?jiān)谙鄳?yīng)的比例尺對象中使用format屬性。日期的格式可以設(shè)置為字符串：
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");
或作為一個(gè)將日期對象作為參數(shù)的函數(shù)：
gantt.config.scales = [
{ unit: "day", step:1, format: function(date){
return "<strong>Day " + dayNumber(date) + "</strong><br/>" + dateFormat(date);
}}
]
造型風(fēng)格
要設(shè)置時(shí)間標(biāo)度的單元格樣式，請?jiān)谙鄳?yīng)的標(biāo)度對象中使用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";
}
}}
];
如果在標(biāo)尺的配置中未指定css屬性，則可以定義scale_cell_class模板，以將CSS類應(yīng)用于標(biāo)尺配置的數(shù)組的第一時(shí)間標(biāo)度。
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模板應(yīng)用于時(shí)間標(biāo)度的所有標(biāo)度，請將Inherit_scale_class屬性設(shè)置為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;
請注意，在使用工作時(shí)間計(jì)算時(shí)，可以使用isWorkTime代替硬編碼值：
gantt.config.work_time = true;
gantt.templates.scale_cell_class = function(date){
if(!gantt.isWorkTime(date)){
return "weekend";
}
};
在“突出顯示時(shí)間段”文章中了解有關(guān)將自定義樣式應(yīng)用于時(shí)間軸區(qū)域的更多信息。
自定義時(shí)間單位
dhtmlxGantt允許您定義自定義時(shí)間單位并為比例配置中的標(biāo)簽設(shè)置模板。
要定義自定義單位，您需要在Date對象中定義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日的month_start-> 2月1日）。
-
第二個(gè)函數(shù)將日期增加任何給定數(shù)量的持續(xù)時(shí)間單位（例如，“日期減去2天”）
讓我們創(chuàng)建一個(gè)“ fiscal_year”單位，并假設(shè)一個(gè)會計(jì)年度將在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"}
];
關(guān)產(chǎn)品推薦：
VARCHART XGantt：支持ActiveX、.Net等平臺的C#甘特圖控件
AnyGantt：構(gòu)建復(fù)雜且內(nèi)容豐富的甘特圖的理想工具
jQuery Gantt Package：基于HTML5 / jQuery的跨平臺jQuery Gantt包
phGantt Time Package：對任務(wù)和時(shí)間的分配管理的甘特圖
APS幫助提升企業(yè)生產(chǎn)效率，真正實(shí)現(xiàn)生產(chǎn)排程可視化呈現(xiàn)與控制,快速有效響應(yīng)不同場景的生產(chǎn)計(jì)劃，提高準(zhǔn)時(shí)交貨能力，提高產(chǎn)能和資源利用率
標(biāo)簽：
本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉(zhuǎn)載自：
金喜正規(guī)買球 
18次
相關(guān)產(chǎn)品
正式授權(quán)
最新文章 
金喜正規(guī)買球相關(guān)的文章 
微信
在線咨詢
渝公網(wǎng)安備
50010702500608號
客服熱線