在报表开发过程中，会遇到各种情况，有的可能很复杂，需要专业技术人员解决，而有的却很简单，只需要按照其使用说明就能操作。比如本文要讲解的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选项，确定之后，其部件就会显示在操作页面当中。

最后修改甘特条形图中的开始日期、持续时间以及完成日期等，然后进行操作，如果这些因素发生其中之一的改变，条形图也会进行重新绘制，为用户提供全新的条形图。

报表工具产品更多介绍：www.finereport.com

免费下载 体验Demo