如何用DHTMLX组件为Web应用创建甘特图？（一）

DHTMLX Gantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表。可满足项目管理应用程序的所有需求是最完善的甘特图图表库。甘特图仍然是项目管理应用程序中最需要的工具之一DHTMLX Gantt组件提供了能提升研发甘特图功能所需的重要工具。在这篇文章中您将学习如何添加一个基本的JavaScript甘特图到一个Web应用中并使用纯JS/HTML/CSS和配置一些常见的功能来管理项目。下载和安装DHTMLX Gantt前提条件首先有必要创建一个简单的HTML页面您的甘特图项目将被放置在其中。在本教程中我们将解释如何通过脚本标记将Gantt组件添加到Web页面中这样就不需要任何构建工具或配置来运行示例。请注意Gantt也可以作为ES6模块导入稍后我们将讨论它。开始使用Gantt最简单的方法是在服务器上启用一个开源版本link relstylesheet typetext/css hrefhttps://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.css script srchttps://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.js/script您也可以下载DHTMLX Gantt并在本地使用它。在下载了首选的Gantt版本后通过将下载的包解压缩到项目的一个文件夹中来安装Gantt并在HTML文档中添加JS和CSS文件的链接head script srccodebase/dhtmlxgantt.js/script link hrefcodebase/dhtmlxgantt.css relstylesheet /headGantt初始化在执行这一重要步骤之前您必须在页面上创建div容器初始化Gantt时需要这个容器。body div idgantt_here stylewidth:100vw; height:100vh;/div /body现在您应该使用init方法来初始化div容器中的Gantt该方法以容器的ID作为参数。script window.addEventListener(DOMContentLoaded, function () { gantt.init(gantt_here); }); /script此时您已经可以开始使用JavaScript甘特图了但是为了更清晰让我们添加一些项目数据。添加甘特图数据初始化完成后可以直接在HTML文档或JS文件中添加甘特图数据这些数据将用作构建甘特图的基础。在我们的示例中为每个项目添加两个项目和两个嵌入式任务规划社会研究1)选择研究问题2)制定研究设计进行社会研究1)数据收集2)结果分析在这里您还可以指定项目和相关任务的开始/结束日期、执行顺序和进度。gantt.parse ({ data: [ { id: 10, text: Social Research Planning, start_date: 01-04-2023, duration: 5, order: 10, progress: 0.4, open: true }, { id: 1, text: Choosing Research Problems, start_date: 01-04-2023, duration: 2, order: 10, progress: 0.6, parent: 10, priority: high }, { id: 2, text: Formulating Research Design, start_date: 03-04-2023, duration: 3, order: 20, progress: 0.6, parent: 10, priority: high }, { id: 20, text: Conducting Research, start_date: 06-04-2023, duration: 5, order: 10, progress: 0.4, type: project, open: true }, { id: 3, text: Data Collection, start_date: 06-04-2023, duration: 2, order: 10, progress: 0.6, parent: 20, priority: low }, { id: 4, text: Results Analysis, start_date: 08-04-2023, duration: 3, order: 20, progress: 0.6, parent: 20, priority: medium } ], 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: 2, target: 5, type: 0 } ] })这就是如何将基本的JavaScript甘特图添加到项目中。当谈到DHTMLX Gantt与流行的JavaScript框架的使用时应该注意到甘特图是作为JS模块导入的而不是通过脚本标签添加的。