在 dhtmlxGantt 组件中,你可以通过自定义任务的颜色来显示不同的任务类型或状态。这通常通过配置任务的 color
属性来实现。你可以在初始化 Gantt 图表时或在动态添加任务时设置这个属性。
以下是一些常见的方法来为任务设置不同的颜色:
1. 初始化时设置颜色
在初始化 Gantt 图表时,你可以通过配置任务数据来设置颜色。例如:
gantt.config.xml_date = "%Y-%m-%d %H:%i";
gantt.init("gantt_here");
var tasks = {
data: [
{id:1, text:"Task #1", start_date:"01-04-2023", duration:3, color:"#ff9999"},
{id:2, text:"Task #2", start_date:"02-04-2023", duration:4, color:"#66b2ff"},
{id:3, text:"Task #3", start_date:"04-04-2023", duration:2, color:"#99ff99"}
],
links: [
{id:1, source:1, target:2, type:"1"},
{id:2, source:2, target:3, type:"0"}
]
};
gantt.parse(tasks);
2. 动态添加任务时设置颜色
如果你需要在运行时动态添加任务,也可以设置颜色:
gantt.addTask({
id: 4,
text: "New Task",
start_date: "06-04-2023",
duration: 2,
color: "#ff6666"
});
3. 使用模板自定义颜色
你还可以通过自定义模板来动态设置颜色。例如,根据任务的某些属性(如优先级或状态)来设置颜色:
gantt.templates.task_class = function(start, end, task) {
if (task.priority === 1) {
return "task-high-priority";
} else if (task.priority === 2) {
return "task-medium-priority";
} else {
return "task-low-priority";
}
};
// 然后在你的 CSS 中定义这些类
<style>
.task-high-priority {
background-color: #ff6666 !important;
}
.task-medium-priority {
background-color: #ffcc66 !important;
}
.task-low-priority {
background-color: #99ff99 !important;
}
</style>
注意:使用 !important
可以确保自定义样式覆盖 Gantt 的默认样式。
4. 更新现有任务的颜色
如果你需要更新现有任务的颜色,可以直接修改任务对象并调用 gantt.refreshData()
方法:
var task = gantt.getTaskById(1);
task.color = "#ff0000"; // 新颜色
gantt.refreshData();
通过以上方法,你可以灵活地在 dhtmlxGantt 组件中显示不同的颜色,以满足你的需求。