DHTMLX Gantt 概览
DHTMLX Gantt 是一个用于在浏览器中展示与编辑项目时间线的 JavaScript 组件。
它结合了可配置的数据表格、可缩放时间轴以及能理解工作时间、依赖关系与约束条件的调度引擎。
您可以利用它构建用于项目管理工具、建筑与制造计划、现场服务排程,或任何需要可视化时间线的应用程序。
DHTMLX Gantt 提供 Standard 和 PRO 两个版本。PRO 版本包括自动排程、关键路径、资源管理、动态加载等高级功能。
按框架快速开始
您可以将 DHTMLX Gantt 作为原生 JavaScript 组件使用,也可以集成到现代框架中。 从适合您技术栈的分步"入门指南"开始:

通过 script 标签或打包工具进行最小化设置。适用于简单页面或无框架的应用。

使用现成的 ReactGantt 组件(支持 Props 与事件)。

通过轻量级封装组件将 Gantt 集成到 Angular 项目中。

通过简洁封装与响应式 Props 将 Gantt 添加到 Vue 应用。

使用简单组件在 Svelte 中绑定 Gantt 的配置与事件。

在自定义组件中直接嵌入 Gantt 核心部件,以完全控制生命周期与数据流。

在 Salesforce 应用中嵌入 Gantt,与组织数据集成,将项目时间线引入 CRM。
在线示例
要查看 DHTMLX Gantt 的实际效果,请访问在线示例:
核心能力
DHTMLX Gantt 结合了调度引擎、灵活时间线与资源工具。 以下部分介绍主要功能领域并指向更深入的文档。
项目调度
DHTMLX Gantt 的调度引擎理解项目结构与工作时间:
调度行为可根据您的规则或例如 MS Project 的逻辑进行调整。
时间线与数 据表
组件由左侧数据表与右侧可缩放时间轴组成,两部分都可以高度自定义:
高级项目控制
实现更深入的项目跟踪:
资源与工作量管理(PRO)
PRO 版本增加完整的资源管理层:
它将 Gantt 图扩展为应用内的轻量级资源管理工具。
导出与生态系统
DHTMLX Gantt 可与外部系统集成并支持多种导出/导入格式:
- 可导出为 PDF/PNG 与 Excel(含 Node.js 导出模块)
- 可与 MS Project 和 Primavera 互通(通过服务导出)
前端与后端集成
前端集成
DHTMLX Gantt 是框架无关的原生 JavaScript 组件,可在所有现代浏览器中运行,可用方式包括:
针对 React:
- 使用 官方 ReactGantt 封装,以声明式 props 管理 Gantt(推荐方式)
- 使用 低级 React 集成 以自主管理初始化、销毁与数据流
针对 Angular / Vue / Svelte,可参考各自的 "How to start" 指南构建轻量封装组件。
后端集成
在后端,Gantt 通过 REST 风格的 API 通信:
- 数据通常以 JSON(任务、链接、资源、分配) 形式加载与保存
- 内置 DataProcessor 可辅助处理增删改操作的路由
- 针对 Node.js、.NET Core、Laravel 等后端框架均提供示例教程
因此,Gantt 易于集成进已有系统或新的微服务。
下一步
若您刚开始使用:
- 选择并完成适用于 您框架的 入门指南。
- 配置 表格列、工作时间日历、时间轴 与 编辑行为。
- 连接后端,设置 DataProcessor 与任务/链接/资源的 REST 接口。
- 在需要深度自定义时,查阅 Guides 与 API 文档。
若您正在从旧版本升级,请查看 更新日志,了解最新功能与迁移指南。