甘特圖是一種廣泛使用的工具，它可以用來管理和展示項目進度，同時提高協(xié)作效率。本文將介紹一些流行的 JavaScript 甘特圖庫及其用法，以幫助更好地理解和選擇適合需求的甘特圖庫！

下面是維基百科對甘特圖的介紹：

甘特圖（Gantt chart）是條狀圖的一種流行類型，顯示項目、進度以及其他與時間相關的系統(tǒng)進展的內(nèi)在關系隨著時間進展的情況，是由亨利·甘特 (Henry Laurence Gantt) 于1910年開發(fā)出。在項目管理中，甘特圖顯示項目的終端元素的開始和結束，概要元素或終端元素的依賴關系，管理者可透過甘特圖，監(jiān)控項目當前各任務的進度。若想要同時顯示多個不同的項目開始與結束的時間，就可以利用甘特圖呈現(xiàn)，監(jiān)控項目當前各任務的進度。

Frappe Gantt

Frappe Gantt是一個用于生成甘特圖的JavaScript庫，支持交互式繪制、拖拽、縮放、任務依賴關系和時間刻度等功能。其具有以下特點：

• 交互式操作：可通過拖動、縮放等方式對甘特圖進行操作，以便更好地展現(xiàn)項目進度。
• 任務依賴關系：支持設置任務之間的依賴關系，以便更好地管理項目進度。
• 時間刻度：支持按天、周、月等不同時間跨度進行刻度展示，方便用戶選擇合適的時間范圍。
• 美觀易用：采用現(xiàn)代UI設計，支持多種樣式和主題，易于使用和集成到現(xiàn)有項目中；同時也支持多語言功能，方便國際化應用。

可以通過以下步驟來使用 Frappe Gantt：

1. 在終端中導航到項目目錄并運行以下命令安裝Frappe Gantt：

npm install frappe-gantt

2. 在JavaScript文件中引入Frappe Gantt，并創(chuàng)建容器元素、配置甘特圖數(shù)據(jù)、初始化Gantt對象，并將其附加到容器元素上

<div id="gantt"></div>

import Gantt from 'frappe-gantt';

const tasks = [
  {
    id: 'task-1',
    name: 'Task 1',
    start: '2023-04-12',
    end: '2023-05-12'
  },
  {
    id: 'task-2',
    name: 'Task 2',
    start: '2023-05-12',
    end: '2023-06-12',
    dependencies: 'task-1'
  }
];

const gantt = new Gantt('#gantt', tasks);

需要注意的是，在使用 Frappe Gantt 時，還需要在項目中引入相關樣式和語言包等資源，以便正常使用。

Github：https://github.com/frappe/gantt。

Dhtmlx Gantt

DHTMLX Gantt 是一個開源的 JavaScript 甘特圖庫，可以在圖表中說明和管理項目進度。其具有以下特點：

• 易于使用：使用dhtmlxGantt可創(chuàng)建可視化的交互式甘特圖，使項目進度變得更加清晰易懂。
• 可自定義：dhtmlxGantt提供豐富的配置選項，可以自定義甘特圖的外觀和行為。
• 與其他庫兼容性良好：dhtmlxGantt可以與其他JavaScript庫進行集成，如React、Angular、Vue等。
• 可高度定制：這個庫提供了各種擴展和插件，開發(fā)者可以根據(jù)需要進行高度定制。
• 多種導入和導出格式：dhtmlxGantt支持多種格式來導入和導出項目計劃，便于用戶進行數(shù)據(jù)轉(zhuǎn)換和分享。

dhtmlxGantt 提供了免費版和付費版，使用步驟如下：

1. 在終端中導航到項目目錄并運行以下命令安裝 dhtmlxGantt 插件

npm install dhtmlx-gantt

2. 在JavaScript文件中初始化dhtmlxGantt對象并配置相關參數(shù)

<div id="gantt_here" style='width:1000px; height:450px;'></div>

import 'dhtmlx-gantt';
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css';

const tasks = {
  data: [
    {
      id: 1,
      text: 'Project #1',
      start_date: '2023-04-12',
      duration: 18,
      progress: 0.4
    },
    {
      id: 2,
      text: 'Task #1',
      start_date: '2023-04-12',
      duration: 8,
      parent: 1,
      progress: 0.6
    }
  ],
  links: [
    {
      id: 1,
      source: 1,
      target: 2,
      type: '1'
    }
  ]
};

gantt.init('gantt_here');
gantt.parse(tasks);

以上代碼將在id為"gantt_here"的div中創(chuàng)建一個簡單的甘特圖。

Github：https://github.com/DHTMLX/gantt。

gantt-task-react

gantt-task-react是一個基于React和TypeScript的交互式甘特圖組件。它允許用戶快速創(chuàng)建美觀、可交互的甘特圖，并提供了各種配置選項，使得開發(fā)者可以自定義甘特圖的背景色、時間刻度、任務欄等樣式。其具有以下特點：

