如何在Syncfusion甘特图任务栏内正确显示数据标记？

你遇到的问题是任务起止日期范围内的数据标记被任务栏遮挡，无法正常显示。以下是两种可行的解决方法：

方法一：通过CSS调整标记层级 #

直接给数据标记设置更高的层级，确保它显示在任务栏上方：

/* 提升数据标记的z-index层级，覆盖任务栏 */
.e-gantt-indicator {
    z-index: 10;
    position: relative;
}

方法二：使用自定义任务栏模板 #

通过自定义任务栏模板，将标记嵌入到任务栏结构中，主动控制显示层级：

1. 定义任务栏模板 #

<script id="customTaskbarTemplate" type="text/x-template">
    <div class="e-custom-taskbar" style="background-color: ${data.TaskColor}; height:100%; position:relative;">
        <!-- 遍历生成数据标记 -->
        ${data.Indicators.map(ind => {
            // 计算标记在任务栏内的相对位置百分比
            const startMs = new Date(data.StartDate).getTime();
            const endMs = new Date(data.EndDate).getTime();
            const indMs = new Date(ind.date).getTime();
            const positionPercent = ((indMs - startMs) / (endMs - startMs)) * 100;
            return `<div class="${ind.iconClass}" style="position:absolute; left:${positionPercent}%; top:50%; transform:translate(-50%, -50%); z-index:1;" title="${ind.tooltip}"></div>`;
        }).join('')}
    </div>
</script>

2. 配置甘特图引用模板 #

var ganttObj = new ej.gantt.Gantt({
    // 其他基础配置项...
    taskbarTemplate: '#customTaskbarTemplate',
    // 你的任务数据源
    dataSource: [
        {
            TaskID: 1,
            TaskName: 'Project Initiation',
            StartDate: new Date('04/02/2019'),
            EndDate: new Date('05/21/2019'),
            Indicators: [
                {
                    'date': '04/10/2019',
                    'name': 'Design Phase',
                    'tooltip': 'Scheduled checkin',
                    'iconClass': 'okIcon e-icons'
                }
            ],
            TaskColor:'purple'
        }
    ]
});
ganttObj.appendTo('#Gantt');

Syncfusion甘特图数据标记中文说明 #

数据标记用于在甘特图任务栏上展示关键事件或里程碑，可通过任务数据中的Indicators数组配置，每个标记支持以下属性：

• date：标记对应的日期（决定在任务栏上的位置）
• name：标记的名称标识
• tooltip：鼠标悬停时显示的提示文本
• iconClass：用于自定义标记图标的CSS类名

默认情况下，数据标记会根据日期定位到任务栏对应位置，但当标记处于任务栏范围内时，可能会被任务栏元素遮挡，通过上述两种方法可调整显示层级，实现标记在任务栏内正常显示的效果。

内容的提问来源于stack exchange，提问作者deanpillow