在基于構建的本主題中，您已經定義了甘特條形圖的樣式、摘要、標準、里程碑和完成百分比。每個條形圖樣式都具有形狀、圖案和顏色屬性。每個條形圖尾部都具有條形圖尾部樣式、顏色和圖案屬性。定義甘特條形圖樣式的代碼位于 GanttUtilities.cs 文件中，該文件位于在中所創建的GridUtils 文件夾里。您可以通過修改網格數據來提供能夠更好的甘特圖功能演示數據。最后，通過使用GridDataSerializer的enableGantt方法來啟用甘特圖。(注意:對于下列說明中的一些 Visual Studio 用戶界面元素，您的計算機可能顯示不同的名稱或位置。這些元素由您所擁有的 Visual Studio 版本和使用的設置決定。)

先決條件：

• Microsoft SharePoint Foundation 2010
• Microsoft Visual Studio 2010
• Microsoft Visual Studio 2010 中的 SharePoint 開發工具
• 完成

創建甘特條形圖樣式

1. 在 Visual Studio 中，打開按中的說明所創建的項目。

2. 打開 GridUtilities.cs。

3. DefaultGanttBarStyleIdsColumnName 存儲默認甘特條形圖樣式 ID 信息。您不希望將DefaultGanttBarStyleIdsColumnName 用作列或字段。防止這種情況的代碼已經位于 GridUtilities.cs 中，但已被注釋掉。取消注釋下列行：

   // && iterator.ColumnName != GridSerializer.DefaultGanttBarStyleIdsColumnName 
   // Uncomment for the Gantt how-to

   以及

   // && dc.ColumnName != GridSerializer.DefaultGanttBarStyleIdsColumnName 
   // Uncomment for Gantt how-to

4. 添加對System.Drawing的引用。
   在"解決方案資源管理器"中，右鍵單擊"引用"，然后單擊"添加引用"。在".NET"選項卡上，選擇System.Drawing，然后單擊"確定"。System.Drawing用于繪制條形圖和條形圖尾部。

5. 創建GanttUtilities.cs文件。

   • 在"解決方案資源管理器"中，右鍵單擊"GridUtils"文件夾，指向"添加"，然后單擊"新項目"。

   • 依次選擇"Visual C#"、"代碼"和"代碼文件"。

   • 將該文件命名為GanttUtilities.cs。

6. 將以下代碼復制到GanttUtilities.cs中。

   using System;
   using System.Collections.Generic;
   using System.Linq;
   using System.Text;
   using System.Drawing; // added for Gantt styles
   using Microsoft.SharePoint.JSGrid;
   
   namespace JSGridSample.GridUtilityLib
   {
       public class GanttUtilities
       {
           public enum CustomBarStyle { Summary, Standard, Milestone, PctComplete }
   
           public static GanttStyleInfo GetStyleInfo()
           {
               var styleInfoObj = new GanttStyleInfo();
   
               /*Summary Bar Style*/
               styleInfoObj.AddBarStyle(new GanttBarStyle(
                   CustomBarStyle.Summary, BarShape.TopHalf, Color.Gray, BarPattern.Solid,
                   BarEndShape.HomePlateDown, Color.Gray, BarShapePattern.Filled,
                   BarEndShape.HomePlateDown, Color.Gray, BarShapePattern.Filled,
                   "Start Date", "Finish Date", 1));
   
               /*Standard Bar Style*/
               styleInfoObj.AddBarStyle(new GanttBarStyle(
                   CustomBarStyle.Standard, BarShape.Full, Color.Blue, BarPattern.Solid,
                   BarEndShape.None, Color.Black, BarShapePattern.Filled,
                   BarEndShape.None, Color.Black, BarShapePattern.Filled,
                   "Start Date", "Finish Date", 1));
   
               /*Milestone Bar Style*/
               styleInfoObj.AddBarStyle(new GanttBarStyle(
                   CustomBarStyle.Milestone, BarShape.None, Color.Black, BarPattern.Solid,
                   BarEndShape.None, Color.Black, BarShapePattern.Filled,
                   BarEndShape.Diamond, Color.Black, BarShapePattern.Filled,
                   "Finish Date", "Finish Date", 1));
   
               /*PctComplete Bar Style*/
               styleInfoObj.AddBarStyle(new GanttBarStyle(
                   CustomBarStyle.PctComplete, BarShape.MidHalf, Color.Black, BarPattern.Solid,
                   BarEndShape.None, Color.Black, BarShapePattern.Filled,
                   BarEndShape.None, Color.Black, BarShapePattern.Filled,
                   "Start Date", "CompleteThrough", 1));
   
               return styleInfoObj;
           }
       }
   }

   
   GanttStyleInfo類定義摘要、標準、里程碑和完成百分比條形圖樣式。

啟用甘特圖

1. 打開JSGridWebPartUserControl.ascx.cs。

