如何使用JS网格创建甘特图-控件新闻-慧都网

如何使用JS网格创建甘特图

转帖|使用教程|编辑：郝浩|2015-06-15 17:39:58.000|阅读 579 次

概述：本操作方法文章将演示如何使用 JS 网格控件创建甘特图。

在基于构建的本主题中，您已经定义了甘特条形图的样式、摘要、标准、里程碑和完成百分比。每个条形图样式都具有形状、图案和颜色属性。每个条形图尾部都具有条形图尾部样式、颜色和图案属性。定义甘特条形图样式的代码位于 GanttUtilities.cs 文件中，该文件位于在中所创建的GridUtils 文件夹里。您可以通过修改网格数据来提供能够更好的甘特图功能演示数据。最后，通过使用GridDataSerializer的enableGantt方法来启用甘特图。(注意:对于下列说明中的一些 Visual Studio 用户界面元素，您的计算机可能显示不同的名称或位置。这些元素由您所拥有的 Visual Studio 版本和使用的设置决定。)

先决条件：

Microsoft SharePoint Foundation 2010
Microsoft Visual Studio 2010
Microsoft Visual Studio 2010 中的 SharePoint 开发工具
完成

创建甘特条形图样式

在 Visual Studio 中，打开按中的说明所创建的项目。
打开 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);

定义甘特条形图开始的最早日期和条形图结束的最晚日期，从什么位置查找甘特条形图样式以及依赖项列名称（在本示例中为 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) };
                }

将为第一个任务分配摘要任务样式，为第五个任务分配里程碑样式，为其他任务分配"标准"条形图样式。
甘特条形图样式使用 ; 进行设置。如果使用了多个条形图样式，则每个条形图样式都在前一条形图样式的基础上绘制，因此应用条形图样式的顺序非常重要。请注意，标准条形图样式通过以下方式创建：首先绘制标准条形图，然后绘制持续时间条形图。这由自定义条形图数组中条形图样式的顺序确定。

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 部件将显示在页面中。
甘特条形图显示在浏览器窗口中时，修改开始日期、持续时间或完成日期之一。
甘特图监视对开始日期、持续时间或结束日期的更改。如果这些日期之一发生更改，将重新绘制条形图。

本文转载自

标签：甘特图

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

上一篇：软件分发管理器——Secure Delivery Center (SDC)功能概述下一篇：MyEclipse移动开发教程：移动Web模拟器指南（二）