乐趣区

关于angular:最好用的-Angular-甘特图组件-ngxgantt

jiezi

本文由 PingCode 前端工程师 张文 分享

一句话介绍

ngx-gantt 是一款基于 Angular 框架的甘特图组件，反对多种视图展现并反对多种高级的个性，能疾速的帮忙开发者搭建本人的甘特图利用。

什么是甘特图

甘特图又名横道图，是项目管理中比拟风行的一种工具。在图表的左侧显示工作列表，顶部显示适合的工夫刻度，每个工作由一个条形示意，条形的地位和长度反映了工作的开始日期、持续时间和完结日期，使我的项目管理者高深莫测。

最后基于 Excel 制作的甘特图的样子

传统的甘特图工具都是基于客户端的，ngx-gantt 把甘特图直观、高效的个性引入到 Web 端，不便更多的 Web 端用户疾速构建本人的甘特图工具。

个性

  • 5 种视图（日、周、月、季、年）
  • 工作分组展现
  • 树形构造数据展现并反对异步加载
  • 工作前后置依赖关联及展现
  • 工作拖拽更改工夫
  • 表格自定义
  • 滚动加载数据
  • 导出为图片
  • 可定制化开发

动机

2020 年，PingCode 筹备做一款我的项目集治理的产品 Plan，Plan 这款产品蕴含多我的项目路线图治理，进度治理，资源跟踪以及里程碑治理，其中波及到路线图，里程碑等性能都须要基于甘特图来实现，随后咱们开始调研 Github 中开源的一些甘特图的组件，最终都因为不能满足咱们的需要而 pass，其中次要的起因有以下几点：

  • 不能很好的反对 Angular
  • 有一些功能强大的库仍旧依赖 JQuery
  • 不反对多层级展现
  • 默认反对的视图不满足咱们的场景
  • 不够灵便

基于上述起因，咱们决定本人造轮子，做一款基于 Angular 的甘特图组件。

展现成果

话不多说，先上成果

https://www.bilibili.com/vide…

ngx-gantt 的特点

更灵便的表格

表格和甘特图一起展现是一种更好的形式，咱们反对灵便的表格。具体的实现形式是联合 Angular 的模板 ng-template 来应用，这样就能够在模板中应用任何组件，指令等等，从而更灵便的自定义表格内容。除此之外，咱们还反对自定义表格列宽，表格中的每一列和整个表格都是能够拖拽批改宽度的。

示例：

https://www.bilibili.com/vide…

具体应用：

<ngx-gantt>
  <ngx-gantt-table>
    <ngx-gantt-column name="工作项" width="120px">
      <ng-template #cell let-item="item">
        <app-work-item [workItem]="item"></app-work-item>
      </ng-template>
    </ngx-gantt-column>
    <ngx-gantt-column name="负责人" width="120px">
      ...
    </ngx-gantt-column>
  </ngx-gantt-table>
</ngx-gantt>

树形构造数据展现

树形构造能明确的展现出工作的父子关系，不便咱们用甘特图治理简单的工作。思考到性能问题，咱们同时反对了异步加载子数据。默认层级是两层，你能够通过 maxLevel 参数设置本人须要的层级数。

示例：
https://www.bilibili.com/vide…

工作依赖

在甘特图组件中，依赖关系的展现也尤为的重要，ngx-gantt 反对通过拖拽关联工作，展现工作依赖关系。一般来说，工作之间的依赖关系次要有以下四种：
Finish to Start (FS)​ — 完结到开始，即 A 工作必须先完结，B 工作能力开始。这是最常见的一种依赖关系。
Start to Start (SS) — 开始到开始，即 A 工作必须先开始，B 工作能力开始。
Finish to Finish (FF) — 完结到完结，即 A 工作必须先完结，B 工作能力完结。
Start to Finish (SF) — 开始到完结，即 A 工作必须先完结，B 工作能力完结。

ngx-gantt 组件中依赖关系线的绘制是由 SVG 中的 path 元素实现的，拖拽一个工作至另外一个工作会在两个工作之间生成一段贝塞尔曲线，而后绘制到页面上，来展现两个工作之间的依赖关系。
https://www.bilibili.com/vide…

具体应用：

<ngx-gantt 
  [linkable]="true"
  (linkDragStarted)="linkDragStarted($event)"
  (linkDragEnded)="linkDragEnded($event)"
  (lineClick)="lineClick($event)"
>
  ...
</ngx-gantt>

导出为图片

集成 html2canvas 导出图片。

弱小的自定义能力

ngx-gantt 反对了甘特图的根本个性及一些高级的个性，然而咱们仍旧不能保障能满足大部分使用者的场景，所以咱们提供了一些根底的组件能够让使用者基于根底的组件去开发本人的利用。

示例：

具体应用：

<ngx-gantt-root [sideWidth]="300">
  <ng-template #sideTemplate>
    ...
  </ng-template>
  <ng-template #mainTemplate>
    ...
  </ng-template>
</ngx-gantt-root>

疾速开始

装置 

$ npm i @worktile/gantt --save
# or
$ yarn add @worktile/gantt

应用

模块导入 

import {NgModule} from '@angular/core';
import {NgxGanttModule} from '@worktile/gantt';

@NgModule({
  ...
  imports: [NgxGanttModule, ...]
  ...
})
export class AppModule {}

组件应用 

<ngx-gantt start="1514736000" end="1609430400">
  <ngx-gantt-table>
    <ngx-gantt-column></ngx-gantt-column>
  </ngx-gantt-table>
</ngx-gantt>

Github：https://github.com/worktile/n…
Demo：http://gantt.ngnice.com/

总结

ngx-gantt 曾经在 PingCode 和 Worktile 中应用了一年多了，目前稳固迭代中。之前因为文档不欠缺、测试覆盖率比拟低，始终没有向大家介绍，然而咱们的代码是早就公开了的。截止到目前，咱们曾经欠缺了文档，晋升了测试覆盖率，大家能够放心使用。

最初，ngx-gantt 还有一些须要欠缺的中央，咱们正在思考退出虚构滚动进一步晋升性能。同时咱们也心愿有更多的 Angular 用户应用并反馈，和咱们一起去欠缺它。

退出移动版