2. 將EnableGantt添加到Page_Load方法中。

   // Point the grid serializer at the grid serializer data.
       _grid.GridDataSerializer = gds;
   
        // Tell the grid to listen to the GridManager controller.
       _grid.JSControllerClassName = "GridManager";
   
      // Enable the Gantt chart.
      gds.EnableGantt(DateTime.Now.AddDays(0), DateTime.Now.AddDays(10), GanttUtilities.GetStyleInfo(), null);

    定義甘特條形圖開始的最早日期和條形圖結束的最晚日期，從什么位置查找甘特條形圖樣式以及依賴項列名稱（在本示例中為 null）。為簡便起見，生成的開始和結束日期基于當前日期。

下一步是修改網格數據，以將甘特條形圖樣式與每個數據行相關聯。

修改網格數據文件

1. 打開 GridData.cs。

2. 甘特圖需要使用文件存儲甘特條形圖樣式 ID 信息。執行此操作的代碼已位于 GridData.cs 中，只是已被注釋掉。取消注釋下列行。

   //data.Columns.Add(new DataColumn(GridSerializer.DefaultGanttBarStyleIdsColumnName, typeof(GanttUtilities.CustomBarStyle[]))); // uncomment for the Create a Gantt Chart Using JS Grid How-To.

    

3. 找到用于為開始日期、持續時間和完成日期分配隨機日期的代碼。

               dr["Start Date"] = DateTime.Now.AddSeconds(_rand.Next(60 * 60 * 24 * 20));
                   dr["Finish Date"] = DateTime.Now.AddSeconds(_rand.Next(60 * 60 * 24 * 20));
                   dr["CompleteThrough"] = DateTime.Now.AddSeconds(_rand.Next(60 * 60 * 24 * 20));

    

4. 將該代碼替換為以下內容。

   stDate = DateTime.Now.AddSeconds(_rand.Next(60 * 60 * 24 * 20));
   if (i % 10 == 0)
                   {
                       parent = curKey;
                       j++;
                       dr["Start Date"] = stDate;
                       dr["Finish Date"] = stDate.AddDays(10);
                       //summary gantt bar style
                       dr[GridSerializer.DefaultGanttBarStyleIdsColumnName] = new GanttUtilities.CustomBarStyle[1] { (GanttUtilities.CustomBarStyle)(0) };
   
                   }
                   else if (i % 10 == 5)
                   {
                       // Milestone 
                       dr["Start Date"] = stDate;
                       dr["Finish Date"] = dr["Start Date"];//  +DateTime.Now.AddSeconds(_rand.Next(60 * 60 * 24 * 20));
                       // Milestone Gantt bar style
                       dr[GridSerializer.DefaultGanttBarStyleIdsColumnName] = new GanttUtilities.CustomBarStyle[1] { (GanttUtilities.CustomBarStyle)(2) };
                   }
                   else
                   {
                       dr["Start Date"] = stDate.AddDays(i % 4); ;
                       dr["Finish Date"] = stDate.AddDays(i % 10);
                       dr["CompleteThrough"] = stDate.AddDays(1);
                       // Standard Gantt bar style
                       dr[GridSerializer.DefaultGanttBarStyleIdsColumnName] = new GanttUtilities.CustomBarStyle[2] { (GanttUtilities.CustomBarStyle)(1),(GanttUtilities.CustomBarStyle)(3) };
                   }

   
   將為第一個任務分配摘要任務樣式，為第五個任務分配里程碑樣式，為其他任務分配"標準"條形圖樣式。
   甘特條形圖樣式使用  進行設置。如果使用了多個條形圖樣式，則每個條形圖樣式都在前一條形圖樣式的基礎上繪制，因此應用條形圖樣式的順序非常重要。請注意，標準條形圖樣式通過以下方式創建：首先繪制標準條形圖，然后繪制持續時間條形圖。這由自定義條形圖數組中條形圖樣式的順序確定。

   dr[GridSerializer.DefaultGanttBarStyleIdsColumnName] = new GanttUtilities.CustomBarStyle[2] { (GanttUtilities.CustomBarStyle)(1),(GanttUtilities.CustomBarStyle)(3) };

    

測試Web部件

1. 在 Visual Studio 中，按 F5 運行該項目。
   運行項目時，將執行部署并打開 SharePoint 2010 網站。Web 部件會自動添加到 SharePoint 2010 Web 部件庫。

2. 打開并編輯所有 Web 部件頁。您可以將此 Web 部件添加到任何 Web 部件頁中。

3. 單擊"插入"，單擊"Web 部件"，然后從自定義類別中選擇"JSWebPart";。該 Web 部件將顯示在頁面中。

4. 甘特條形圖顯示在瀏覽器窗口中時，修改開始日期、持續時間或完成日期之一。
   甘特圖監視對開始日期、持續時間或結束日期的更改。如果這些日期之一發生更改，將重新繪制條形圖。

本文轉載自