如何：使用 JS 网格创建甘特图
上次修改时间： 2011年2月15日
适用范围： SharePoint Foundation 2010
本操作方法文章演示如何使用 JS 网格控件创建甘特图。在基于如何：创建基本 JS 网格构建的本主题中，您将定义摘要、标准、里程碑和完成百分比甘特条形图的样式。每个条形图样式都具有形状、图案和颜色。每个条形图尾部都具有条形图尾部样式、颜色和图案。定义甘特条形图样式的代码将位于 GanttUtilities.cs 文件中，该文件位于在如何：创建基本 JS 网格 中创建的 GridUtils 文件夹中。您将修改网格数据以提供能够更好地演示甘特图功能的数据。最后，将使用 GridDataSerializer 的 enableGantt 方法启用甘特图。
备注
对于下列说明中的一些 Visual Studio 用户界面元素，您的计算机可能显示不同的名称或位置。这些元素由您拥有的 Visual Studio 版本和使用的设置决定。
先决条件
Microsoft SharePoint Foundation 2010
Microsoft Visual Studio 2010
Microsoft Visual Studio 2010 中的 SharePoint 开发工具
备注
尽管无需使用 Visual Studio 2010 即可执行此过程，但是使用 Visual Studio 2010 和 Microsoft Visual Studio 2010 中的 SharePoint 开发工具会更简单。
创建甘特条形图样式
在 Visual Studio 中，打开按如何：创建基本 JS 网格中的说明创建的项目。
打开 GridUtilities.cs。
DefaultGanttBarStyleIdsColumnName 存储默认甘特条形图样式 ID 信息。您不希望将 DefaultGanttBarStyleIdsColumnName 用作列或字段。防止这种情况的代码已经位于 GridUtilities.cs 中，但已被注释掉。
取消注释下列行：
// && iterator.ColumnName != GridSerializer.DefaultGanttBarStyleIdsColumnName // Uncomment for the Gantt how-to以及
// && dc.ColumnName != GridSerializer.DefaultGanttBarStyleIdsColumnName // Uncomment for Gantt how-to添加对 System.Drawing 的引用。
在"解决方案资源管理器"中，右键单击"引用"，然后单击"添加引用"。在".NET"选项卡上，选择 System.Drawing，然后单击"确定"。System.Drawing 用于绘制条形图和条形图尾部。
创建 GanttUtilities.cs 文件。
在"解决方案资源管理器"中，右键单击"GridUtils"文件夹，指向"添加"，然后单击"新项目"。
依次选择"Visual C#"、"代码"和"代码文件"。
将该文件命名为 GanttUtilities.cs。
将以下代码复制到 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 类定义摘要、标准、里程碑和完成百分比条形图样式。
启用甘特图
打开 JSGridWebPartUserControl.ascx.cs。
将 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);EnableGantt(DateTime, DateTime, GanttStyleInfo, String) 定义甘特条形图开始的最早日期和条形图结束的最晚日期，从什么位置查找甘特条形图样式以及依赖项列名称（在本示例中为 null）。为简便起见，生成的开始和结束日期基于当前日期。
下一步是修改网格数据，以将甘特条形图样式与每个数据行相关联。
修改网格数据文件
打开 GridData.cs。
甘特图需要使用文件存储甘特条形图样式 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.找到用于为开始日期、持续时间和完成日期分配随机日期的代码。
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));将该代码替换为以下内容。
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) }; }将为第一个任务分配摘要任务样式，为第五个任务分配里程碑样式，为其他任务分配"标准"条形图样式。
甘特条形图样式使用 DefaultGanttBarStyleIdsColumnName 进行设置。如果使用了多个条形图样式，则每个条形图样式都在前一条形图样式的基础上绘制，因此应用条形图样式的顺序非常重要。请注意，标准条形图样式通过以下方式创建：首先绘制标准条形图，然后绘制持续时间条形图。这由自定义条形图数组中条形图样式的顺序确定。
dr[GridSerializer.DefaultGanttBarStyleIdsColumnName] = new GanttUtilities.CustomBarStyle[2] { (GanttUtilities.CustomBarStyle)(1),(GanttUtilities.CustomBarStyle)(3) };
测试 Web 部件
在 Visual Studio 中，按 F5 运行该项目。
运行项目时，将执行部署并打开 SharePoint 2010 网站。Web 部件会自动添加到 SharePoint 2010 Web 部件库。
打开并编辑所有 Web 部件页。您可以将此 Web 部件添加到任何 Web 部件页中。
单击"插入"，单击"Web 部件"，然后从自定义类别中选择"JSWebPart"。该 Web 部件将显示在页面中。
甘特条形图显示在浏览器窗口中时，修改开始日期、持续时间或完成日期之一。
甘特图监视对开始日期、持续时间或结束日期的更改。如果这些日期之一发生更改，将重新绘制条形图。