甘特圖元件應用
訊光科技/Allen Lo
甚麼是甘特圖（Gantt Chart）？它是一個能讓專案人員了解專案進度，甚至是資源分配的圖表形式，它透過活動項目和時程刻度來展示及說明特定專案的活動項目順序與時程間的歷程關係，以橫軸代表時程，縱軸代表活動項目，線條則代表活動項目開始與完成的時程，以條狀圖的方式展現專案的進度、專案持續時程內相關的活動項目隨著時間進展的狀況，是由亨利·甘特 (Henry Laurence Gantt)所發明。
它的好處在於讓專案管理人員能在短時間內瞭解該專案何時及正在進行什麼工作？評估工作進度，清晰地了解每一項活動的起始與結束時間，進而把握進度是否超前還是落後？若進度落後，是否該不該提出相關措施以趕上專案進度，後續因延遲的活動項目是否也需作相關作業或時程的調整，避免其他問題產生。若想要同時監控多個不同的專案，也可以利用甘特圖呈現，監控專案各活動的進度，若專案間有依存的關係，也可藉此加以監控。
以往甘特圖的製作甚少有軟體支援，一般用戶都只能在如MS Excel等辦公室軟體上手動繪製。自從專案管理軟體面世後，就陸續提供可以繪製甘特圖的相關應用。再隨著商業智慧 (BI, Business Intelligence) 的崛起，相關商業智慧軟體也提供甘特圖模組，也使得甘特圖的製作更加便捷與快速。
本文就要來介紹一下EEP與EEPCloud平台中，就提供了這個gantt的甘特圖元件，來提供對於進度管理或專案管理有需求的客戶來使用。
甘特圖元件屬性：
以下為EEPCloud的甘特圖元件相關屬性介紹與說明：
|
名稱 |
類型 |
説明 |
|
ID |
string |
元件名稱，用於識別該元件 |
|
RemoteName |
string |
元件連接的資料源 |
|
WhereStr |
string |
固定的過濾條件，如：一開始不顯示出資料可以設為1=0 |
|
OnLoad |
string |
載入時，調用的js方法名稱 |
|
OnBeforeLoad |
string |
載入前，調用的js方法名稱 |
|
RowID |
string |
Key欄位，此欄位通常是唯一鍵值的欄位 |
|
ParentID |
string |
上層欄位，如果甘特圖有多層的關係，需定義哪一個欄位存放上層的連結。 |
|
TextCoumn |
string |
甘特圖項目名稱的欄位。 |
|
TextCaption |
string |
項目欄位的標題。 |
|
StartDate |
string |
起始日期的欄位。 |
|
StartDateCaption |
string |
起始日期欄位的標題。 |
|
DurationCaption |
string |
期間日期欄位的標題。 |
|
Duration |
string |
期間日期的欄位。 |
|
EndDate |
string |
結束日期的欄位。 |
|
ActuallyStart |
string |
實際起始日期的欄位，如果有的話。 |
|
ActuallyEnd |
string |
實際結束日期的欄位，如果有的話。 |
|
Progress |
string |
進度百分比的欄位，沒有可以省略。 |
|
QueryObj |
string |
搭配的查詢視窗id |
|
PanelHeight |
int |
樞紐分析表的高度 |
|
ShowToday |
bool |
是否顯示今天的日期線。 |
|
ShowGrid |
bool |
是否顯示左方的表格資料。 |
|
ShowStartDateColumn |
bool |
當ShowGrid為True時,是否顯示起始日期內容。 |
|
ShowDurationColumn |
bool |
當ShowGrid為True時,是否顯示期間日數(天)。 |
|
Readonly |
bool |
是否為唯讀。 |
|
AutoSave |
bool |
是否自動存檔。 |
|
Scale |
string |
範圍可以選日期/星期/月份等三種。 |
|
Toolitems |
collection |
可添加按鈕。 |
實例開發：
我們就以EIP專案進度管理設計為例，使用同一個甘特圖元件，動態抓取單一專案的進度或多個專案的進度資料，在同一畫面位置上展示出來。步驟如下:
◆甘特圖元件設定：屬性請參考上面的說明，其中資料的來源我們連接到Server端的"專案進度明細"這個資料供應服務，代表這個甘特圖是用連顯示單一專案的所有項目進度。(專案進度明細存放的是專案子項目的進度)
◆"多個專案"的進度呈現與開發:
透過DataGrid元件的ToolItems屬性來設定這兩個Button:
OnClick的js：透過呼叫不同的js更改甘特圖元件的屬性，如remoteName(代表資料來源不同)、RowID欄位、textColumn欄位等，並下達要顯示的多個專案Where條件(1=1代表所有，通常會顯示未結案的專案)。
◆"單一專案"的進度呈現與開發：以iCoder 2019年研發計畫為例
DataGrid的ToolItems中設定:
OnClick的js：透過呼叫不同的js更改甘特圖元件的屬性，如remoteName(代表資料來源不同)、RowID欄位、textColumn欄位等，資料來源取專案進度明細表，代表要顯示單一專案的子項目進度。
如以"iCoder 2019年研發計畫"專案內容及其明細的資料舉例如下:
經由EEP gantt甘特圖元件的使用，它將幫助您的專案團隊，隨時掌握任務時程，按時完成專案工作任務，也可讓專案團隊成員們清楚掌握專案有哪些任務？每個任務需要多少時間內完成？那些任務正在進行？接下來的任務有哪些？甚至了解有多少人力物力資源可供運用？進而提升整個團隊的工作效率！最後也是最重要的是專案任務能順利如期如質完成！訊光公司為服務廣大客戶群，亦在公司產品上導入甘特圖元件供大家使用，希望對大家在專案運作及客戶需求上有所助益。
