彩票走势图

项目管理软件dhtmlxGantt配置教程(十六):如何添加垂直标记

翻译|使用教程|编辑:秦林|2022-11-01 16:08:16.620|阅读 554 次

概述:本文给大家讲解DHTMLX Gantt如何添加垂直标记,包括添加、删除、隐藏等操作方式,欢迎大家下载试用版体验!

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

dhtmlxgantt中文教程

本文给大家讲解DHTMLX Gantt如何添加垂直标记。

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

慧都年终狂欢季,全场产品,限时特惠,立即了解详情!


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn


为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP