DHTMLX-gantt组件显示不同的颜色

在 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 组件中显示不同的颜色，以满足你的需求。

原文地址：https://blog.csdn.net/qq_42535394/article/details/143793004

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！