分類: 網頁開發

Timesheet.js:在網頁上繪製甘特圖(Gantt Plot)的 JavaScript 工具

這裡介紹一個可以在網頁上繪製甘特圖(Gantt Plot)的 JavaScript 工具,畫面簡潔,使用上也很簡單。

甘特圖是一種用來顯示專案進度或是其他時間相關資訊的條狀圖,一般的專案管理軟體(例如 Microsoft Project 或 Mr. Project)也都可以繪製這樣的圖形。

Timesheet.js 是一個開放原始碼的 JavaScript 小工具,它可以讓您直接在網頁中製作甘特圖,而且不需要 jQuery 或是其他的工具,畫面看起來簡潔又清爽,重點是使用起來很簡單,以下介紹如何使用它來繪製自己需要的甘特圖。


Step 1
首先從 Timesheet.js 的 GitHub 網頁中下載 timesheet.jstimesheet.css 這兩個檔案,您可以直接點選右方的「Download ZIP」,把整個專案原始碼下載下來。

然後再從 dist 目錄中取出這兩個檔案。

Step 2
接著在網頁的 <head> 標籤中引入這兩個檔案。

<link href="timesheet.css" rel="stylesheet" type="text/css" />
<script src="timesheet.js" type="text/javascript"></script>

Step 3
在網頁中要放置甘特圖的地方,插入以下的 HTML 程式碼。

<div id="timesheet"></div>

Step 4
最後在網頁的結尾處插入下面這段 JavaScript 程式碼。

<script>
new Timesheet('timesheet', 2002, 2013, [
  ['2002', '09/2002', 'A freaking awesome time', 'lorem'],
  ['06/2002', '09/2003', 'Some great memories', 'ipsum'],
  ['2003', 'Had very bad luck'],
  ['10/2003', '2006', 'At least had fun', 'dolor'],
  ['02/2005', '05/2006', 'Enjoyed those times as well', 'ipsum'],
  ['07/2005', '09/2005', 'Bad luck again', 'default'],
  ['10/2005', '2008', 'For a long time nothing happened', 'dolor'],
  ['01/2008', '05/2009', 'LOST Season #4', 'lorem'],
  ['01/2009', '05/2009', 'LOST Season #4', 'lorem'],
  ['02/2010', '05/2010', 'LOST Season #5', 'lorem'],
  ['09/2008', '06/2010', 'FRINGE #1 & #2', 'ipsum']
]);
</script>

其中 Timesheet() 的第一個參數是 container 的 id,要對應上面的 <div>id,第二個與第三個參數就是起始與結束的年份,之後就是放繪製甘特圖用的資料,所以若要繪製自己的甘特圖,就把資料替換成自己的就可以了。

畫出來的圖就會像這樣:

G. T. Wang

個人使用 Linux 經驗長達十餘年,樂於分享各種自由軟體技術與實作文章。

Share
Published by
G. T. Wang
標籤: JavaScript

Recent Posts

光陽 KYMCO GP 125 機車接電發動、更換電瓶記錄

本篇記錄我的光陽 KYMCO ...

2 年 ago

[開箱] YubiKey 5C NFC 實體金鑰

本篇是 YubiKey 5C ...

2 年 ago

[DIY] 自製竹火把

本篇記錄我拿竹子加上過期的苦茶...

3 年 ago