该库包含了 marker 扩展,可以让你在时间轴上高亮显示特定的日期或日期区间。
要开始使用此扩展,请通过调用 gantt.plugins 方法启用 marker 插件。
<!DOCTYPE html>
<html>
<head>
<script src="codebase/dhtmlxgantt.js"></script>
<link href="codebase/dhtmlxgantt.css" rel="stylesheet">
</head>
<body>
gantt.plugins({ marker: true }); //你的代码将在这里编写
</body>
</html>
Related sample: Today and Status lines in Gantt (vertical markers)
要在时间轴上添加一个标记,比如显示今天日期的标记,可以使用 addMarker 方法:
var dateToStr = gantt.date.date_to_str(gantt.config.task_date);
var markerId = gantt.addMarker({
start_date: new Date(), // 指定标记日期的 Date 对象
css: "today", // 应用于标记的 CSS 类
text: "Now", // 标记标签
title: dateToStr(new Date()) // 标记的提示文本
});
Related sample: Today and Status lines in Gantt (vertical markers)
请注意,'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:...}
Related sample: Today and Status lines in Gantt (vertical markers)
要删除之前添加的标记,请使用 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; // 隐藏所有 3 个标记
如需修改某个标记,请使用 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 = dateToStr(today.start_date);
gantt.updateMarker(id);
}, 1000*60);
Related sample: Today and Status lines in Gantt (vertical markers)
Back to top