翻譯|使用教程|編輯:秦林|2022-11-01 16:08:16.620|閱讀 681 次
概述:本文給大家講解DHTMLX Gantt如何添加垂直標記,包括添加、刪除、隱藏等操作方式,歡迎大家下載試用版體驗!
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關鏈接:
本文給大家講解DHTMLX Gantt如何添加垂直標記。
甘特圖圖庫中提供了標記擴展功能,可以幫助您實現標記(突出顯示)某些日期或日期范圍。
<!DOCTYPE html> <html> <head> <script src="codebase/dhtmlxgantt.js"></script> <link href="codebase/dhtmlxgantt.css" rel="stylesheet"> </head> <body> gantt.plugins({ marker: true }); //your code will be here </body> </html>
要將標記添加到時間線區域,例如今天的標記,請調用addMarker方法:
var dateToStr = gantt.date.date_to_str(gantt.config.task_date); var markerId = gantt.addMarker({ start_date: new Date(), //a Date object that sets the marker's date css: "today", //a CSS class applied to the marker text: "Now", //the marker title title: dateToStr( new Date()) // the marker's tooltip });
注意:作為 'text' 屬性的值,該方法可以采用任何 HTML
要獲取添加標記的對象,請使用getMarker方法:
var dateToStr = gantt.date.date_to_str(gantt.config.task_date); var markerId = gantt.addMarker({ start_date: new Date(), css: "today", text: "Now", title: dateToStr(new Date()) }); gantt.getMarker(markerId); //->{css:"today", text:"Now", id:...}
要刪除已添加的標記,請使用deleteMarker方法:
var dateToStr = gantt.date.date_to_str(gantt.config.task_date); var markerId = gantt.addMarker({ start_date: new Date(), css: "today", text: "Now", title: dateToStr(new Date()) }); gantt.deleteMarker(markerId);
要隱藏所有添加的標記,請將show_markers配置選項設置為“false”:
var marker1 = gantt.addMarker({ ...}); var marker2 = gantt.addMarker({ ...}); var marker3 = gantt.addMarker({ ...}); gantt.config.show_markers = false;// hides all 3 markers
要更新標記,請使用 updateMarker方法:
var dateToStr = gantt.date.date_to_str(gantt.config.task_date); var markerId = gantt.addMarker({ start_date: new Date(), css: "today", text: "Now", title: dateToStr(new Date()) }); gantt.getMarker(markerId).css = "today_new"; gantt.updateMarker(markerId);
要更新所有添加的標記,請使用 renderMarkers方法:
var marker1 = gantt.addMarker({ ...}); var marker2 = gantt.addMarker({ ...}); var marker3 = gantt.addMarker({ ...}); gantt.renderMarkers();
要設置標記樣式,請使用gantt.templates.marker_class模板:
var showAdvancedMarkers; gantt.templates.marker_class = function(marker){ if (showAdvancedMarkers) return "advanced_marker"; return "hidden"; }
如果您想在甘特圖中對今天進行標記。在這種情況下,您需要兩者:在頁面上添加標記并提供將隨著時間變化移動標記的功能。您可以使用以下代碼執行此操作:
var dateToStr = gantt.date.date_to_str(gantt.config.task_date); var id = gantt.addMarker({ start_date: new Date(), css: "today", title:dateToStr(new Date()) }); setInterval(function(){ var today = gantt.getMarker(id); today.start_date = new Date(); today.title = date_to_str(today.start_date); gantt.updateMarker(id); }, 1000*60);
DHTMLX Gantt享有超十年聲譽,支持跨瀏覽器和跨平臺,性價比高,可滿足項目管理控件應用的所有需求,是最完善的甘特圖圖表庫。了解更多內容,歡迎在線咨詢或者私信我獲取正版試用版及報價。
甘特圖控件交流群:764148812 歡迎進群交流討論
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn