翻譯|使用教程|編輯:楊鵬連|2021-04-14 10:26:00.090|閱讀 2126 次
概述:dhtmlxGantt提供了一個內置模塊,可以方便地管理時間刻度縮放。如果您要自定義默認的縮放行為,則可以使用靈活的API來實現動態更改時間刻度設置的功能。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關鏈接:
dhtmlxGantt是用于跨瀏覽器和跨平臺應用程序的功能齊全的Gantt圖表。可滿足項目管理應用程序的所有需求,是最完善的甘特圖圖表庫。它允許你創建動態甘特圖,并以一個方便的圖形化方式可視化項目進度。有了dhtmlxGantt,你可以顯示活動之間的依賴關系,顯示具有完成百分比陰影的當前任務狀態以及組織活動到樹結構。
dhtmlxGantt提供了一個內置模塊,可以方便地管理時間刻度縮放。如果您要自定義默認的縮放行為,則可以使用靈活的API來實現動態更改時間刻度設置的功能。
內置變焦模塊
嵌入式縮放模塊在gantt.ext.zoom擴展中聲明。要啟用該模塊,您需要調用gantt.ext.zoom.init(zoomConfig)并傳遞帶有配置設置的zoomConfig對象,該配置設置包含一系列縮放級別。例如:
var zoomConfig = {
levels: [
{
name:"day",
scale_height: 27,
min_column_width:80,
scales:[
{unit: "day", step: 1, format: "%d %M"}
]
},
{
name:"week",
scale_height: 50,
min_column_width:50,
scales:[
{unit: "week", step: 1, format: function (date) {
var dateToStr = gantt.date.date_to_str("%d %M");
var endDate = gantt.date.add(date, 6, "day");
var weekNum = gantt.date.date_to_str("%W")(date);
return "#" + weekNum + ", " + dateToStr(date) + " - " + dateToStr(endDate);
}},
{unit: "day", step: 1, format: "%j %D"}
]
},
{
name:"month",
scale_height: 50,
min_column_width:120,
scales:[
{unit: "month", format: "%F, %Y"},
{unit: "week", format: "Week #%W"}
]
},
{
name:"quarter",
height: 50,
min_column_width:90,
scales:[
{unit: "month", step: 1, format: "%M"},
{
unit: "quarter", step: 1, format: function (date) {
var dateToStr = gantt.date.date_to_str("%M");
var endDate = gantt.date.add(gantt.date.add(date, 3, "month"), -1, "day");
return dateToStr(date) + " - " + dateToStr(endDate);
}
}
]},
{
name:"year",
scale_height: 50,
min_column_width: 30,
scales:[
{unit: "year", step: 1, format: "%Y"}
]}
]
};
gantt.ext.zoom.init(zoomConfig);
有關Zooming模塊及其API的詳細信息,請參見“ Zoom Extension”一文。
自定義縮放設置
如果您不想使用縮放模塊,而是希望手動控制縮放比例設置,則可以通過相應的配置選項進行操作。
實際上,實現縮放功能意味著定義時間刻度配置的多個預設(縮放級別),并為用戶提供在它們之間切換的能力。
您需要以下設置來配置時間刻度:
/* global gantt */
function setScaleConfig(level) {
switch (level) {
case "day":
gantt.config.scales = {
{unit: "day", step: 1, format: "%d %M"}
};
gantt.config.scale_height = 27;
break;
case "week":
var weekScaleTemplate = function (date) {
var dateToStr = gantt.date.date_to_str("%d %M");
var endDate = gantt.date.add(gantt.date.add(date, 1, "week"), -1, "day");
return dateToStr(date) + " - " + dateToStr(endDate);
};
gantt.config.scales = {
{unit: "week", step: 1, format: weekScaleTemplate},
{unit: "day", step: 1, format: "%D"}
};
gantt.config.scale_height = 50;
break;
case "month":
gantt.config.scales = {
{unit: "month", step: 1, format: "%F, %Y"},
{unit: "day", step: 1, format: "%j, %D"}
};
gantt.config.scale_height = 50;
break;
case "year":
gantt.config.scales = {
{unit: "year", step: 1, format: "%Y"},
{unit: "month", step: 1, format: "%M"}
};
gantt.config.scale_height = 90;
break;
}
}
所描述的功能可以通過四個預定義的配置之一(從“天”到“年”)配置甘特對象。甘特圖將需要完整的重新粉刷以顯示配置更改:setScaleConfig("year");
gantt.init("gantt_here");
然后,您可以為用戶實現一個UI,以切換縮放級別:<label><input type="radio" name="scale" value="day" checked/>Day scale</label> <label><input type="radio" name="scale" value="week"/>Week scale</label> <label><input type="radio" name="scale" value="month"/>Month scale</label> <label><input type="radio" name="scale" value="year"/>Year scale</label>
var els = document.querySelectorAll("input[name='scale']");
for (var i = 0; i < els.length; i++) {
els[i].onclick = function(e){
var el = e.target;
var value = el.value;
setScaleConfig(value);
gantt.render();
};
}
關產品推薦:
VARCHART XGantt:支持ActiveX、.Net等平臺的C#甘特圖控件
AnyGantt:構建復雜且內容豐富的甘特圖的理想工具
jQuery Gantt Package:基于HTML5 / jQuery的跨平臺jQuery Gantt包
phGantt Time Package:對任務和時間的分配管理的甘特圖
APS幫助提升企業生產效率,真正實現生產排程可視化呈現與控制,快速有效響應不同場景的生產計劃,提高準時交貨能力,提高產能和資源利用率
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉載自: