前言
Gantt 图表是一种流行的项目计划工具，通常用于跟踪进度和任务时间线。而 Ganttjs 就是一种专门用于制作 Gantt 图表的 JavaScript 库，为了方便大家使用，本文将介绍如何使用 npm 包 ganttjs 制作 Gantt 图表。
安装
在使用 ganttjs 之前，我们需要先安装它。如果您的项目已经使用了 npm 或 yarn 等包管理工具，则可以直接使用以下命令进行安装：
npm install ganttjs
或者
yarn add ganttjs
如果您还没有安装 npm，可以参考官方文档进行安装：https://docs.npmjs.com/about-npm
基础使用
在安装了 ganttjs 包之后，我们就可以在项目中引入它：
import Gantt from "ganttjs";
接着，在需要使用 Gantt 图表的位置，可以创建一个空的 DOM 节点作为容器，并通过 JavaScript 实例化一个 Gantt 对象：
<div id="gantt-chart"></div>
import Gantt from "ganttjs";
const gantt = new Gantt("#gantt-chart");至此，我们已经创建了一个空的 Gantt 图表，接下来就可以通过使用不同的方法来添加数据和设置配置选项。
添加数据
添加数据是制作 Gantt 的关键步骤之一。Ganttjs 提供了多种方式用于添加数据，包括从 JSON 数据中读取、从 CSV 文件中读取，以及从 JavaScript 对象中读取。
从 JSON 中读取
我们可以创建一个 JSON 文件来表示我们的数据。例如，在下面的示例中，我们创建了一个名为 data.json 的文件，并添加了包含任务名称、开始和结束时间、和进度百分比等信息的数据：
-- -------------------- ---- -------
-
------- -
-
----- ----
------- ------
-------- -------------
------ -------------
----------- --
--
-
----- ----
------- ------
-------- -------------
------ -------------
----------- -
--
-
----- ----
------- ------
-------- -------------
------ -------------
----------- --
--
-
----- ----
------- ------
-------- -------------
------ -------------
----------- -
--
-
----- ----
------- ------
-------- -------------
------ -------------
----------- -
-
-
-接着，我们可以利用 fetch 方法来异步获取数据，并通过 setData 方法将数据添加到 Gantt 图表中：
-- -------------------- ---- -------
------ ----- ---- ----------
----- ----- - --- ----------------------
------------------
----------- -- -----------
------------ -- -
-------------------------
---可以看到，我们使用 setData 方法将获取到的 JSON 数据 data.data 添加到了 Gantt 图表中。
从 CSV 文件中读取
除了从 JSON 中读取数据之外，我们也可以从 CSV 文件中读取数据。在下面的示例中，我们创建了一个名为 data.csv 的文件，并添加了与上述 JSON 文件中相同的数据：
id,name,start,end,progress 1,任务一,2022-08-01,2022-08-10,50 2,任务二,2022-08-05,2022-08-15,0 3,任务三,2022-08-10,2022-08-20,20 4,任务四,2022-08-15,2022-08-25,0 5,任务五,2022-08-20,2022-08-30,0
我们可以使用 fetch 方法异步获取 CSV 文件，并利用 csvtojson 库将 CSV 数据转换成 JSON 数据：
-- -------------------- ---- -------
------ ----- ---- ----------
------ --------- ---- ------------
----- ----- - --- ----------------------
-----------------
----------- -- -----------
------------ -- -
-----------
-----------------
------------ -- -
--------------------
---
---可以看到，我们将 CSV 文件的文本内容作为参数传递给了 csvtojson() 方法，将 CSV 数据转换成了 JSON 数据，并将其添加到了 Gantt 图表中。
从 JavaScript 对象中读取
除了从文件中读取数据之外，我们也可以从 JavaScript 对象中读取数据。在下面的示例中，我们创建了一个名为 data.js 的文件，并添加了与前面示例相同的数据：
-- -------------------- ---- -------
----- ---- - -
-
--- ----
----- ------
------ -------------
---- -------------
--------- ---
--
-
--- ----
----- ------
------ -------------
---- -------------
--------- --
--
-
--- ----
----- ------
------ -------------
---- -------------
--------- ---
--
-
--- ----
----- ------
------ -------------
---- -------------
--------- --
--
-
--- ----
----- ------
------ -------------
---- -------------
--------- --
--
--
------ ------- -----然后，我们可以直接在 JavaScript 代码中引入这个文件，并将其中的数据添加到 Gantt 图表中：
import Gantt from "ganttjs";
import data from "./data.js";
const gantt = new Gantt("#gantt-chart");
gantt.setData(data);可以看到，我们直接通过 gantt.setData(data) 将数据添加到了 Gantt 图表中。
配置选项
除了添加数据之外，Ganttjs 还提供了多种配置选项，可以用于设置 Gantt 图表的样式、布局、内部结构等方面的内容。下面是一些常见的配置选项及其用法：
任务条颜色
我们可以通过 setTaskColor 方法来设置任务条的颜色。下面的示例代码将任务条的颜色设置为蓝色：
gantt.setTaskColor("#006eff");任务条高度
我们可以通过 setTaskHeight 方法来设置任务条的高度。下面的示例代码将任务条的高度设置为 30 像素：
gantt.setTaskHeight(30);
日期格式
我们可以通过 setDateFormatter 方法来设置日期格式。下面的示例代码将日期格式设置为“年-月-日”：
gantt.setDateFormatter(function (date) {
return new Date(date).toLocaleDateString("zh-CN");
});横轴间隔
我们可以通过 setStep 方法来设置横轴上的间隔，以控制横轴上的日期显示数量。下面的示例代码将横轴间隔设置为 2 天：
gantt.setStep(2);
自定义样式
最后，我们也可以利用 CSS 来自定义 Gantt 图表的样式。下面的示例代码将调整任务条的颜色和高度：
.gantt-task {
background-color: #006eff;
height: 30px;
}示例
下面是一个完整的例子，将从 JSON 文件中读取数据，配置 Gantt 图表的样式，最终生成一个带有任务列表、日期列、横轴日期间隔、任务条颜色和高度等选项的 Gantt 图表。
-- -------------------- ---- -------
--------- -----
------
------
-------------- ----------
-------
------------ -
------- ------
-
----------- -
----------------- --------
------- -----
-
--------
-------
------
---- -----------------------
------- --------------
------ ----- ---- ----------------------------------------
----- ----- - --- ----------------------
------------------
----------- -- -----------
------------ -- -
-------------------------
---
------------------------------
------------------------
-----------------
------------------------------- ------ -
------ --- ---------------------------------------
---
---------
-------
-------结语
通过 npm 包 ganttjs，我们可以很容易地在自己的项目中创建 Gantt 图表，展示任务的时间线和进度情况，方便进行项目管理和时间规划。本文介绍了 Ganttjs 的基本使用方法和常见配置选项，可以帮助大家更快地上手制作 Gantt 图表，并加深对其原理和技术细节的理解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005575581e8991b448d44e6