项目管理软件dhtmlxGantt配置教程（十六）：如何添加垂直标记

甘特图图库中提供了标记扩展功能，可以帮助您实现标记（突出显示）某些日期或日期范围。

<!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>

1、添加标记

要将标记添加到时间线区域，例如今天的标记，请调用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:...}

2、删除标记

要删除已添加的标记，请使用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);

3、隐藏标记

要隐藏所有添加的标记，请将show_markers配置选项设置为“false”：

var marker1 = gantt.addMarker({ ...});var marker2 = gantt.addMarker({ ...});var marker3 = gantt.addMarker({ ...});gantt.config.show_markers = false;// hides all 3 markers

4、更新标记

要更新标记，请使用 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();

5、样式标记

要设置标记样式，请使用gantt.templates.marker_class模板：

var showAdvancedMarkers;gantt.templates.marker_class = function(marker){    if (showAdvancedMarkers)    return "advanced_marker";    return "hidden";}

6、当天的标记

如果您想在甘特图中对今天进行标记。在这种情况下，您需要两者：在页面上添加标记并提供将随着时间变化移动标记的功能。您可以使用以下代码执行此操作：

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 欢迎进群交流讨论

年终狂欢季，全场产品，限时特惠，立即了解详情！

标签：

声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！