和大家分享一款神奇的 JavaScript 開源甘特圖庫 —— Frappe Gantt。為 Web 應用提供項目規劃的可視化工具。它以用戶友好的界面和靈活的配置，助力項目團隊跟蹤進度和管理資源。支持拖動、縮放和任務依賴設置，易于集成并支持多語言，適合國際化使用。
Github Star 4.5k[1]
Frappe Gantt 是什么？
Frappe Gantt 是一個開源的 JavaScript 庫，用于在 Web 應用中生成和管理甘特圖。它提供了豐富的功能，如交互式操作、任務依賴關系、時間刻度等，并且易于集成到不同的 Web 應用中。Frappe Gantt 支持多種語言，并允許用戶自定義顏色、列、時間跨度以適應不同項目的需求。它適用于項目管理、軟件開發、事件規劃和生產調度等多個場景，幫助用戶有效地組織和監控項目進度。
核心特點
? 交互式操作：用戶可以通過拖動、縮放等方式對甘特圖進行操作，以便更好地展現項目進度。
? 任務依賴關系：支持設置任務之間的依賴關系，以便更好地管理項目進度。
? 時間刻度：支持按天、周、月等不同時間跨度進行刻度展示，方便用戶選擇合適的時間范圍。
? 美觀易用：采用現代 UI 設計，支持多種樣式和主題，易于使用和集成到現有項目中。
? 多語言支持：方便國際化應用。
? 開源社區支持：由于其開源性質，有一個活躍的開發者社區，提供持續的更新和支持。
快速開始
1. 創建項目
按照慣例，使用 Vite 創建一個純 JavaScript 項目。并運行命令安裝 Frappe Gantt。
npm install frappe-gantt --save
目錄結構如下：
在 html 引入 main.js 并添加 DOM 元素。
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
2. 配置 Frappe Gantt
在 JavaScript 文件中引入 Frappe Gantt 注意別忘了引入樣式，并創建容器元素、配置甘特圖數據、初始化 Gantt 對象，并將其附加到容器元素上。
// 導入樣式文件，為甘特圖提供必要的CSS樣式
import './style.css'
import 'frappe-gantt/dist/frappe-gantt.css'
// 導入Gantt類，這是創建甘特圖的主要類
import Gantt from 'frappe-gantt'
// 向頁面中添加一個SVG元素，這個元素將作為甘特圖的容器
document.querySelector('#app').innerHTML = `
<svg id="gantt"></svg>
`
// 定義任務數組，每個任務包含id、名稱、開始日期、結束日期、進度和依賴關系
const tasks = [
{
id: '任務一', // 任務的唯一標識符
name: '搜索資料', // 任務的名稱
start: '2024-07-21', // 任務的開始日期
end: '2024-07-23', // 任務的結束日期
progress: 40, // 任務的完成進度，以百分比表示
},
{
id: '任務二',
name: '文章寫作',
start: '2024-07-23',
end: '2024-07-25',
progress: 30,
dependencies: '任務一' // 表示任務二依賴于任務一的完成
},
{
id: '任務三',
name: '排版發表',
start: '2024-07-26',
end: '2024-07-28',
progress: 10,
dependencies: '任務二' // 表示任務三依賴于任務二的完成
}
]
// 創建甘特圖實例，傳入SVG元素的ID、任務數組和配置選項
const gantt = new Gantt('#gantt', tasks, {
header_height: 50, // 頭部的高度
column_width: 30, // 列的寬度
step: 24, // 時間軸的步長，以小時為單位
view_modes: ["Quarter Day", "Half Day", "Day", "Week", "Month"], // 視圖模式
bar_height: 20, // 任務條的高度
bar_corner_radius: 3, // 任務條角的圓角
arrow_curve: 5, // 依賴箭頭的彎曲程度
padding: 18, // 甘特圖的內邊距
view_mode: "Day", // 默認視圖模式
date_format: "YYYY-MM-DD", // 日期格式
language: "zh", // 甘特圖的語言設置
custom_popup_html: null // 自定義彈出框的HTML，這里設置為null表示使用默認
})
通過屬性 language 設置語言，支持的 'es', 'it', 'ru', 'ptBr', 'fr', 'tr', 'zh', 'de', 'hu'。
3. 切換模式
Frapper Gantt 支持多種模式 Quarter Day, Half Day, Day, Week, Month。如果切換模式，可以通過方法 change_view_mode 實現。
gantt.change_view_mode('Week')
4.添加事件監聽器
// main.js
const gantt = new Gantt('#gantt', tasks, {
// ...
// 點擊任務時觸發
on_click: (task) => {
console.log("Click", task)
},
// 拖動日期
on_date_change: (task, start, end) => {
console.log("Date Change", task, start, end)
},
// 拖動進度
on_progress_change: (task, progress) => {
console.log("Progress Change", task, progress)
},
// 視圖模式切換
on_view_change: (mode) => {
console.log("View Change", mode)
},
})
5.更新 tasks
// main.js
// 新增任務
const newTask = [
{
id: '任務四',
name: '回復反饋',
start: '2024-07-28',
end: '2024-07-30',
progress: 80,
dependencies: '任務三'
}
]
// 添加到任務列表中
tasks.push(...newTask)
// 刷新任務
gantt.refresh(tasks)
6. 自定義 Popup
// main.js
const gantt = new Gantt('#gantt', tasks, {
// ... 省略
// custom_popup_html選項用于自定義任務的彈出窗口內容
custom_popup_html: (task) => {
// task參數是一個任務對象，包含任務的詳細信息
// 這里使用moment.js庫的format方法來格式化日期
// 獲取任務的結束日期，并格式化為月和日
const end_date = moment(task._end).format('MM月DD日')
// 返回一個HTML字符串，定義彈出窗口的內容
return `
<div class="details-container">
<h2>${task.name}</h2>
<p>截止日期 ${end_date}</p>
<p>完成進度 ${task.progress}% </p>
</div>
`
},
})
添加 CSS 樣式配置，如下：
// style.css
.details-container {
min-width: 160px;
padding: 14px;
}
h2,p {
margin: 0;
}
.details-container > h2 {
font-size: 14px;
font-weight: 700;
margin-bottom: 10px;
}
.details-container > p {
font-size: 14px;
margin-bottom: 6px;
}
效果如下：
總結
我們探索了 Frappe Gantt —— 一款功能強大且用戶友好的 JavaScript 甘特圖庫。不僅提供了豐富的交互特性和靈活的配置選項，還支持多語言，使其成為國際化項目團隊的理想選擇。通過簡單的步驟，我們展示了如何快速集成Frappe Gantt 到 Web 應用中，并利用其核心功能來提升項目管理的效率。
該文章在 2024/10/12 10:26:46 編輯過
400 186 1886