• 基于React + TypeScript 開發(fā)，易于集成到現(xiàn)有項目中。
• 支持拖拽、縮放、滾動等交互操作，并提供了多種事件回調(diào)函數(shù)，便于開發(fā)者處理用戶的操作行為。
• 可以自定義任務欄的背景色、文本、進度條樣式等，支持多種任務類型（如里程碑、匯總?cè)蝿盏龋?/li>
• 提供了多種適配器（adapter）插件，可以與不同的數(shù)據(jù)源（如本地數(shù)據(jù)、RESTful API接口）進行集成。

可以通過以下步驟來使用 gantt-task-react：

1. 在終端中導航到項目目錄并運行以下命令安裝gantt-task-react：

npm install gantt-task-react

2. 在需要使用 gantt-task-react 的組件中引入Gantt組件：

import React from 'react';
import Gantt from 'gantt-task-react';

function MyComponent() {
  const tasks = {
    data: [
      {
        id: 1,
        text: 'Task #1',
        start_date: '2023-04-12',
        duration: 4,
        progress: 0.4
      },
      {
        id: 2,
        text: 'Task #2',
        start_date: '2023-04-14',
        duration: 3,
        progress: 0.6
      }
    ]
  };

  return (
    <Gantt tasks={tasks} />
    );
}

export default MyComponent;

3. 在Gantt組件中添加需要的配置項。

<Gantt 
  tasks={tasks}
  dateGrid={{
    hour: "[Hh]"
  }}
  timeSteps={{
    day: 1
  }}
  scrollPositinotallow={{
    scrollTop: 150
  }}
  taskListWidth={300}
/>

以上代碼將在 MyComponent 中創(chuàng)建一個簡單的甘特圖，并設置了一些常用的配置項。

Github：https://github.com/MaTeMaTuK/gantt-task-react。

Vue Ganttastic

Vue Ganttastic 是一個基于Vue 3的簡單、交互式且高度可定制的甘特圖組件。它可以在Web應用中展示任務和進度，支持拖拽、縮放和事件處理等交互特性。其具有以下特點：

• 支持 Vue 3 版本，提供了可用的TypeScript類型聲明。
• 支持拖拽、縮放和事件處理等交互特性。
• 提供了多種配置項使用戶可以自定義樣式、數(shù)據(jù)源等。
• 支持多種任務類型，包括普通任務、里程碑、匯總?cè)蝿盏取?/li>
• 提供了豐富的事件處理函數(shù)，例如onTaskSelected、onTaskMoved等，方便用戶對任務的操作進行響應。
• 代碼簡潔易懂，易于定制和擴展。

可以通過以下步驟來使用 Vue Ganttastic：

1. 在終端中導航到Vue項目目錄并運行以下命令安裝Vue Ganttastic：

npm install vue-ganttastic

2. 在需要使用Vue Ganttastic的組件中引入GanttChart組件：

<template>
  <div id="app">
    <GanttChart :tasks="tasks" />
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import GanttChart from 'vue-ganttastic';

export default defineComponent({
  name: 'App',
  components: {
    GanttChart,
  },
  data() {
    return {
      tasks: [
        {
          id: 1,
          label: 'Task 1',
          start: '2023-04-12',
          end: '2023-04-16',
        },
        {
          id: 2,
          label: 'Task 2',
          start: '2023-04-14',
          end: '2023-04-18',
        },
      ],
    };
  },
});
</script>

3. 在GanttChart組件中添加需要的配置項。

<GanttChart
  :tasks="tasks"
  :chart-start-date="new Date('2023-04-10')"
  :chart-end-date="new Date('2023-04-20')"
  :bar-style="{ backgroundColor: '#66ccff' }"
  :is-vertical="false"
  :day-class-factory="dayClassFactory"
/>

以上代碼將在App組件中創(chuàng)建一個簡單的甘特圖，并設置了一些常用的配置項。

Github：https://github.com/zunnzunn/vue-ganttastic。

NgxGantt

NgxGantt 是一款基于 Angular 框架的甘特圖組件，支持多種視圖展示并支持多種高級的特性，能快速的幫助開發(fā)者搭建自己的甘特圖應用。其具有以下特點：

• 5 種視圖（日、周、月、季、年）
• 任務分組展示
• 樹形結構數(shù)據(jù)展示并支持異步加載
• 任務前后置依賴關聯(lián)及展示
• 任務拖拽更改時間
• 表格自定義
• 滾動加載數(shù)據(jù)
• 導出為圖片
• 可定制化開發(fā)

可以通過以下步驟來使用 ngx-gantt：

1. 在終端中導航到Vue項目目錄并運行以下命令安裝 ngx-gantt：

npm install ngx-gantt

2. 在"app.module.ts"中引入和注冊GanttModule。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { GanttModule } from 'ngx-gantt';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    GanttModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 在組件中使用<ngx-gantt>標簽，并傳入需要展示的任務數(shù)據(jù)。

<ngx-gantt [ganttOptions]="options" [tasks]="tasks"></ngx-gantt>

其中，tasks? 是一個任務列表（數(shù)組），每個任務對象包含任務名、開始時間、結束時間、進度等屬性；ganttOptions 是一個可選的配置對象，用于自定義甘特圖的外觀和行為，例如：設置語言、設置日期格式、設置樣式風格等。

Github：https://github.com/worktile/ngx-gantt。