dhtmlx-gantt甘特图之右侧bar图形着色(任务着色)

任务着色

着色任务是一种简单但有效的方法，可以将用户的注意力集中在特定的任务上，例如您可以对甘特图时间轴中的任务使用不同的颜色来强调他们的优先级。对于我们的甘特图组件，你可以通过应用task_class模板来完成。它返回任务的自定义类名，然后将此名称用作CSS中的选择器，用于添加自定义样式。

<style>
body,
html {
width: 100%;
height: 100%;
margin: unset;
}
 
.red_color {
background: red;
}
 
.blue_color {
background: blue;
}
 
.gray_color {
background: gray;
 
}
 
.gantt_task_progress {
background-color: rgba(33, 33, 33, 0.17);
}
</style>

gantt.templates.task_class = function (start, end, task) {
    switch (task.priority) {
        case "high":
        return 'red_color'
        case "medium":
        return 'blue_color'
        case "low":
        return 'gray_color'
    }
}

在本示例中，我们用三种自定义颜色显示任务，它们对应于特定的优先级级别——高、中、低。