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

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

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

Frappe Gantt

Frappe Gantt是一個(gè)用于生成甘特圖的JavaScript庫，支持交互式繪制、拖拽、縮放、任務(wù)依賴關(guān)系和時(shí)間刻度等功能。其具有以下特點(diǎn)：

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

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

1. 在終端中導(dǎo)航到項(xiàng)目目錄并運(yùn)行以下命令安裝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 時(shí)，還需要在項(xiàng)目中引入相關(guān)樣式和語言包等資源，以便正常使用。

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

Dhtmlx Gantt

DHTMLX Gantt 是一個(gè)開源的 JavaScript 甘特圖庫，可以在圖表中說明和管理項(xiàng)目進(jìn)度。其具有以下特點(diǎn)：

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

dhtmlxGantt 提供了免費(fèi)版和付費(fèi)版，使用步驟如下：

1. 在終端中導(dǎo)航到項(xiàng)目目錄并運(yùn)行以下命令安裝 dhtmlxGantt 插件

npm install dhtmlx-gantt

2. 在JavaScript文件中初始化dhtmlxGantt對象并配置相關(guān)參數(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)建一個(gè)簡單的甘特圖。

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

gantt-task-react

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

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

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

1. 在終端中導(dǎo)航到項(xiàng)目目錄并運(yùn)行以下命令安裝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組件中添加需要的配置項(xiàng)。

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

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

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

Vue Ganttastic

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

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

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

1. 在終端中導(dǎo)航到Vue項(xiàng)目目錄并運(yùn)行以下命令安裝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組件中添加需要的配置項(xiàng)。

<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)建一個(gè)簡單的甘特圖，并設(shè)置了一些常用的配置項(xiàng)。

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

NgxGantt

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

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

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

1. 在終端中導(dǎo)航到Vue項(xiàng)目目錄并運(yùn)行以下命令安裝 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>標(biāo)簽，并傳入需要展示的任務(wù)數(shù)據(jù)。

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

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

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