在基于構建的本主題中，您已經定義了甘特條形圖的樣式、摘要、標準、里程碑和完成百分比。每個條形圖樣式都具有形狀、圖案和顏色屬性。每個條形圖尾部都具有條形圖尾部樣式、顏色和圖案屬性。定義甘特條形圖樣式的代碼位于 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. 甘特條形圖顯示在瀏覽器窗口中時，修改開始日期、持續時間或完成日期之一。
   甘特圖監視對開始日期、持續時間或結束日期的更改。如果這些日期之一發生更改，將重新繪制條形圖。

本文轉載自