Dhtmlx Gantt教程：创建交互式甘特图的完整指南-阿里云开发者社区

在现代的项目管理中，时间是一种宝贵的资源，而甘特图则是一把解锁项目进度的魔法钥匙，想象一下，您可以在一个直观而动态的时间轴上，清晰地看到项目的每一个任务如何交织在一起，如何随着时间的推移展开，如何影响着项目的整体进度。这就是Dhtmlx Gantt带给我们的强大能力。

初识Dhtmlx Gantt

Dhtmlx Gantt配置项

Dhtmlx Gantt基础操作

多任务实现

初识Dhtmlx Gantt
Dhtmlx Gantt介绍：主要是用来创建和管理甘特图的工具库，甘特图是一种项目管理图表，通过条形图展示任务的开始时间、持续时间和完成进度，同时显示任务之间的依赖关系。Dhtmlx Gantt提供了丰富的功能和可定制选项，开发者可以轻松构建出功能强大、直观清晰的甘特图，用于项目计划和进度管理，从而使得用户可以灵活地配置和显示项目的时间轴、任务列表、资源分配情况等信息。这里我们可以阅读一下Dhtmlx Gantt的官网了解详细信息：地址：

因为公司项目主要使用react技术栈，这里我们就拿该框架进行举例，参考文档：地址：

插件安装：这里我们选择安装稳定版本(博主以稳定版本讲解)的，终端执行如下命令即可：

npm i dhtmlx-gantt
后面使用该插件的时候，直接导入包和对应的样式即可：

import { Gantt} from "dhtmlx-gantt";
import "dhtmlx-gantt/codebase/dhtmlxgantt.css";
当然也可以安装试用版本，和稳定版本有点区别，这里大家可自行去官网翻阅，这里不再赘述：

npm install @dhx/trial-gantt
如果您选择安装试用版，导入路径应如下所示：

import { Gantt} from "@dhx/trial-gantt";
import "@dhx/trial-gantt/codebase/dhtmlxgantt.css";
这里我们仿造官网给出的案例，如下给出先给出完整的代码进行基础演示：

import { useEffect, useRef } from 'react';
import { gantt } from 'dhtmlx-gantt';
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css';
import './index.less'

const data = {
// 任务数据
data: [
{
id: 1,
text: 'projectName',
start_date: '01-04-2023',
end_date: '05-12-2023',
progress: 0.3,
value: 20,
},
{
id: 2,
text: '任务1',
start_date: '02-04-2023',
end_date: '11-07-2023',
progress: 0.6,
value: 20,

    },
    {
        id: 3,
        text: '任务211',
        start_date: '02-04-2023',
        end_date: '23-07-2023',
        progress: 0,
        value: 20,

    }
],
// 任务连线数据
links: [
    { id: 1, source: 1, target: 2, type: '1' },
    { id: 2, source: 2, target: 3, type: '0' }
]

};

// 左侧标题数据
const columns = [
{ name: 'text', label: '项目名称', width: 100, align: "center" },
{ name: 'start_date', label: '开始时间', width: 100, align: "center" },
{ name: 'start_date', label: '开始时间', width: 100, align: "center" },
{ name: 'value', label: '计划工期', width: 100, align: "center" },
];

