在本文的第一部分，我们开发了一个交互式甘特图的Web组件。现在，我们将增强甘特图组件，为编辑工作提供一些交互可能性：通过鼠标拖动使工作条可调整大小，我们还实现了一个编辑对话，可用于修改工作的开始和结束日期。在此过程中，我们将继续使用Vanilla JS和Web Components。最后，我们将看看一些JavaScript库，它们可以大大简化开发一个功能齐全的甘特图的工作。
下面的视频展示了我们在这篇文章中要建立的东西。首先，我们将在每个工作的右侧添加一个拖动手柄，可用于调整工作栏的大小（在图片中，它显示为一个狭窄的灰色竖条）。在下一步，我们将进一步扩展作业的行为，使双击作业栏可以打开一个编辑对话。
在此基础上，图表的功能还可以进一步扩展。
Bryntum的JavaScript甘特图
另一个值得考虑的例子是Bryntum Gantt库，"一个超快的、完全可定制的甘特图套件"。
下载该库的免费试用版后，你会得到一个包含CSS和JavaScript文件的构建文件夹，用于创建交互式甘特图。你可以将这些文件整合到你的网络应用中，然后立即配置你的个人图表。一个简单的入门指南提供了对该组件的快速介绍。例如，使用Bryntum Gantt库，一个基本图表可以是这样的。
在完整的Bryntum Gantt文档中，你会学到很多关于众多定制选项的知识。你还将探索如何将该工具与Angular、React、Vue等流行框架集成，或如何组织数据的加载和保存（CRUD数据管理）。
示例部分对Bryntum Gantt的各种功能进行了直观的概述。
他们还提供了Bryntum Scheduler- 一个用于资源规划的库。
Webix的JavaScript甘特图
有了Webix Gantt，就有了另一个具有丰富功能的商业甘特图库。安装、创建和配置甘特图的简单步骤都有详细的记录。
你可以在一个全屏互动演示中试用该工具。
总结
甘特图是项目管理、计划和任务组织的一种有价值的可视化方式。有很多方法可以将甘特图集成到一个网络应用程序中。在上两篇文章中，我们从头开始构建了一个交互式甘特图，在此过程中，我们学到了很多关于CSS网格、Web组件和JavaScript事件的知识。如果你有更复杂的要求，值得看看商业的JS库，它们通常非常强大。
