Timesheet - Cover

甘特圖為一種特殊的長條圖,最常被用來進行專案管理,所以在專案管理軟體中比較常見,一般的視覺化工具裡反而不容易見到。沒關係,今天為各位介紹一個有趣的小工具 — timesheet.js ,幫你快速拉出一張甘特圖!

timesheet.js 本身為一個開源的 JavaScript 套件,主要是用在網頁前端。它將繪製甘特圖的細節包裝好,讓我們只需要提供資料給它,它便能為我們產生最基本的甘特圖網頁碼。

首先,從 timesheet.js 的 github 頁面下載 timesheet.min.jstimesheet.min.css ,然後在你的網頁源碼中引入:

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

接著,準備好你的資料。甘特圖的資料包含兩個時間 ( 開始與結束的時間點 ) ,以及事件名稱,例如下表是 Nikon 高階相機的生命週期表  ( 自 2008 年起 ):

  '10/2008', '07/2012', 'D3X'
  '07/2009', '07/2014', 'D300s'
  '10/2009', '01/2012', 'D3S'
  '01/2012', '01/2014', 'D4'
  '01/2012', '04/2014', 'D800/D800E'
  '07/2012', '10/2013', 'D600'
  '10/2013', '12/2015', 'Df'
  '10/2013', '12/2015', 'D610'
  '01/2014', '12/2015', 'D4s'
  '04/2014', '12/2015', 'D810/D810A'
  '07/2014', '12/2015', 'D750'

這是一個以 CSV 格式編排的表格,我們可以從上表中看到每一行都有兩個日期與一個相機型號;以第一行為例,這行代表「Nikon D3」這台相機的生命週期,「07/2007」代表開始量產的日期、「10/2009」代表停止生產的日期。

此外,甘特圖的顏色也需要由我們來決定,timseheet 提供五種顏色供選擇,分別命名為:

  default - 紅色
  dolor - 黃色
  lorem - 綠色
  sit - 青色
  ipsum - 藍色

這個顏色則每行一個,當做資料的最後一個欄位。我們依相機的分級將每個型號再標上各別的顏色:

  '10/2008', '07/2012', 'D3X', 'default'
  '07/2009', '07/2014', 'D300s' 'lorem'
  ... 中略 ...
  '04/2014', '12/2015', 'D810/D810A', 'dolor'
  '07/2014', '12/2015', 'D750', 'dolor'

這樣的表格無法讓 JavaScript 直接使用,但我們只要在每行前後加上一個中括號與逗點,再加上一點額外的描述,就能成為一段 JavaScript 程式碼:

var data = [
  ['10/2008', '07/2012', 'D3X', 'default'],
  ['07/2009', '07/2014', 'D300s', 'lorem'],
  // ... 中略 ... 
  ['04/2014', '12/2015', 'D810/D810A', 'dolor'],
  ['07/2014', '12/2015', 'D750', 'dolor']
];

接著,在網頁中置入這一段代碼,並呼叫 timesheet 函式:

  <div id="my-gantt"></div> <!-- 放甘特圖的地方, timesheet 可隨意命名 -->
  <script type="text/javascript">
    var data = [
      ['10/2008', '07/2012', 'D3X', 'default'],
      // ... 剛剛的資料表, 下略 ...
    ];
    new Timesheet("my-gantt", 2007, 2015, data); // 在 my-gantt 標籤內畫圖
  </script>

這樣便完成了,成果如下:

Timesheet Sample Result

看起來頗不賴吧!

結語

這是個方便的小巧工具,雖然要稍微碰觸到網頁設計與程式,但相對的也帶來一些彈性:

可擴充性

參考套件中的 CSS 設定,我們很容易就可以延伸或製作完全不同的配色主題。下圖是我們花了大約十分鐘的時間簡單重調的日系風格,感覺還不錯吧?

Restyle Timesheet.js

開放源碼

程式碼都在我們手上了,要加入互動要素或動態效果都很容易。甚至搭配 D3.js 都可以玩喔!猜猜怎麼做?

就這樣吧,小品套件 timesheet.js 介紹給您,上面的範例我們也提供在此 Gist ,包含程式碼客製樣式HTML 檔,有興趣可以抓下來玩玩看 🙂


Written by infographics.tw

2 Comments

別問我是誰

有趣的網站,小小錯字無傷大雅。

碰”處”到網頁設計與程式,XD。

Reply

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *