[发明专利]基于浏览器的横道图生成方法及装置

说明书

技术领域

本发明涉及计算机技术领域，特别涉及基于浏览器的横道图生成方法及装置。

背景技术

横道图又叫甘特图(Gantt Chart)、条状图，它是以图示的方式通过活动列表和时间刻度形象地表示任何特定项目的活动顺序与持续时间，甘特图是项目工程的进度管理工具。通常横道图的右侧显示工序信息，包括工序名称、进度、完工百分比等，左侧以图形方式显示工序进度，进度可按照日、周、月等不同时间类型查看，每个工序的进度和工期用不同颜色的带状图形表示。常见的显示横道图的软件有MicroSoft Proiect，但这些软件都是桌面应用程序，难以在浏览器上运行。现有技术中在浏览器上运行横道图时，采用HTML超文本链接语言，由于HTML语言本身不提供画图功能，因此通过标签拼接出图形。对于横道图来说，主要采用HTML语言中的标签，并结合JavaScript操作节点生成横道图。以按天显示的横道图为例，一道工序的进度图形用div显示，整个图像用表格<table>显示，每生成一天数据，就用JavaScript动态生成一个<td>标签，表示相应工序的执行进度，将该标签追加到整个表格上后，浏览器会相应刷新整个表格布局，并对页面进行重新渲染。

发明人在对现有技术的研究过程中发现，随着横道图上数据量的增加，每生成一个<td>标签就重复对页面刷新渲染一次，将导致图形的生成速度下降，系统性能降低，用户需要等待较长时间才能看到图形，降低了用户体验；由于大型项目的执行周期长，进度信息多，因此难以通过横道图在浏览器中显示，由此限制了横道图的应用范围。

发明内容

本发明实施例的目的在于提供一种基于浏览器的横道图生成方法及装置，以解决现有技术中在浏览器上显示横道图速度较慢，性能不高的问题。

为解决上述技术问题，本发明实施例提供如下技术方案：

一种基于浏览器的横道图生成方法，包括：

根据横道图所承载项目的工序信息初始化背景表格的布局，生成表格标签；

按照每一个工序的数据在所述背景表格中为所述每一个工序生成一个工序进度标签，以及若干周期数据标签；

将所述表格标签、工序进度标签和周期数据标签进行组合生成完整横道图。

所述根据横道图所承载项目的工序信息初始化背景表格的布局包括：

为所述横道图所承载工序选择表格标签的样式，所述样式具有固定尺寸；

设置所述表格标签中工序的周期类型，以及每个周期所占用的列宽值；

根据每一个工序的延续时间确定所述项目的延续时间；

根据所述项目的延续时间及时间周期类型计算所述表格标签的列数量。

所述根据每一个工序的延续时间确定所述项目的延续时间包括：

获取每一个工序的开始时间和结束时间；

从获取的所有工序的开始时间和结束时间中选择最早的开始时间和最晚的结束时间作为所述项目的开始时间和结束时间。

所述按照每一个工序的数据在所述背景表格中为所述每一个工序生成一个工序进度标签，以及若干周期数据标签包括：

先序遍历工序数据集合，从中获取一个工序的数据，所述工序的数据包括工序的开始时间、结束时间、时间周期类型和完工百分比；

根据每一个工序的开始时间、结束时间和完工百分比为所述工序生成一个工序进度标签，计算出进度标签在背景表格上的坐标位置；

根据每一个工序的开始时间、结束时间、时间周期类型计算所述工序的周期数量，并根据周期数据生成对应的周期数据标签；

判断是否处理完所有工序的数据，若是，则触发执行所述将所述表格标签、工序进度标签和周期数据标签进行组合生成完整横道图的步骤，否则，返回所述先序遍历工序数据集合，从中获取一个工序的数据的步骤。

所述将所述表格标签、工序进度标签和周期数据标签进行组合生成完整横道图之前，还包括：

确定所述表格标签、工序进度标签和所述周期数据标签的尺寸；

缓存所述表格标签、工序进度标签和周期数据标签及其尺寸。

所述将表格标签、工序进度标签和周期数据标签进行组合生成完整横道图包括：

将所述缓存的表格标签、工序进度标签和周期数据标签进行连接，生成连接后的标签图形；

通过浏览器对所述连接后的标签图形进行一次渲染生成横道图。

一种基于浏览器的横道图生成装置，包括：

初始化单元，用于根据横道图所承载项目的工序信息初始化背景表格的布局，生成表格标签；