const GanttView = () => {
// 获取gantrt容器实例
const ganttRef = useRef();
// 初始化gantt
const initGantt = () => {
// 基础配置
gantt.clearAll() // 清空之前的配置
gantt.i18n.setLocale('cn'); // 设置中文
gantt.config.readonly = true; // 设置为只读，否则是可以移动甘特图和连线的
gantt.init(ganttRef.current); // 初始化甘特图
gantt.parse(data); // 渲染数据
gantt.config.order_branch = "marker";

    // 表头样式设置
    gantt.config.scale_height = 60; // 设置表头高度
    gantt.config.sort = true; // 点击表头可排序
    gantt.config.columns = columns; // 设置左侧表头数据
    gantt.config.scales = [ // 设置表头右侧刻度
        // 设置时间刻度相关属性
        // 显示月日用这个
        // { unit: 'month', step: 1, format: '%Y-%m' },
        // { unit: 'day', step: 1, format: '%Y-%m-%d' }
        // 显示年月用这个
        { unit: 'year', step: 1, format: '%Y' },
        { unit: 'month', step: 1, format: '%M' }
    ];

    // 表内容样式设置
    gantt.config.row_height = 40; // 设置内容行高
    gantt.config.bar_height = 40; // 设置进度条高度
    gantt.templates.task_text = function (start, end, task) { // 自定义内容进度上的文本
        return '内容'
    };
    // 表内容背景颜色
    gantt.templates.task_row_class = function (start, end, task) {
        return "gantt_task111";
    };

    // tooltips样式设置
    gantt.plugins({
        tooltip: true,
    });
    gantt.config.tooltip_offset_x = 10; 
    gantt.config.tooltip_offset_y = 30;
    gantt.templates.tooltip_text = function (start, end, task) {
        return (
            task.text +
            '<br/><span>开始:</span> ' +
            gantt.templates.tooltip_date_format(start) +
            '<br/><span>结束:</span> ' +
            gantt.templates.tooltip_date_format(end) +
            '<br/><span>进度:</span> ' +
            // Math.round(task.progress * 100) +
            '%'
        );
    };

    // 设置连线事件
    gantt.config.show_links = true;
}

useEffect(() => {
    initGantt();
}, []);

return (
    <div className="ganttView">
        <div className='ganttContainer' ref={ganttRef}></div>
    </div>
)

};
export default GanttView;

最终得到的效果如下所示：

Dhtmlx Gantt配置项
接下来开始对配置项进行一个简单的介绍，如下所示：

数据配置项：甘特图中表头标题和表内容中的数据

任务数据data：在任务数据中里面对象的配置项有各种属性值，接下来就常用的属性值介绍：

/
gantt.parse 方法中的 data 参数是一个包含任务信息的数组。每个任务都包含多个字段，下面是一些常用的字段及其作用：
id: 任务的唯一标识符。
text: 任务的名称。
start_date: 任务的开始日期，可以是一个字符串或者一个 Date 对象。
end_date: 任务的结束日期，可以是一个字符串或者一个 Date 对象。
duration: 任务的持续时间，以天为单位。如果 end_date 和 duration 都提供了，duration 会被忽略。
progress: 任务的进度，以百分比表示。
parent: 父任务的 id，如果当前任务是顶级任务，则该字段为 0。
open: 是否展开当前任务的子任务。如果不提供，默认为 true。
state: 用于设置任务的状态。状态可以是任何自定义值，例如 "in progress"、"completed"、"cancelled" 等等。在 Gantt 图中，任务的状态可以通过任务条颜色、边框、文本样式等 visulization 属性进行自定义渲染，以便用户更直观地了解任务状态的变化。可以在 Gantt 文档中的 Visualization 属性部分了解有关自定义任务状态可视化的更多信息。
除了上面列出的常用字段之外，还有很多其他可选字段，例如 color、link、type 等，可以根据实际需求来添加。 /

const data = [
{ id: 1, text: "Task 1", start_date: "2023-03-15", duration: 3 },
{ id: 2, text: "Task 2", start_date: "2023-03-18", duration: 2, parent: 1 },
];

links数组：链接数据数组，包含每个链接的信息，例如 id、source、target 等等。

// 任务连线数据
links: [
{ id: 1, source: 1, target: 2, type: '1' },
{ id: 2, source: 2, target: 3, type: '0' }
]
当然还有一些其他常见的配置项这里就不再一一赘述了，如下：

key: 任务数据对象中唯一标识每个任务的属性名称，默认为 "id"。
parent: 任务数据对象中用于标识父任务的属性名称，默认为 "parent".
open_tree_initially: 布尔值，如果设置为 true，则所有任务默认展开。
preserve_links: 布尔值，如果设置为 true，则链接信息中的任务不存在时也会保留链接。
preserve_tasks: 布尔值，如果设置为 true，则链接信息中的任务不存在时也会保留任务。
基础配置项：初始化甘特图时要进行的基础配置

