如何解决如何在日期行上方的 dhtmlx 甘特图上显示工具提示
我有一个甘特图，我在日期行上方多出了一行。这里这一行的文本来自 switch 语句，通过比较 obj 变量的项目的日期。现在我只想将鼠标悬停在顶行的任何单元格上，例如，如果我将鼠标悬停在工具提示中的“一”上，它应该显示一个，如果我将鼠标悬停在“二”上，它应该显示两个。下面是代码。
HTML
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' type='text/css' href='http://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.css'>
<script src='http://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.js'></script>
<style>
.gantt_custom_button {
background-color: rgb(206,206,206);
position: absolute;
right: -10px;
top: 5px;
width: 20px;
height: 26px;
border-radius: 0;
}
</style>
</head>
<div id='gantt_here' style='width:100%; height:500px;'></div>
<body>
<script>
var task1 = {
'data': [{
'id': 1,'text': 'Project #1','start_date': '01-04-2019','duration': 2,'order': 10,'progress': 0.4,'open': true
},{
'id': 2,'text': 'Task #1','start_date': '02-04-2019','duration': 1,'progress': 0.6,'parent': 1
},{
'id': 3,'text': 'Task #2','start_date': '03-04-2019','order': 20,{
'id': 4,'text': 'Task #3','start_date': '05-04-2019','parent': 1
}
],'links': [{
'id': 1,'source': 1,'target': 2,'type': '1'
},'source': 2,'target': 3,'type': '0'
},'source': 3,'target': 4,'target': 5,'type': '2'
}
]
};
const Celldisplay = item => {
switch (item) {
case 'item1':
return 'one';
case 'item2':
return 'two';
case 'item3':
return 'three';
case 'item4':
return 'four';
case 'item5':
return 'five';
case 'item6':
return 'six';
case 'item7':
return 'seven';
}
};
//const nonMilestone = ['']
const forLaunch = lData => {
const scale = {
unit: 'day',step: 1,format: date => {
for (const key in lData) {
console.log(key);
if(lData.hasOwnProperty(key)){
if(lData[key] && date.toISOString().substring(0,10) === lData[key].substring(0,10)){
//console.log(date.toISOString()+"---"+lData[key].substring(0,10));
return Celldisplay(key)
}
}
}
return '';
}
}
return scale;
};
gantt.config['scales'] = [{
unit: 'day',format: '%d %M'
}];
const Obj = [{
Id: 575,items: {
item1: '2019-03-30T10:00:00.000+0000',item2: '2019-03-31T00:00:00.000+0000',item3: '2019-04-01T10:00:00.000+0000',item4: '2019-04-02T10:00:00.000+0000',item5: '2019-04-03T10:00:00.000+0000',item6: '2019-04-04T10:00:00.000+0000',item7: '2019-04-05T10:00:00.000+0000'
},active: false
}];
Obj.forEach(data => {
gantt.config['scales'].unshift(forLaunch(data.items));
});
gantt.init('gantt_here');
gantt.parse(task1);
</script>
</html>
解决方法
您需要手动将工具提示附加到比例单元并返回其innerHTML：
gantt.ext.tooltips.tooltipFor({
selector: ".gantt_scale_cell",html: function(event,domElement){
return domElement.innerHTML;
}
});
https://docs.dhtmlx.com/gantt/desktop__tooltips.html#tooltipsfordifferentelements
这是一个例子：
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。