CN102799427A - 一种基于gpu生成甘特图的方法 - Google Patents
一种基于gpu生成甘特图的方法 Download PDFInfo
- Publication number
- CN102799427A CN102799427A CN2012102134552A CN201210213455A CN102799427A CN 102799427 A CN102799427 A CN 102799427A CN 2012102134552 A CN2012102134552 A CN 2012102134552A CN 201210213455 A CN201210213455 A CN 201210213455A CN 102799427 A CN102799427 A CN 102799427A
- Authority
- CN
- China
- Prior art keywords
- gpu
- gantt chart
- data
- gunter
- bar
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Landscapes
- Processing Or Creating Images (AREA)
Abstract
本发明公开了一种基于GPU生成甘特图的方法，包括以下步骤：GPU生成甘特图的范围，以及用于存放网页数据的javascript对象,GPU生成甘特图的选项卡和表头,GPU生成甘特图的表体,GPU生成甘特图的甘特条。本发明避免因分开布局而导致滚动条滚动事件联动的相关问题，且界面部局也简洁美观，操作更加方便，用户体验舒适度更佳，对于具体填充的数据行则采用DIV代替传统的TABLE来构建，实现界面元素的逐步加载显示；此外，本发明的列表部分包含树型结构，按逐节点临时的展开事件，加载下级子节点的数据，实现无限分级加载，即使面对超大容量树型结构的数据时，也能快速加载显示。
Description
技术领域
本发明属于项目计划的图形应用领域，更具体地，涉及一种基于GPU生成甘特图的方法。
背景技术
甘特图是工程类型项目进行工期计划以及任务控制的有效工具。对于大型工程类型项目的管理来说，是一个复杂、艰巨的系统工程，沟通和协调的工作较困难，大量的信息需要有效的管理；然而运用甘特图技术就能够直观、准确的显示和调整工程项目中各任务的数据，并能够以图形化的方式把结果进行统计，方便用户使用，并对整个工程项目进行有效的控制管理。
就目前而言，现有甘特图生成的方法包括基于B/S模式和基于C/S模式二种类型，C/S模式的甘特图对客户端的GPU有一定的要求，生成速度慢，系统资源占用大，且不能应用于互联网，而B/S模式的甘特图对客户端的GPU无任何限制，生成速度快，系统资源占用小，但市面上已知的生成B/S模式的甘特图的方法存在以下问题：
1、甘特图的整体布局是以TABLE为基础，这样浏览器需要完全加载完TABLE里的所有内容才会将其显示在网页上；
2、甘特图的表头部分以及控制表头及所属列是否生成的选项卡部分无法锁定，当内容较多出现滚动条并向下滚动时，表头及选项卡会被遮盖而无法看见；
3、甘特图的行的数据部分和甘特条部分是完全分开的二部分，一旦出现内容较多出现滚动条时，就会存在左右滚动条联动的麻烦；
4、甘特图的在绘制前一次性加载所有数据，然后再绘制图形，但如果遇上大数据量的情况下，这种绘制前预加载所有数据的方式会导致甘特图在生成时的速度非常慢。
发明内容
针对现有技术的缺陷，本发明的目的在于提供一种基于GPU生成甘特图的方法，旨在解决上述现有方法中存在的问题。
为实现上述目的，本发明提供了一种基于GPU生成甘特图的方法，包括以下步骤：
（1）GPU生成甘特图的范围，以及用于存放网页数据的javascript对象；
（2）GPU生成甘特图的选项卡和表头；
（3）GPU生成甘特图的表体；
（4）GPU生成甘特图的甘特条。
步骤（1）包括：
（1-1）GPU从网页获取DIV元素作为甘特图的范围；
（1-2）GPU通过Javascript对网页数据的对象集进行申明和实例化，以存放网页数据。
步骤（2）包括：
（2-1）GPU在作为甘特图范围的DIV元素中生成甘特图的选项卡；
（2-2）GPU在甘特图的选项卡中形成子DIV元素集合；
（2-3）GPU通过线条绘制的方式改变子DIV元素集合的外形，并在子DIV元素集合中填充数据；
（2-4）GPU通过TABLE控件在网页上生成甘特图的表头行对象，然后在表头行对象中生成非日期类型列头对象以及日期类型列头对象；
（2-5）GPU锁定甘特图的选项卡和表头，以避免其在网页中出现的位置受到滚动条影响；
（2-6）GPU为TABLE控件增加一个行对象作为表体行对象。
步骤（3）包括：
（3-1）GPU生成甘特图的表体范围；
（3-2）GPU根据TABLE控件在网页中的位置调整甘特图的表体范围，以保证甘特图的表体范围和表体行对象在位置上重合；
（3-3）GPU调整甘特图的表体范围的高度，以使其与表体行对象的高度一致；
（3-4）GPU在甘特图的表体范围中生成用于存放行数据的子DIV元素集合；
（3-5）GPU在存放行数据的子DIV元素集合中生成用于存放列数据的子DIV元素集合。
步骤（4）包括：
（4-1）GPU从用于存放行数据的子DIV元素集合中选择子DIV元素；
（4-2）GPU利用AJAX技术从网页后端获取用于生成甘特图的数据；
（4-3）GPU将甘特图的数据填充在选择的子DIV元素中，以形成甘特条。
用于生成甘特图的数据包括甘特图的项目和任务名称、执行状态、计划工期、计划开始日期、计划结束日期、预计工作量、负责人、前置任务。
步骤（4-3）包括：
（4-3-1）GPU根据甘特图的数据生成甘特条模型，其包括甘特条的长、宽、高及线条型状态、质贴图以及阴影填充色，并将甘特条模型存入内存；
（4-3-2）CPU从内存中获取甘特条模型，对甘特条模型进行材质贴图以生成甘特条的多边形信息，并将甘特条的多边形信息交给GPU；
（4-3-3）GPU将甘特条的多边形信息放进显存，显存为多边形信息贴材质和上颜色，并将多边形信息传送到CPU；
（4-3-4）CPU对多边型信息进行光照，计算光照后产生的影子的轮廓，并将影子的轮廓回传至GPU的显存；
（4-3-5）GPU对显存中影子的轮廓填充深的颜色。
通过本发明所构思的以上技术方案，与现有技术相比，本发明具有以下有益效果：
1、由于采用了步骤（1-1）、（2-2）、（3-1）、（3-4）、（3-5）主要采用DIV布局生成，只有表头部分用TABLE生成，这样浏览器会逐步生成并显示甘特图中的每一行数据，包括甘特条。
2、由于采用了步骤（2-4）、（2-5），锁定了甘特图的表头部分和用于控制表头及所属列是否生成的选项卡部分，这样当内容较多出现滚动条并向下滚动时，表头部分和选项卡部分会悬浮在原地不动，方便使用者查看表头信息及使用选项卡。
3、由于采用了步骤（3-2）、（3-3）、（3-4）、（3-5）同一个TABLE中生成数据列部分的列头和甘特条日期部分的列头，彻底避免因分开布局而导致滚动条滚动事件联动的相关问题，且界面部局也简洁美观，操作更加方便，用户体验舒适度更佳，对于具体填充的数据行则采用DIV代替传统的TABLE来构建，实现界面元素的逐步加载显示。
4、由于采用了步骤（4-2），实现的列表部分包含树型结构，按逐节点临时的展开事件，加载下级子节点的数据，实现无限分级加载，即使面对超大容量树型结构的数据时，也能快速加载显示。
附图说明
图1是本发明基于GPU生成甘特图的方法的结构图；
图2是本发明基于GPU生成甘特图的方法的流程图；
图3是本发明基于GPU生成甘特图的方法的应用实例。
具体实施方式
为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。
以下首先对本发明的技术术语进行解释和说明。
DIV元素：是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素，DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。
AJAX：异步JavaScript和XML（Asynchronous JavaScript and XML），是指一种创建交互式网页应用的网页开发技术。
如图1和图2所示，本发明基于GPU生成甘特图的方法包括以下步骤：
（1）GPU生成甘特图的范围，以及用于存放网页数据的javascript对象；
具体而言，本步骤包括：
（1-1）GPU从网页获取DIV元素作为甘特图的范围；
（1-2）GPU通过Javascript对网页数据的对象集进行申明和实例化，以存放网页数据。
（2）GPU生成甘特图的选项卡和表头；
具体而言，本步骤包括：
（2-1）GPU在作为甘特图范围的DIV元素中生成甘特图的选项卡；
（2-2）GPU在甘特图的选项卡中形成子DIV元素集合；
（2-3）GPU通过线条绘制的方式改变子DIV元素集合的外形，并在子DIV元素集合中填充数据；具体而言，将子DIV元素集合的外形由原始的矩形改变为不规则梯形；
（2-4）GPU通过TABLE控件在网页上生成甘特图的表头行对象TR，然后在表头行对象中生成非日期类型列头对象TD以及日期类型列头对象TD；
（2-5）GPU锁定甘特图的选项卡和表头，以避免其在网页中出现的位置受到滚动条影响；
（2-6）GPU为TABLE控件增加一个行对象作为表体行对象。
（3）GPU生成甘特图的表体；
具体而言，本步骤包括：
（3-1）GPU生成甘特图的表体范围；
（3-2）GPU根据TABLE控件在网页中的位置调整甘特图的表体范围，以保证甘特图的表体范围和表体行对象在位置上重合；
（3-3）GPU调整甘特图的表体范围的高度，以使其与表体行对象的高度一致；
（3-4）GPU在甘特图的表体范围中生成用于存放行数据的子DIV元素集合；
（3-5）GPU在存放行数据的子DIV元素集合中生成用于存放列数据的子DIV元素集合。
（4）GPU生成甘特图的甘特条；
具体而言，本步骤包括：
（4-1）GPU从用于存放行数据的子DIV元素集合中选择子DIV元素；
（4-2）GPU利用AJAX技术从网页后端获取用于生成甘特图的数据，数据包括例如甘特图的项目和任务名称、执行状态、计划工期、计划开始日期、计划结束日期、预计工作量、负责人、前置任务等。
（4-3）GPU将甘特图的数据填充在选择的子DIV元素中，以形成甘特条。
步骤（4-3）具体包括：
（4-3-1）GPU根据甘特图的数据生成甘特条模型，其包括甘特条的长、宽、高及线条型状态、质贴图以及阴影填充色，并将甘特条模型存入内存；
（4-3-2）CPU从内存中获取甘特条模型，对甘特条模型进行材质贴图以生成甘特条的多边形信息，并将甘特条的多边形信息交给GPU；
（4-3-3）GPU将甘特条的多边形信息放进显存，显存为多边形信息贴材质和上颜色，并将多边形信息传送到CPU；
（4-3-4）CPU对多边型信息进行光照，计算光照后产生的影子的轮廓，并将影子的轮廓回传至GPU的显存；
（4-3-5）GPU对显存中影子的轮廓填充深的颜色。
应用实例
如图3所示，下面举例说明本发明的方法：
首先在从网页获取DIV元素作为甘特图的范围，其次通过Javascript对网页数据的对象集进行申明和实例化，以存放网页数据。
然后在作为甘特图范围的DIV元素中生成甘特图的选项卡，其次在甘特图的选项卡中形成子DIV元素集合；
再其次通过线条绘制的方式改变子DIV元素集合的外形，并在子DIV元素集合中填充数据，具体而言，将子DIV元素集合的外形由原始的矩形改变为不规则梯形；
再其次通过TABLE控件在网页上生成甘特图的表头行对象TR，然后在表头行对象中生成非日期类型列头对象TD以及日期类型列头对象TD，其中非日期类型列头包括名称、执行状态、计划开始日期、计划结束日期、预估工作量、负责人、前置任务等，日期类型列头以浅蓝底色代表周六周日，以白色底色代表周一至周五；
再其次通过TABLE控件在网页上生成甘特图的表头；再其次锁定甘特图的选项卡和表头，以避免其在网页中出现的位置受到滚动条影响；
再其次为TABLE控件增加一个行对象作为表体行对象，同时也以浅蓝底色代表周六周日，以白色底色代表周一至周五。
再然后生成甘特图的表体范围，其次根据TABLE控件在网页中的位置调整甘特图的表体范围，以保证甘特图的表体范围和表体行对象在位置上重合；
再其次调整甘特图的表体范围的高度，以使其与表体行对象的高度一致；
再其次在甘特图的表体范围中生成用于存放行数据的子DIV元素集合；再其次在存放行数据的子DIV元素集合中生成用于存放列数据的子DIV元素集合。
再然后从用于存放行数据的子DIV元素集合中选择子DIV元素，其次利用AJAX技术从网页后端获取用于生成甘特图的数据，数据包括例如甘特图的项目或任务的名称、执行状态、计划工期、计划开始日期、计划结束日期、预计工作量、负责人、前置任务等；
再其次GPU根据甘特图的数据生成甘特条模型，其包括甘特条的长、宽、高及线条型状态、质贴图以及阴影填充色，并将甘特条模型存入内存；
再其次CPU从内存中获取甘特条模型，对甘特条模型进行材质贴图以生成甘特条的多边形信息，并将甘特条的多边形信息交给GPU；
再其次GPU将甘特条的多边形信息放进显存，显存为多边形信息贴材质和上颜色，并将多边形信息传送到CPU；
再其次CPU对多边型信息进行光照，计算光照后产生的影子的轮廓，并将影子的轮廓回传至GPU的显存，最后GPU对显存中影子的轮廓填充深的颜色，此时，代表项目的甘特条以灰黑渐变底色、宽度和位置与计划开始日期和计划结束日期描述一致的长条状图形显示出来，而代表任务的甘特条则以浅蓝至深蓝渐变底色、宽度和位置与计划开始日期和计划结束日期描述一致的长条状图形显示出来。
本领域的技术人员容易理解，以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内所作的任何修改、等同替换和改进等，均应包含在本发明的保护范围之内。
Claims (7)
1.一种基于GPU生成甘特图的方法，其特征在于，包括以下步骤：
（1）GPU生成甘特图的范围，以及用于存放网页数据的javascript对象；
（2）GPU生成甘特图的选项卡和表头；
（3）GPU生成甘特图的表体；
（4）GPU生成甘特图的甘特条。
2.根据权利要求1所述的方法，其特征在于，步骤（1）包括：
（1-1）GPU从网页获取DIV元素作为甘特图的范围；
（1-2）GPU通过Javascript对网页数据的对象集进行申明和实例化，以存放网页数据。
3.根据权利要求1所述的方法，其特征在于，步骤（2）包括：
（2-1）GPU在作为甘特图范围的DIV元素中生成甘特图的选项卡；
（2-2）GPU在甘特图的选项卡中形成子DIV元素集合；
（2-3）GPU通过线条绘制的方式改变子DIV元素集合的外形，并在子DIV元素集合中填充数据；
（2-4）GPU通过TABLE控件在网页上生成甘特图的表头行对象，然后在表头行对象中生成非日期类型列头对象以及日期类型列头对象；
（2-5）GPU锁定甘特图的选项卡和表头，以避免其在网页中出现的位置受到滚动条影响；
（2-6）GPU为TABLE控件增加一个行对象作为表体行对象。
4.根据权利要求1所述的方法，其特征在于，步骤（3）包括：
（3-1）GPU生成甘特图的表体范围；
（3-2）GPU根据TABLE控件在网页中的位置调整甘特图的表体范围，以保证甘特图的表体范围和表体行对象在位置上重合；
（3-3）GPU调整甘特图的表体范围的高度，以使其与表体行对象的高度一致；
（3-4）GPU在甘特图的表体范围中生成用于存放行数据的子DIV元素集合；
（3-5）GPU在存放行数据的子DIV元素集合中生成用于存放列数据的子DIV元素集合。
5.根据权利要求1所述的方法，其特征在于，步骤（4）包括：
（4-1）GPU从用于存放行数据的子DIV元素集合中选择子DIV元素；
（4-2）GPU利用AJAX技术从网页后端获取用于生成甘特图的数据；
（4-3）GPU将甘特图的数据填充在选择的子DIV元素中，以形成甘特条。
6.根据权利要求5所述的方法，其特征在于，用于生成甘特图的数据包括甘特图的项目和任务名称、执行状态、计划工期、计划开始日期、计划结束日期、预计工作量、负责人、前置任务。
7.根据权利要求5所述的方法，其特征在于，步骤（4-3）包括：
（4-3-1）GPU根据甘特图的数据生成甘特条模型，其包括甘特条的长、宽、高及线条型状态、质贴图以及阴影填充色，并将甘特条模型存入内存；
（4-3-2）CPU从内存中获取甘特条模型，对甘特条模型进行材质贴图以生成甘特条的多边形信息，并将甘特条的多边形信息交给GPU；
（4-3-3）GPU将甘特条的多边形信息放进显存，显存为多边形信息贴材质和上颜色，并将多边形信息传送到CPU；
（4-3-4）CPU对多边型信息进行光照，计算光照后产生的影子的轮廓，并将影子的轮廓回传至GPU的显存；
（4-3-5）GPU对显存中影子的轮廓填充深的颜色。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN2012102134552A CN102799427A (zh) | 2012-06-26 | 2012-06-26 | 一种基于gpu生成甘特图的方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN2012102134552A CN102799427A (zh) | 2012-06-26 | 2012-06-26 | 一种基于gpu生成甘特图的方法 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN102799427A true CN102799427A (zh) | 2012-11-28 |
Family
ID=47198544
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN2012102134552A Pending CN102799427A (zh) | 2012-06-26 | 2012-06-26 | 一种基于gpu生成甘特图的方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN102799427A (zh) |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105512099A (zh) * | 2015-12-09 | 2016-04-20 | 金蝶软件（中国）有限公司 | 一种甘特图的生成方法及装置 |
| CN110163791A (zh) * | 2019-05-21 | 2019-08-23 | 中科驭数（北京）科技有限公司 | 数据计算流图的gpu处理方法及装置 |
| CN110704441A (zh) * | 2019-09-27 | 2020-01-17 | 杭州时光坐标影视传媒股份有限公司 | 影视任务排期方法、系统、设备和可读存储介质 |
| CN111898049A (zh) * | 2020-06-16 | 2020-11-06 | 广州市玄武无线科技股份有限公司 | 一种表格实现方法、装置、计算机终端设备及存储介质 |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1614927A (zh) * | 2004-11-18 | 2005-05-11 | 北京锐安科技有限公司 | 在b/s结构中实现树型结构的方法 |
| CN101114936A (zh) * | 2007-09-06 | 2008-01-30 | 华为技术有限公司 | 拓扑图显示方法、系统及装置 |
| CN102339291A (zh) * | 2010-07-23 | 2012-02-01 | 阿里巴巴集团控股有限公司 | 一种列表生成方法及设备 |
-
2012
- 2012-06-26 CN CN2012102134552A patent/CN102799427A/zh active Pending
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1614927A (zh) * | 2004-11-18 | 2005-05-11 | 北京锐安科技有限公司 | 在b/s结构中实现树型结构的方法 |
| CN101114936A (zh) * | 2007-09-06 | 2008-01-30 | 华为技术有限公司 | 拓扑图显示方法、系统及装置 |
| CN102339291A (zh) * | 2010-07-23 | 2012-02-01 | 阿里巴巴集团控股有限公司 | 一种列表生成方法及设备 |
Non-Patent Citations (1)
| Title |
|---|
| 夏臻等: ""基于SVG技术的甘特图绘制组件设计与实现"", 《计算机工程与设计》 * |
Cited By (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105512099A (zh) * | 2015-12-09 | 2016-04-20 | 金蝶软件（中国）有限公司 | 一种甘特图的生成方法及装置 |
| CN105512099B (zh) * | 2015-12-09 | 2020-04-28 | 金蝶软件（中国）有限公司 | 一种甘特图的生成方法及装置 |
| CN110163791A (zh) * | 2019-05-21 | 2019-08-23 | 中科驭数（北京）科技有限公司 | 数据计算流图的gpu处理方法及装置 |
| CN110704441A (zh) * | 2019-09-27 | 2020-01-17 | 杭州时光坐标影视传媒股份有限公司 | 影视任务排期方法、系统、设备和可读存储介质 |
| CN110704441B (zh) * | 2019-09-27 | 2020-09-08 | 杭州时光坐标影视传媒股份有限公司 | 影视任务排期方法、系统、设备和可读存储介质 |
| CN111898049A (zh) * | 2020-06-16 | 2020-11-06 | 广州市玄武无线科技股份有限公司 | 一种表格实现方法、装置、计算机终端设备及存储介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN107704576B (zh) | 数据展示优化方法、装置、终端设备及存储介质 | |
| US10185703B2 (en) | Web site design system integrating dynamic layout and dynamic content | |
| CN103077239B (zh) | 基于云渲染的iFrame嵌入式Web3D系统 | |
| CN102609256A (zh) | 一种基于网页的动态图表生成方法 | |
| CN110096277A (zh) | 一种动态页面展示方法、装置、电子设备及存储介质 | |
| CN103870558B (zh) | 页面渲染方法和遮罩层创建方法 | |
| US10109086B1 (en) | Animated transitions between graphs | |
| CN109597613A (zh) | 一种拖拽式组合报表的大屏展示系统及方法 | |
| CN102799427A (zh) | 一种基于gpu生成甘特图的方法 | |
| CN102509350A (zh) | 一种基于立方体的体育运动赛事信息可视化方法 | |
| CN102866886A (zh) | 一种基于Web的算法动画可视化开发系统 | |
| CN104461573B (zh) | 一种视图层次的控制处理方法 | |
| CN107402775A (zh) | 网页的生成方法、装置和系统 | |
| CN103677789A (zh) | 基于grid组件的列表数据展现方法及系统 | |
| CN105094930A (zh) | 一种定位图片系统及方法 | |
| CN114089958A (zh) | 表单可视化配置方法及装置 | |
| CN108228121B (zh) | 一种浏览器分屏的方法、装置及移动终端 | |
| CN114648603B (zh) | 一种基于canvas与echarts实现飞线动效的方法及系统 | |
| CN103279541A (zh) | 一种降低网页浏览器加载负载的方法及其装置 | |
| CN107515748A (zh) | 报表管理界面生成方法及文件共享方法 | |
| CN107707965A (zh) | 一种弹幕的生成方法和装置 | |
| CN114780077A (zh) | 网页可视化编辑的装置及方法 | |
| CN103530023B (zh) | 发布信息的处理方法及系统、客户端 | |
| CN106488298A (zh) | 一种在ui中图像绘制的方法及装置和电视 | |
| CN100504771C (zh) | 一种生成应用程序界面的方法及系统 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| C05 | Deemed withdrawal (patent law before 1993) | ||
| WD01 | Invention patent application deemed withdrawn after publication |
Application publication date: 20121128 |