前言
在前端开发中，图表展示是一个十分重要的方面。其中，Gantt图也是一个比较关键的图表类型之一，它主要用于展示一个时间段内各种活动的详细情况，如进度、时间等等。而在开发中使用一些优秀的可视化库能够极大提升开发效率，其中npm包angular-gantt-chart就是一个比较好的选择。
安装
首先，要使用angular-gantt-chart包进行开发需要安装相关环境，步骤如下：
- 安装Node.js环境；
- 修改npm源（可跳过）：
npm config set registry https://registry.npm.taobao.org - 安装Angular CLI：
npm install -g @angular/cli - 创建新的 Angular 项目：
ng new my-gantt-chart
使用
- 安装angular-gantt-chart库：
npm install angular-gantt-chart --save - 在angular.json文件中添加以下代码：
-- -------------------- ---- -------
-
---
------------ -
-------- -
---------- -
---
--------- -
---------------------------------------------------------
--
---------- -
------------------------------------------------------------------
-
--
---
-
-
-- 在需要使用Gantt图的组件中导入和声明组件和服务：
-- -------------------- ---- ------- ------ - ---------- ------ - ---- ---------------- ------ - ------------------- - ---- ---------------------- ------ - ----------------- - ---- ---------------------- ------------ --------- --------------------- ------------ ---------------------------------- ---------- ---------------------------------- -- ------ ----- --------------------- ---------- ------ - ------------------- ------------------ ------------------ -- ---------- -- -
- 在HTML模板中使用Gantt组件，设置数据源即可：
<lib-gantt-chart #ganttChart [tasks]="data.tasks" [startDate]="data.startDate" [endDate]="data.endDate"></lib-gantt-chart>
其中，data.tasks为一个任务数组，每个任务应包括以下属性：
tasks = [{
id: 1, // 任务id，必传
name: '任务1', // 任务名称，必传
start: new Date(2021, 0, 1), // 任务开始时间，必传
end: new Date(2021, 1, 1), // 任务结束时间，必传
progress: 80 // 任务完成度，可选
}];data.startDate和data.endDate为整个任务的开始时间和结束时间，分别为Date类型。
效果展示
详见GitHub仓库angular-gantt-chart-demo。
结语
通过npm包angular-gantt-chart的使用，我们可以方便地实现Gantt图，并且还有自定义样式和自定义事件的功能。希望读者可以借此教程掌握如何使用该库进行项目开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600554c381e8991b448d1f82