在前端开发中，我们常常需要制作甘特图来进行任务调度和进度管理。而使用 npm 包 gantt-chart 可以非常方便地实现这一功能。
安装 gantt-chart
使用 npm 可以非常方便地安装 gantt-chart：
npm install gantt-chart
引入 gantt-chart
在需要使用 gantt-chart 的文件中，使用 import 引入 gantt-chart：
import GanttChart from 'gantt-chart';
初始化 gantt-chart
初始化 gantt-chart 可以使用以下代码：
-- -------------------- ---- -------
----- ----- - --- ------------
------- ---------------
----- --- -------------------
--- --- -------------------
----- -
-
----- ------
------ --- -------------------
---- --- -------------------
------ ---------
--
-
----- ------
------ --- -------------------
---- --- -------------------
------ ---------
--
-
----- ------
------ --- -------------------
---- --- -------------------
------ ---------
--
-
----- ------
------ --- -------------------
---- --- -------------------
------ ---------
--
-
---其中：
- target：制作甘特图的目标 DOM 元素；
- from：甘特图开始时间；
- to：甘特图结束时间；
- data：任务数据。
配置 gantt-chart
宽度
初始化 gantt-chart 后，可以通过以下代码设置甘特图宽度：
chartsetWidth(800);
数据
可以通过以下代码修改甘特图的数据：
-- -------------------- ---- -------
---------------
-
----- ------
------ --- -------------------
---- --- -------------------
------ ---------
--
-
----- ------
------ --- -------------------
---- --- -------------------
------ ---------
-
---颜色
任务节点的颜色可以通过以下代码设置：
chart.setColors({
'任务一': '#558B2F',
'任务二': '#039BE5'
});示例代码
以下是一个完整示例代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------ ----- ------------
------- --------------------------------------------------------------------------------
-------
------------ -
------ ------
------- ------
------- ---- -----
-
--------
-------
------
---- --------------------------
--------
----- ----- - --- ------------
------- ---------------
----- --- -------------------
--- --- -------------------
----- -
-
----- ------
------ --- -------------------
---- --- -------------------
------ ---------
--
-
----- ------
------ --- -------------------
---- --- -------------------
------ ---------
--
-
----- ------
------ --- -------------------
---- --- -------------------
------ ---------
--
-
----- ------
------ --- -------------------
---- --- -------------------
------ ---------
--
-
---
--------------------
---------------
-
----- ------
------ --- -------------------
---- --- -------------------
------ ---------
--
-
----- ------
------ --- -------------------
---- --- -------------------
------ ---------
--
-
----- ------
------ --- -------------------
---- --- -------------------
------ ---------
--
-
----- ------
------ --- -------------------
---- --- -------------------
------ ---------
--
---
-----------------
------ ----------
------ ---------
---
---------
-------
-------总结
使用 gantt-chart 可以方便地制作甘特图，并在调度任务和管理进度方面提供帮助。希望这篇教程能够对初学者有所帮助，更多的细节可以访问 gantt-chart 的官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/73376