项目管理工具dhtmlxGantt甘特图入门教程（七）：在服务器上使用甘特图

曾经终败给现在 2023-09-23 21:47 151阅读 0赞

[dhtmlxGantt][]是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表，可满足[项目管理][Link 1]控件应用程序的所有需求，是最完善的甘特图图表库。

这篇文章给大家讲解如何在服务器上使用DHTMLX Gantt 。

**[DhtmlxGantt正版试用下载（qun：764148812）![icon-default.png?t=MBR7][icon-default.png_t_MBR7]https://www.evget.com/product/4213/download][DhtmlxGantt_qun_764148812_icon-default.png_t_MBR7_icon-default.png_t_MBR7_https_www.evget.com_product_4213_download]**

在某些情况下，您可能需要与甘特图分开使用dhtmlxGantt的专门逻辑，例如：

*  当您从其他来源（例如来自移动应用程序）接收到任务更新并且需要运行自动调度以更新相关任务的时间时
 *  当您有多个可以同时进行更改的同一应用程序的用户，并且您需要同步和验证计划时
 *  当您需要使用服务器代码运行计算和分析计划时

出于这个原因，我们提供了一个单独的DHTMLX Gantt 构建，它可以在Node.js环境中的服务器端运行。

Node.js 的 DHTMLX Gantt 具有与 Commercial/Enterprise/Ultimate 包相同的功能，这意味着Gantt.getGanttInstance方法可用并允许创建甘特图的新实例。

版本控制

DHTMLX Gantt 适用于Node.js包的版本编号方案与浏览器包相同（例如，v7.0.0 是 Node.js 包的甘特图的第一个版本）。

将库添加到项目中

您可以将Node.js的dhtmlxGantt安装为本地包：

>     "dependencies": {
>         "@dhtmlx/gantt-node": "file:../../gantt_7.0.0_node"
>         ...
>     }

或者您可以直接从您的代码中导入dhtmlxgantt.node.js，如下所示：

>     import { Gantt } from "@dhtmlx/gantt-node";
>      
>     const gantt = Gantt.getGanttInstance({
>         plugins:{
>             auto_scheduling: true,
>         },
>         config: {
>             work_time: true,
>             duration_unit: "hour",
>             auto_scheduling: true,
>             auto_scheduling_strict: true,
>             auto_scheduling_initial: false
>         },
>         data: {
>             tasks: [
>                 { id: 1, text: "Project #1", type: "project", parent: 0 },
>                 { id: 2, start_date: "05-04-2020 00:00", text: "Task #1", duration: 1, 
>                 parent: 1, type: "task" },
>                 { id: 3, start_date: "05-04-2020 00:00", text: "Task #2", duration: 3, 
>                 parent: 1, type: "task" },
>                 { id: 4, start_date: "05-04-2020 00:00", text: "Task #3", duration: 3, 
>                 parent: 1, type: "task" },
>                 { id: 5, start_date: "05-04-2020 00:00", text: "Task #4", duration: 3, 
>                 parent: 1, type: "task" },
>                 { id: 6, start_date: "05-04-2020 00:00", text: "Task #5", duration: 1, 
>                 parent: 1, type: "task" }
>             ], 
>             links: [
>                 { id: 1, source: 1, target: 2, type: "0" },
>                 { id: 2, source: 2, target: 3, type: "0" },
>                 { id: 3, source: 3, target: 4, type: "0" },
>                 { id: 4, source: 4, target: 5, type: "0" },
>                 { id: 5, source: 5, target: 6, type: "0" }
>             ]
>         },
>         events:{
>             onAfterAutoSchedule: function(taskId, updatedTasks) {
>                 console.log("Following tasks were auto scheduled:");
>                 console.table(updatedTasks.map((taskId) => {
>                     return {
>                         id: taskId,
>                         text: this.getTask(taskId).text
>                     };
>                 }));
>             },
>             onParse: function() {
>                 console.log("Loaded data:")
>                 console.table(this.serialize().data);
>             },
>             onGanttReady: () => {
>                 console.log("Running dhtmlxGantt on the backend");
>             }
>         }
>     });
>      
>     console.table(gantt.serialize());

了解更多DhtmlxGantt相关内容和资讯，欢迎在线咨询或者私信我获取正版试用版及报价。

[dhtmlxGantt]: https://www.evget.com/supplier/520
[Link 1]: https://so.csdn.net/so/search?q=%E9%A1%B9%E7%9B%AE%E7%AE%A1%E7%90%86&spm=1001.2101.3001.7020
[icon-default.png_t_MBR7]: https://csdnimg.cn/release/blog_editor_html/release2.2.1/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=MBR7
[DhtmlxGantt_qun_764148812_icon-default.png_t_MBR7_icon-default.png_t_MBR7_https_www.evget.com_product_4213_download]: https://www.evget.com/product/4213/download