项目管理工具dhtmlxGantt甘特图入门教程（五）：甘特图实例特点

小董讲MES

关注

最新推荐文章于 2025-03-09 12:42:56 发布 · 1.6k 阅读

原创

本文为博客 VIP 文章，开通 VIP 后可阅读全文

开通 VIP

本文重点介绍使用Gantt Instance的主要功能。

点击获DhtmlxGantt官方正式版

让我们考虑最常见的情况-构建具有多个页面/选项卡/视图的应用程序。

以下方法适用于基于 Angular（或基于 React）的应用程序，并且仅在dhtmlxGantt的商业版、企业版或旗舰版中可用（在 GPL 或个人版中不可用）：

当您使用甘特图打开页面/选项卡/视图时，您需要创建一个新的甘特图实例；
当您切换到不同的页面/选项卡/视图时，您需要销毁甘特图实例。

自定义事件

当您使用甘特图加载页面时，您需要在添加事件之前手动将事件的ID保存到数组中：

const onTaskClick = gantt.attachEvent('onTaskClick', (id) => {
    gantt.message(`onTaskClick: Task ID: ${id}`);
    return true;
}, '');
eventIDs.push(onTaskClick);

当您切换到另一个页面时，您需要使用已保存到数组的ID手动分离事件：

eventIDs.forEach(event => gantt.detachEvent(event));
eventIDs = [];

数据处理器

你需要手动销毁dataProcessor：

dp.destructor();

请注意，您只需要销毁数据处理器，而不是甘特图。否则，在重新加载页面之前，您将无法使用甘特图。

最低0.47元/天解锁文章

收录于

当前文章被以下社区和专栏收录：

标签

#gantt #dhtmlxgantt #项目管理工具 #项目管理控件 #甘特图

项目管理工具dhtmlxGantt甘特图入门教程（七）：在服务器上使用甘特图 这篇文章给大家讲解如何在服务器上使用dhtmlxGantt。阅读详情

相关推荐

项目管理工具dhtmlxGantt入门教程（二）：如何初始化dhtmlxGantt（上）

本篇文章给大家讲解如何初始化dhtmlxGantt。

需要项目管理工具、数据库管理工具、JAVA开发工具等下载和试用资源的朋友，记得私信我~ 1126

react-gantt-demos:https

React Gantt演示在线演示：：演示代码： : 最小项目： : 入门 npm run start在开发模式下运行应用程序。打开在浏览器中查看它。支持的功能与DHTMLX Gantt共同添加/编辑/删除任务和链接任务，项目和里程碑可配置的刻度和网格可配置的工具提示时间标记独特的功能 react小部件可用于任务渲染，工具提示和表单控件所有配置属性都是React性的提供完整的React源用法安装将库添加到您的React项目 npm install @ dhtmlx / trial - react - gantt 这将安装试用版，对于商业版，请使用“ @ dhx / react-gantt” 将甘特标签放入所需的页面 import { Gantt , DefaultTheme } from "@dhtmlx/trial-react-gantt" ;

Vue Dhtmlxgantt甘特图/横道图 baselines 含（计划、实际时间对比）树形实例实现及部分扩展

满足计划、实际时间甘特图对比需求

null 6846

react版本的甘特图，gantt-task-react改造版本

1.切断了原来插件里面父组件为project，子组件为task的关联关系，变成任务都是task。 2.父子组件的关联关系，通过groupId来确定， 3.把原来插件的时间图形高度，缩短为原来的一半高，定为计划时间 4.新画一条图形作为实际时间，只能看不能拖动 5.要注意的是，左侧的计划开始时间，计划结束时间，实际开始时间和实际结束时间，和右侧的计划时间和实际时间，所用的字段不同。左侧用的是计划开始和计划结束时间，右侧对应的是开始和结束。左侧用的是actual开始时间，右侧用的是act开始时间，结束时间也是一样。 6. 增加isChecked和toggleNumber来控制显示多少列表格

react-gantt-demo:dhtmlxGantt和ReactJS

React.JS的甘特图 这是在dhtmlxGantt的帮助下制作的React gantt图表演示应用程序。该演示包括时间比例缩放的实现以及用户可以在甘特图中进行的更改处理。由于dhtmlxGantt的丰富功能，可以添加更多功能： ://dhtmlx.com/docs/products/dhtmlxGantt/#product-features 如何开始克隆存储库或下载文件安装依赖 yarn install 或者 npm install 运行服务器 yarn start 或者 npm start 相关资源在此处阅读完整的教程： : 在此处了解有关dhtmlxGantt的信息： ://dhtmlx.com/docs/products/dhtmlxGantt/ 在此处了解有关React的信息： :

一起来了解React的四种优秀甘特图方案（下篇）

