报表开发之JS网格创建甘特图的方法

文 | 商业智能研究 2022-07-25
阅读次数:1,574

阅读提示:

文中与FineReport软件的相关内容基于文章发布时间的最新软件版本编写,不代表软件最新的使用方式。
FineReport最新版免费试用:https://www.finereport.com/product/active
FineReport最新版使用教程:https://help.fanruan.com/finereport/

创建甘特图

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

免费试用FineReport


本月阅读量最高的10篇文章

售前咨询

服务热线

400-811-8890转1

售后咨询

在线QQ

800049425

服务热线

400-811-8890转2

投诉建议

总裁办24H投诉

173-127-81526