在報表開發過程中，會遇到各種情況，有的可能很複雜，需要專業技術人員解決，而有的卻很簡單，只需要按照其使用說明就能操作。比如本文要講解的JS網格創建甘特圖，聽起來很高大上，實際上，因為現在已經有了很多報表開發工具，因此JS網格創建甘特圖表並不難。

在創建甘特圖之前，我們首先要做的是創建一個基本的JS網路構建，在這個過程中，用戶需要對甘特條形圖進行定義，包括其樣式、摘要、標準、里程碑以及百分比等，每一項都是創建過程中必不可少的，因此用戶一定要仔細選擇。而每一個條形圖的樣式當中還包括了形狀、色彩以及圖案等不同的屬性，再加上尾部樣式、顏色屬性等，所以在創建之時要避免遺漏。

JS網格創建甘特圖範例是在JS網格中的GridUtiles資料夾中創建的，通過修復網格數據的方式來提供甘特圖的演示數據，最後通過使用GridDataSerializer中的enableGantt 的方法來啟用甘特圖。

首先我們來看一下創建甘特條形圖的樣式。

在Visual Studio中打開一個創建項目說明，之後打開 GridUtilities.cs。在DefaultGanttBarStyleIdsColumnName 存儲中又預設的甘特條形圖樣式的ID信息，如果不希望DefaultGanttBarStyleIdsColumnName 被用作欄或者是欄位，可以取消注釋。

之後要為其添加System.Drawing引用功能，在解決方案資源管理器當中，滑鼠右擊引用，然後單擊添加引用選項，之後在.net選項卡中，選擇System.Drawing 之後選擇去頂，就可以用在繪製條形圖和條形圖尾部了。

下一步則是要創建一個GanttUtilities.cs文件，其方法與上面提到的方法有所相同。都是在解決方案資源管理器當中，滑鼠右鍵單擊資料夾GridUtils，之後單擊添加新項目，依次選擇Visual C#、代碼以及代碼文件三項，然後將文件命名為GanttUtilities.cs

其次，在創建完甘特條之後，下一步則是啟動甘特圖：

第一步打開JSGridWebPartUserControl.ascx.cs，將EnableGantt代碼添加到Page_Load方法當中；

第二步修改網格數據文件。在打開的GridData.cs中，取消注釋，將文件中存儲的甘特條形圖中的ID信息調出來；

第三步將用於開始時間 、持續時間以及完成時間分配的代碼替換成所需的代碼；然後為第一個任務分配樣式，為第五個任務分配里程碑樣式，為其他的任務分配其他標準的條形圖樣式。

最後則是進行Web部件的測試：

在Visual Studio中按住F5進行運行，運行過程中藥注意打開SharePoint 2010 網站，這樣Web 部件可以自動進行添加，節省人工操作。之後在進行編輯所有的Web部件頁面，單擊插入——Web部件，從自定義類別中選擇JSWebPart選項，確定之後，其部件就會顯示在操作頁面當中。

最後修改甘特條形圖中的開始日期、持續時間以及完成日期等，然後進行操作，如果這些因素髮生其中之一的改變，條形圖也會進行重新繪製，為用戶提供全新的條形圖。

喜歡這篇文章嗎？歡迎分享按讚，給予我們支持和鼓勵！