接上篇！！！ 3. DHTMLX Gantt(https://dhtmlx.com/docs/products/dhtmlxGantt/) 作为一款功能齐全的甘特图工具，DHTMLX Gantt能够实现跨浏览器和平台的应用。它能够完全自定义各种图表，其灵活的API也能够方便每个元素的配置。您可以自定义从任务栏到网格结构的所有内容。使用其缩放功能，以及在月、日和小时之间灵活的切换，您可以更专注于...

weixin_44542399的博客 4910

记一次 React 开源甘特图组件的性能优化，已合入 PR！

背景公司项目最近用到甘特图功能，于是集成了一款开源的甘特图插件。甘特图的主要作用是项目管理，可以用图示的方式通过活动列表和时间刻度形象地表示出任何特定项目的活动顺序与持续时间，如下图ima...

qq_34998786的博客 3697

angular-gantt：AngularJS的甘特图组件

角度甘特 AngularJS的甘特图组件为您的应用程序提供了一个gantt图表组件。现在试试现在使用尝试angular-gantt。还可以使用。它是针对分支构建的，允许预览前沿功能，但可能非常不稳定。您甚至可以使用带有（最新版本）和（develop分支）的Plunker沙箱来尝试API。特征模型和视图之间的双向数据绑定。先进的日历支持可定义假期和工作时间。每个任务和行都有其自己的属性和行为。行和任务可以排序和过滤。插件架构可添加自定义功能和挂钩。侦听事件和从控制器调用方法的API。文件文档是使用，可从（稳定）和（开发）获取。凉亭可以通过和获得angular- 。 npm install angular-gantt bower install angular-gantt 或者 npm install https://github.c

项目管理工具dhtmlxGantt入门教程（二）：如何初始化dhtmlxGantt（下）

本篇文章继续给大家讲解如何初始化dhtmlxGantt。

需要项目管理工具、数据库管理工具、JAVA开发工具等下载和试用资源的朋友，记得私信我~ 1144

项目管理工具dhtmlxGantt甘特图入门教程（六）：dhtmlxGantt的扩展完整列表

这篇文章给大家讲解dhtmlxGantt的扩展完整列表。

需要项目管理工具、数据库管理工具、JAVA开发工具等下载和试用资源的朋友，记得私信我~ 1022

项目管理工具dhtmlxGantt甘特图入门教程（四）：用HTML作为内部视图及相关设置

这篇文章给大家讲解 dhtmlxGantt用HTML作为内部视图和相关设置。

需要项目管理工具、数据库管理工具、JAVA开发工具等下载和试用资源的朋友，记得私信我~ 772

项目管理工具dhtmlxGantt甘特图入门教程（八）：数据加载（三）

这篇文章给大家讲解如何利用 dhtmlxGantt正确保存和显示任务的结束日期。

需要项目管理工具、数据库管理工具、JAVA开发工具等下载和试用资源的朋友，记得私信我~ 3235

项目管理工具dhtmlxGantt甘特图入门教程（十一）：后端集成问题解决方法

这篇文章给大家讲解如何解决dhtmlxGantt后端集成的问题。

需要项目管理工具、数据库管理工具、JAVA开发工具等下载和试用资源的朋友，记得私信我~ 1370

项目管理工具dhtmlxGantt甘特图入门教程（八）：数据加载（四）

这篇文章给大家讲解dhtmlxGantt的数据属性和数据库结构。

需要项目管理工具、数据库管理工具、JAVA开发工具等下载和试用资源的朋友，记得私信我~ 1336

dhtmlxgantt甘特图（精确到分钟）

完整代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>Basic initialization</title> <link rel="stylesheet" href="http://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.c

qq_29050279的博客 6179

项目管理工具dhtmlxGantt甘特图入门教程（三）：如何配置Gantt

本文给大家讲解如何配置Gantt。

需要项目管理工具、数据库管理工具、JAVA开发工具等下载和试用资源的朋友，记得私信我~ 1163

推荐一些免费开源支持Vue3甘特图组件

🌈在现代项目管理和任务调度中，甘特图是一种非常实用的工具。它能够直观地展示任务的时间安排、进度和依赖关系。对于使用Vue 3的开发者来说，选择一个合适的甘特图组件可以大大提高开发效率。本文将为大家推荐几款免费、开源且稳定好用的Vue 3甘特图组件，并简要介绍它们的特点和使用场景。如果需要高度定制化和复杂功能，推荐或。如果需要轻量级且简单易用的组件，推荐或。如果需要多种视图模式，推荐。希望本文能帮助你在Vue 3项目中快速找到合适的甘特图组件！如果你有其他推荐或使用心得，欢迎在评论区分享！

李赛赛的专栏 7335

上一篇：数据库管理工具Navicat16版本，功能优化全新详解

下一篇：对于一位合格的DBA，究竟需要掌握多少种数据库？

项目管理工具dhtmlxGantt入门教程（二）：如何初始化dhtmlxGantt（上）

需要项目管理工具、数据库管理工具、JAVA开发工具等下载和试用资源的朋友，记得私信我~

09-23

1126