gantt.clearAll() // 清空之前的配置
gantt.i18n.setLocale('cn'); // 设置中文
gantt.config.readonly = true; // 设置为只读，否则是可以移动甘特图和连线的
gantt.init(ganttRef.current); // 初始化甘特图
gantt.parse(data); // 渲染数据
表头样式配置项：对表头标题进行样式配置

// 甘特图样式设置
gantt.config.scale_height = 60; // 设置表头高度
// 设置头部左侧表头标题背景颜色
gantt.templates.grid_header_class = function (date, scale) {
return "gantt_grid_head111";
};
// 设置左侧标题表内容背景颜色
gantt.templates.grid_row_class = function (date, scale) {
return "gantt_scale_cell111";
};
// 设置头部右侧上标题内容背景颜色
gantt.templates.scale_cell_class = function (scale) {
return "gantt_grid_head111";
};
// 设置头部右侧下标题内容背景颜色
gantt.templates.scale_row_class = function (scale) {
return "gantt_grid_head111";
};
// 设置表主内容背景颜色
gantt.templates.task_row_class = function (start, end, task) {
return "gantt_task111";
};
gantt.config.sort = true; // 设置点击左侧表头可排序
gantt.config.columns = columns; // 设置左侧表头数据
gantt.config.scales = [ // 设置表头右侧刻度
// 设置时间刻度相关属性
// 显示月日用这个
// { unit: 'month', step: 1, format: '%Y-%m' },
// { unit: 'day', step: 1, format: '%Y-%m-%d' }
// 显示年月用这个
{ unit: 'year', step: 1, format: '%Y' },
{ unit: 'month', step: 1, format: '%M' }
];

表内容样式配置项：对表内容进行样式配置

// 表内容样式设置
gantt.config.row_height = 40; // 设置内容行高
gantt.config.bar_height = 40; // 设置进度条高度
gantt.templates.task_text = function (start, end, task) { // 自定义内容进度上的文本
return '内容'
};
悬浮框样式配置项：对表悬浮框进行样式配置

// tooltips样式设置
gantt.plugins({
tooltip: true,
// quick_info: true, // 快速信息框
// multiselect: true,// 激活多任务选择
});
gantt.config.tooltip_offset_x = 10; // 设置tooltips水平偏移量
gantt.config.tooltip_offset_y = 30; // 设置tooltips垂直偏移量
gantt.templates.tooltip_text = function (start, end, task) {
return (
task.text +
'
开始: ' +
gantt.templates.tooltip_date_format(start) +
'
结束: ' +
gantt.templates.tooltip_date_format(end) +
'
进度: ' +
// Math.round(task.progress * 100) +
'%'
);
};

Dhtmlx Gantt基础操作
接下来复现一下一个甘特图的效果，这里我们给出书写甘特图的流程书写：

初始化甘特图：首先我们创建甘特图的容器，然后进行一些初始配置：

import { useEffect, useRef } from 'react';
import { gantt } from 'dhtmlx-gantt';
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css';

const GanttView = () => {
// 获取gantrt容器实例
const ganttRef = useRef();
// 初始化gantt
const initGantt = () => {
gantt.clearAll() // 清空之前的配置
gantt.i18n.setLocale('cn'); // 设置中文
gantt.config.readonly = true; // 设置为只读，否则是可以移动甘特图和连线的
gantt.init(ganttRef.current); // 初始化甘特图
gantt.parse(data); // 渲染数据
}

useEffect(() => {
    initGantt();
}, []);

return (
    <div className="ganttView">
        <div className='ganttContainer' ref={ganttRef}></div>
    </div>
)

};
export default GanttView;

给出表头数据：接下来开始创建表头数据：

Dhtmlx Gantt教程：创建交互式甘特图的完整指南

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件