可以通过监听drawitem事件来控制右侧条形图的html外观,达到任意的条形图效果。
示例地址:demo/DiyDisplayGantt.html
代码如下:
//1)自定义条形图外观显示
project.on("drawitem", function (e) {
var item = e.item;
var left = e.itemBox.left,
top = e.itemBox.top,
width = e.itemBox.width,
height = e.itemBox.height;
if (!item.Summary && !item.Milestone) {
var percentWidth = width * (item.PercentComplete / 100);
e.itemHtml = '<div id="' + item._id + '" class="myitem" style="left:' + left + 'px;top:' + top + 'px;width:' + width + 'px;height:' + (height) + 'px;">';
e.itemHtml += '<div style="width:' + (percentWidth) + 'px;" class="percentcomplete"></div>';
e.itemHtml += '</div>';
//e.ItemHtml = '<a href="http://www.baidu.com" style="left:'+left+'px;top:'+top+'px;width:'+width+'px;height:'+(height-2)+'px;" class="myitem">111</a>';
}
});
//2)自定义条形图提示信息
project.on('itemtooltipneeded', function (e) {
var task = e.task;
e.tooltip = "<div>任务:" + task.Name + "</div>"
// + "<div ><div style='float:left;'>进度:<b>"+task.PercentComplete + "%</b></div>"
// + "<div style='float:right;'>工期:"+task.Duration + "日</div></div>"
+ "<div style='clear:both;'>开始日期:" + mini.formatDate(task.Start, 'yyyy-MM-dd') + "</div>"
+ "<div>完成日期:" + mini.formatDate(task.Finish, 'yyyy-MM-dd') + "</div>";
});
标签:task,自定义,示例,中间件,item,itemBox,var,条形图
From: https://blog.51cto.com/u_16081226/6365458