CN107391467A - 报表组件布局信息处理方法及装置 - Google Patents

Abstract

本申请实施例提供一种报表组件布局信息处理方法及装置。其中，方法包括：展示图形化界面，所述图形化界面包括可拖动的报表组件和布局面板，以供用户在所述布局面板上布设目标报表组件；创建与所述布局面板适配的m*n的xy坐标体系；m为所述布局面板在x轴上占据的单位刻度的个数，n为所述布局面板在y轴上占据的单位刻度的个数，m、n为自然数；响应于所述用户提交报表组件布局的操作，基于所述xy坐标体系，获取所述目标报表组件之间的布局信息。本申请实施例在支持简单、灵活、友好地配置多样性组件布局的基础上，解决了报表组件之间的布局信息的获取问题。

Description

报表组件布局信息处理方法及装置

技术领域

本申请涉及互联网技术领域，尤其涉及一种报表组件布局信息处理方法及装置。

背景技术

数据报表在展示数据方面具有直观且易于理解的优势，因此在各行各业中得到广泛应用。数据报表是数据的传递载体，而数据在数据报表中可通过报表组件来体现，例如表格、折线图、扇形图、柱状图等。一般来说，应用场景不同，这些报表组件之间的排布形式也会不同。其中，报表组件之间的排布形式可称为报表组件之间的布局。

在现有技术中，需要报表配置人员利用编程语言，例如超文本标记语言(HyperText Markup Language，HTML)编写数据报表对应的配置文件，该配置文件主要用于配置数据报表的数据、数据与报表组件之间的关联以及报表组件之间的布局。然后，将配置文件固化在机器中，最终由机器根据配置文件生成数据报表。

机器生成数据报表离不开报表组件之间的布局信息。现有报表组件之间的布局也就是报表组件在配置文件中的书写顺序，属于流式布局，得力于HTML的所见即所得以及对这种流式布局的标准支持。基于HTML的配置文件，可以很容易地获取报表组件之间的布局信息，但是这种布局比较单一，无法满足报表组件布局多样性的需求。因此，急需一种既能让用户方便、灵活地配置多样性的组件布局，又能快速、准确地获取到组件之间的布局信息的技术方案。

发明内容

针对现有技术存在的问题，本申请发明人提供一种解决方案，其主要原理是：通过向用户展示图形化界面，图形化界面包括可拖动的报表组件以及布局面板，以供用户通过托动报表组件在布局面板上进行组件布局，达到了方便、灵活地配置多样性的组件布局的目的；另外，针对布局面板构建适配的xy坐标体系，基于xy坐标体系可以得到报表组件之间的布局信息，从而在支持简单、灵活、友好地配置多样性组件布局的基础上，解决了报表组件之间的布局信息的获取问题。

基于上述分析，本申请实施例提供一种报表组件布局信息处理方法，包括：

展示图形化界面，所述图形化界面包括可拖动的报表组件和布局面板，以供用户在所述布局面板上布设目标报表组件；

创建与所述布局面板适配的m*n的xy坐标体系；m为所述布局面板在x轴上占据的单位刻度的个数，n为所述布局面板在y轴上占据的单位刻度的个数，m、n为自然数；

响应于所述用户提交报表组件布局的操作，基于所述xy坐标体系，获取所述目标报表组件之间的布局信息。

在一可选实施方式中，创建与所述布局面板适配的m*n的xy坐标体系，包括：

确定所述布局面板的宽度方向和高度方向分别为所述xy坐标体系中的x轴和y轴；

将所述布局面板的宽度与所述宽度方向上指定的列数k的比值，作为所述xy坐标体系中的单位刻度的取值，其中，m＝k；

标记所述xy坐标体系中的m*n个方格，n＝所述布局面板的高度/所述单位刻度的取值；

为所述m*n个方格分别赋予坐标值。

在一可选实施方式中，为所述m*n个方格分别赋予坐标值，包括：

对所述m*n个方格中的每个方格，基于所述xy坐标体系识别所述方格上四个顶点的坐标值；

从所述方格上四个顶点的坐标值中，选择最小坐标值对应的顶点作为所述方格的坐标顶点，所述坐标顶点的坐标值为所述方格的坐标值。

在一可选实施方式中，在所述用户在所述布局面板上布设所述目标报表组件的过程中，所述方法还包括：

根据所述目标报表组件对所述xy坐标体系中方格的覆盖情况，调整所述目标报表组件在布局面板中的位置和/或大小。

在一可选实施方式中，根据所述目标报表组件对所述xy坐标体系中方格的覆盖情况，调整所述目标报表组件在布局面板中的位置和/或大小，包括：

以移动距离最小为目标，对所述目标报表组件进行拖动和/或缩放，使得所述目标报表组件位于q个相邻的方格内，q为自然数。

在一可选实施方式中，以移动距离最小为目标，对所述目标报表组件进行拖动和/或缩放，使得所述目标报表组件位于q个相邻的方格内，包括：

根据所述目标报表组件上四个顶点的坐标值以及被所述目标组件覆盖到的各方格的坐标值，识别出所述目标报表组件上四个顶点所在的边缘方格；

根据所述目标报表组件上四个顶点在屏幕上的像素坐标以及各自所在边缘方格的顶点在屏幕上的像素坐标，计算所述目标报表组件上四个顶点与各自所在边缘方格之间的距离比；

从所述目标报表组件上四个顶点所在边缘方格中，确定距离比最小的目标方格顶点；

移动或缩放所述目标报表组件，以使得所述目标报表组件上位于所述目标方格顶点所在方格内的顶点位于所述目标方格顶点附近。

在一可选实施方式中，响应于所述用户提交报表组件布局的操作，基于所述xy坐标体系，获取所述目标报表组件之间的布局信息，包括：

基于所述xy坐标体系，获取所述目标报表组件的x轴偏移量、y轴偏移量、宽度和高度；

将所述目标报表组件的x轴偏移量、y轴偏移量、宽度和高度作为一个信息项，记录到用于描述所述目标报表组件之间的布局信息的数据串中。

在一可选实施方式中，基于所述xy坐标体系，获取所述目标报表组件的x轴偏移量、y轴偏移量、宽度和高度，包括：

探测所述xy坐标体系中被所述目标报表组件覆盖的方格组；

获取所述方格组中首个被探测到的方格的坐标值，分别作为所述目标报表组件的x轴偏移量和y轴偏移量；

获取所述方格组的宽度和高度，作为所述目标报表组件的宽度和高度。

在一可选实施方式中，所述方法还包括：

将所述数据串转成HTML格式的布局描述文档；

存储所述HTML格式的布局描述文档。

在一可选实施方式中，将所述数据串转成HTML格式的布局描述文档，包括：

根据所述数据串中各信息项中的x轴偏移量和y轴偏移量，创建与所述xy坐标体系对应的HTML表格；

在所述HTML表格中，还原所述数据串中各信息项对应的目标报表组件的位置和大小，以得到所述HTML格式的布局描述文档。

在一可选实施方式中，根据所述数据串中各信息项中的x轴偏移量和y轴偏移量，创建与所述xy坐标体系对应的HTML表格，包括：

从所述数据串中各信息项中的x轴偏移量和y轴偏移量中，获取x轴最大偏移量xMax和y轴最大偏移量yMax；

创建包含yMax行、每行包含xMax个单元格的HTML表格。

在一可选实施方式中，在所述HTML表格中，还原所述数据串中各信息项对应的目标报表组件的位置和大小，以得到所述HTML格式的布局描述文档，包括：

对所述数据串中的每个信息项，根据所述信息项中的x轴偏移量和y轴偏移量，确定所述信息项对应的目标报表组件在所述HTML表格中对应的定位单元格；

根据所述信息项中的宽度和高度，确定所述信息项对应的目标报表组件在所述HTML表格中对应的其它单元格；

将所述信息项对应的目标报表组件在所述HTML表格中对应的其它单元格合并至所述定位单元格；

在处理所有信息项后，删除所述HTML表格中的非定位单元格，以得到所述HTML格式的布局描述文档。

在一可选实施方式中，根据所述数据串中各信息项中的x轴偏移量和y轴偏移量，创建与所述xy坐标体系对应的HTML表格，包括：

从所述数据串中各信息项中的x轴偏移量和y轴偏移量中，获取x轴最大偏移量xMax和y轴最大偏移量yMax；

创建包含yMax+1行、每行包含xMax+1个单元格的HTML表格；

锁定所述HTML表格中第一行和第一列中单元格的样式。

在一可选实施方式中，在所述HTML表格中，还原所述数据串中各信息项对应的目标报表组件的位置和大小，以得到所述HTML格式的布局描述文档，包括：

对所述数据串中的每个信息项，根据所述信息项中的x轴偏移量+1和y轴偏移量+1，确定所述信息项对应的目标报表组件在所述HTML表格中对应的定位单元格；

根据所述信息项中的宽度和高度，确定所述信息项对应的目标报表组件在所述HTML表格中对应的其它单元格；

将所述信息项对应的目标报表组件在所述HTML表格中对应的其它单元格合并至所述定位单元格；

在处理所有信息项后，删除所述HTML表格中的非定位单元格，以得到所述HTML格式的布局描述文档。

在一可选实施方式中，在得到所述HTML格式的布局描述文档的过程中，所述方法还包括：

在删除所述HTML表格中的非定位单元格之后，设置所述第一行的高度和所述第一列的宽度分别为隐藏临界值，以隐藏所述第一行和所述第一列。

本申请实施例还提供一种报表组件布局信息处理装置，包括：

展示模块，用于展示图形化界面，所述图形化界面包括可拖动的报表组件和布局面板，以供用户在所述布局面板上布设目标报表组件；

创建模块，用于创建与所述布局面板适配的m*n的xy坐标体系；m为所述布局面板在x轴上占据的单位刻度的个数，n为所述布局面板在y轴上占据的单位刻度的个数，m、n为自然数；

获取模块，用于响应于所述用户提交报表组件布局的操作，基于所述xy坐标体系，获取所述目标报表组件之间的布局信息。

在一可选实施方式中，所述创建模块具体用于：

确定所述布局面板的宽度方向和高度方向分别为所述xy坐标体系中的x轴和y轴；

将所述布局面板的宽度与所述宽度方向上指定的列数k的比值，作为所述xy坐标体系中的单位刻度的取值，其中，m＝k；

标记所述xy坐标体系中的m*n个方格，n＝所述布局面板的高度/所述单位刻度的取值；

为所述m*n个方格分别赋予坐标值。

在一可选实施方式中，所述创建模块在为所述m*n个方格分别赋予坐标值时，具体用于：

对所述m*n个方格中的每个方格，基于所述xy坐标体系识别所述方格上四个顶点的坐标值；

从所述方格上四个顶点中，选择最小坐标值对应的顶点作为所述方格的坐标顶点，所述坐标顶点的坐标值为所述方格的坐标值。

在一可选实施方式中，所述装置还包括：

调整模块，用于在所述用户在所述布局面板上布设所述目标报表组件的过程中，根据所述目标报表组件对所述xy坐标体系中方格的覆盖情况，调整所述目标报表组件在布局面板中的位置和/或大小。

在一可选实施方式中，所述调整模块具体用于：

以移动距离最小为目标，对所述目标报表组件进行拖动和/或缩放，使得所述目标报表组件位于q个相邻的方格内，q为自然数。

在一可选实施方式中，所述调整模块具体用于：

根据所述目标报表组件上四个顶点的坐标值以及被所述目标组件覆盖到的各方格的坐标值，识别出所述目标报表组件上四个顶点所在的边缘方格；

根据所述目标报表组件上四个顶点在屏幕上的像素坐标以及各自所在边缘方格的顶点在屏幕上的像素坐标，计算所述目标报表组件上四个顶点与各自所在边缘方格之间的距离比；

从所述目标报表组件上四个顶点所在边缘方格中，确定距离比最小的目标方格顶点；

移动或缩放所述目标报表组件，以使得所述目标报表组件上位于所述目标方格顶点所在方格内的顶点位于所述目标方格顶点附近。

在一可选实施方式中，所述获取模块具体用于：

基于所述xy坐标体系，获取所述目标报表组件的x轴偏移量、y轴偏移量、宽度和高度；

将所述目标报表组件的x轴偏移量、y轴偏移量、宽度和高度作为一个信息项，记录到用于描述所述目标报表组件之间的布局信息的数据串中。

在一可选实施方式中，所述获取模块在获取所述目标报表组件的x轴偏移量、y轴偏移量、宽度和高度时，具体用于：

探测所述xy坐标体系中被所述目标报表组件覆盖的方格组；

获取所述方格组中首个被探测到的方格的坐标值，分别作为所述目标报表组件的x轴偏移量和y轴偏移量；

获取所述方格组的宽度和高度，作为所述目标报表组件的宽度和高度。

在一可选实施方式中，所述装置还包括：

转换模块，用于将所述数据串转成HTML格式的布局描述文档；

存储模块，用于存储所述HTML格式的布局描述文档。

在一可选实施方式中，所述转换模块具体用于：

根据所述数据串中各信息项中的x轴偏移量和y轴偏移量，创建与所述xy坐标体系对应的HTML表格；

在所述HTML表格中，还原所述数据串中各信息项对应的目标报表组件的位置和大小，以得到所述HTML格式的布局描述文档。

在一可选实施方式中，所述转换模块在创建与所述xy坐标体系对应的HTML表格时，具体用于：

从所述数据串中各信息项中的x轴偏移量和y轴偏移量中，获取x轴最大偏移量xMax和y轴最大偏移量yMax；

创建包含yMax行、每行包含xMax个单元格的HTML表格。

在一可选实施方式中，所述转换模块在所述HTML表格中，还原所述数据串中各信息项对应的目标报表组件的位置和大小时，具体用于：

对所述数据串中的每个信息项，根据所述信息项中的x轴偏移量和y轴偏移量，确定所述信息项对应的目标报表组件在所述HTML表格中对应的定位单元格；

根据所述信息项中的宽度和高度，确定所述信息项对应的目标报表组件在所述HTML表格中对应的其它单元格；

将所述信息项对应的目标报表组件在所述HTML表格中对应的其它单元格合并至所述定位单元格；

在处理所有信息项后，删除所述HTML表格中的非定位单元格，以得到所述HTML格式的布局描述文档。

在一可选实施方式中，所述转换模块在创建与所述xy坐标体系对应的HTML表格时，具体用于：

从所述数据串中各信息项中的x轴偏移量和y轴偏移量中，获取x轴最大偏移量xMax和y轴最大偏移量yMax；

创建包含yMax+1行、每行包含xMax+1个单元格的HTML表格；

锁定所述HTML表格中第一行和第一列中单元格的样式。

在一可选实施方式中，所述转换模块在所述HTML表格中，还原所述数据串中各信息项对应的目标报表组件的位置和大小时，具体用于：

对所述数据串中的每个信息项，根据所述信息项中的x轴偏移量+1和y轴偏移量+1，确定所述信息项对应的目标报表组件在所述HTML表格中对应的定位单元格；

根据所述信息项中的宽度和高度，确定所述信息项对应的目标报表组件在所述HTML表格中对应的其它单元格；

将所述信息项对应的目标报表组件在所述HTML表格中对应的其它单元格合并至所述定位单元格；

在处理所有信息项后，删除所述HTML表格中的非定位单元格，以得到所述HTML格式的布局描述文档。

在一可选实施方式中，所述装置还包括：

设置模块，用于在删除所述HTML表格中的非定位单元格之后，设置所述第一行的高度和所述第一列的宽度分别为隐藏临界值，以隐藏所述第一行和所述第一列。

本申请实施例还公开一种电子设备，包括：一个或多个存储器和一个或多个处理器；所述一个或多个存储器存储有一条或多条计算机指令，所述一条或多条计算机指令在被所述一个或多个处理器执行时实现上述任一项方法实施例中的步骤。

本申请实施例还公开一种存储有计算机程序的计算机存储介质，所述计算机程序被执行时实现上述任一项方法实施例中的步骤。

在本申请实施例中，向用户提供图形化界面，图形化界面上包括可拖动的报表组件以及布局面板，用户可以拖动报表组件到布局面板上进行组件布局，可以方便、灵活地配置多样性的组件布局；另外，通过创建与布局面板适配的m*n的xy坐标体系，基于xy坐标体系可以获取布局面板上的目标报表组件之间的布局信息。由此可见，本申请实施例在支持简单、灵活、友好地配置多样性组件布局的基础上，解决了报表组件之间的布局信息的获取问题。

附图说明

此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1a为本申请一实施例提供的报表组件布局信息处理方法的流程示意图；

图1b为本申请一实施例提供的用户在布局面板上配置的一种组件布局的示意图；

图2a为本申请一实施例构建的与布局面板适配的xy坐标体系的示意图；

图2b为本申请一实施例提供的布设有目标报表组件的布局面板的示意图；

图3a为本申请另一实施例提供的用户拖拽的目标报表组件在布局面板中的示意图；

图3b为本申请另一实施例提供的调整后的目标报表组件在布局面板中的示意图；

图3c为本申请又一实施例提供的用户拖拽的目标报表组件在布局面板中的示意图；

图3d为本申请又一实施例提供的对目标报表组件的顶点和布局面板中方格的顶点进行标注的示意图；

图4为本申请又一实施例提供的数据报表布局信息处理方法的流程示意图；

图5a为本申请又一实施例提供的基于CSS实现的组件布局的一种展示效果示意图；

图5b为本申请又一实施例提供的基于CSS实现的组件布局的另一种展示效果示意图；

图6a为本申请又一实施例提供的初始创建的HTML表格的示意图；

图6b为本申请又一实施例提供的删除多余td之后得到的HTML表格的示意图；

图6c为本申请又一实施例提供的基于HTML表格重现报表组件之间的布局的示意图；

图7a为本申请又一实施例提供的初始创建的HTML表格的示意图；

图7b为本申请又一实施例提供的删除多余td之后得到的HTML表格的示意图；

图7c为本申请又一实施例提供的基于HTML表格重现图2b所示组件布局的一种效果示意图；

图7d为本申请又一实施例提供的基于HTML表格重现图2b所示组件布局的另一种效果示意图；

图7e为本申请又一实施例提供的基于图7d所示组件布局实现的数据报表的示意图；

图8为本申请又一实施例提供的报表组件布局信息处理装置的结构示意图；

图9为本申请又一实施例提供的报表组件布局信息处理装置的结构示意图。

具体实施方式

为使本申请的目的、技术方案和优点更加清楚，下面将结合本申请具体实施例及相应的附图对本申请技术方案进行清楚、完整地描述。显然，所描述的实施例仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

在实际应用中，很多场景都要用到数据报表。数据报表主要是用表格和图形等可视化组件来直观的展示数据。数据报表的类型和样式繁多，常见的有财务数据报表、销售数据报表、运营数据报表等。在一些场景中，数据报表主要供数据报表提供方自己使用。在另一些场景中，数据报表主要供数据报表需求方使用，在这种场景中，数据提供方可以按照预先约定好的数据内容和报表布局，生成数据报表并发送给数据报表需求方。

无论数据报表是供数据报表提供方自己使用还是供数据报表需求方使用，也无论是什么类型的数据报表，都面临生成数据报表的问题。生成数据报表离不开报表组件之间的布局信息，这就涉及配置报表组件之间的布局以及获取报表组件之间的布局信息的问题。本申请以下实施例提供了报表组件布局信息处理方法，用以在支持简单、灵活、友好地配置多样性组件布局的基础上，解决报表组件之间的布局信息的获取问题，从而为数据报表的生成步骤提供数据支持。

图1a为本申请一实施例提供的报表组件布局信息处理方法的流程示意图。如图1a所示，所述方法包括：

101、展示图形化界面，所述图形化界面包括可拖动的报表组件和布局面板，以供用户在布局面板上布设目标报表组件。

102、创建与布局面板适配的m*n的xy坐标体系，m为布局面板在x轴上占据的单位刻度的个数，n为布局面板在y轴上占据的单位刻度的个数，m、n为自然数。

103、响应于用户提交报表组件布局的操作，基于上述xy坐标体系，获取目标报表组件之间的布局信息。

在本实施例中，在生成数据报表时，向用户展示图形化界面，该图形化界面包括可拖动的报表组件和布局面板。报表组件包括但不限于：图形和表格；图形可以是折线图、扇形图、柱状图等。这些报表组件是数据内容在数据报表中的表现形式。布局面板是图形化界面中的部分区域，用于供用户布设报表组件。这里的图形化界面实际上是向用户提供的可视化的前端界面，用以供用户布设所需的报表组件以及报表组件之间的布局信息。

值得说明的是，本实施例并不限定图形化界面的实现形式，凡是能够包含可拖动的报表组件和布局面板的界面样式均适用于本申请实施例。

基于步骤101展示的图形化界面，用户可以从图形化界面上可拖动的报表组件中选择自己需要的报表组件，并可按照自己的报表布局需求将自己所需的报表组件拖动到布局面板中合适的位置。为便于描述和区分，将用户拖动到布局面板中的报表组件称为目标报表组件。目标报表组件也就是用户生成数据报表需要的报表组件。对报表组件布局信息处理装置(后续简称为布局信息处理装置)来说，可响应于用户对报表组件的拖拽操作，确定用户拖拽至布局面板上的报表组件，作为目标报表组件。

可选地，用户在将目标报表组件拖动至布局面板之后，还允许用户对拖动到布局面板上的目标报表组件进行各种配置操作。例如，用户在将目标报表组件拖动至布局面板之后，可以进一步配置目标报表组件的关联信息，简称为组件编辑操作。所述目标报表组件的关联信息主要是指与目标报表组件相关的信息，例如可以包括目标报表组件需要展示的数据内容的信息，也可以包括目标报表组件展示数据内容所需的样式信息等。其中，目标报表组件需要展示的数据内容的信息可以是数据内容本身，也可以是数据内容的链接地址，还可以是用于获取数据内容的数据查询语句等。又例如，用户在将目标报表组件拖动至布局面板之后，可以进一步调整目标报表组件的位置和/或大小，即调整目标报表组件之间的布局，简称为布局调整操作。其中，用户可以根据自己的布局需求，灵活调整目标报表组件的位置和/或大小。对布局信息处理装置来说，可响应于用户的布局调整操作，调整目标报表组件之间的布局。

在实际实施时，可以是用户每拖拽一个目标报表组件到布局面板，就编辑该目标报表组件的关联信息，这样编辑完多个目标报表组件后，再编辑目标报表组件之间的布局；或者，也可以是一次性拖拽多个目标报表组件到布局面板，接着编辑目标报表组件之间的布局，再逐一进行编辑目标报表组件的关联信息。

值得说明的是，本实施例重点关注与报表组件之间的布局相关的配置操作，其它配置操作不做重点说明。

可选地，用户在编辑目标报表组件之间的布局时，可以通过拖动目标报表组件，以改变目标报表组件的位置；通过对目标报表组件进行缩放，以改变目标报表组件的大小。对布局信息处理装置来说，可响应于用户对目标报表组件的拖动和/或缩放操作，调整目标报表组件的位置和/或大小。或者，

可选地，用户在编辑目标报表组件之间的布局时，可以通过配置界面，修改目标报表组件的位置坐标，以改变目标报表组件的位置；通过配置界面，修改目标报表组件的高宽参数或缩放比例，以改变目标报表组件的大小。

如图1b所示，是用户在布局面板上配置的一种组件布局的示意图。在图1b所述组件布局中，第一排的左侧和右侧分别布设有行迭代器组件(table-rows-iterator)和行聚合器组件(table-rows-aggregator)；第二排布设一个折线图(chart-builder：line)；第三排从左至右依次布设三个扇形图(chart-builder：pie)。图1b所示的行迭代器组件、行聚合器组件、折线图、扇形图等都是数据报表中的可视化组件。

从布局信息处理装置的角度来看，需要获取用户布设到布局面板上的目标报表组件之间的布局信息。目标报表组件之间的布局信息主要是指目标报表组件之间的相对位置关系，具体可通过目标报表组件在布局面板上的位置以及目标报表组件的大小来体现。基于此，为了获得目标报表组件之间的布局信息，布局信息处理装置创建与布局面板适配的m*n的xy坐标体系，m为布局面板在x轴上占据的单位刻度的个数，n为布局面板在y轴上占据的单位刻度的个数，m、n为自然数；实际上m和n代表了布局面板在x轴和y轴上的长度。通过xy坐标体系可以以单位刻度为精度刻画布局面板任一点的坐标，这为确定布局面板上的目标报表组件在布局面板中的位置和目标报表组件的大小提供了依据。之后，在用户提交报表组件布局时，可以基于xy坐标体系确定目标报表组件在布局面板中的位置以及目标报表组件的大小，进而获得目标报表组件之间的布局信息。

值得说明的是，本实施例可不限定创建xy坐标体系与用户在布局面板上布设目标报表组件的先后顺序。优选地，可以在展示图形化界面时，创建与布局面板适配的m*n的xy坐标体系，之后用户在具有xy坐标体系的布局面板上布设目标报表组件以及调整目标报表组件之间的布局，进而基于xy坐标体系获得目标报表组件之间的布局信息。当然，也可以在用户在布局面板上布设目标报表组件之后，再创建与布局面板适配的m*n的xy坐标体系，进而基于xy坐标体系获得目标报表组件之间的布局信息。

进一步，在获得目标报表组件之间的布局信息之后，可根据目标报表组件之间的布局信息，生成报表描述文件，进而根据报表描述文件，生成数据报表。报表描述文件是指描述数据报表的文件，该文件不仅可以体现数据报表的布局，而且可以指向数据报表所需的数据内容。报表描述文件可以采用不同的编程语言实现。例如，报表描述文件可以是采用java语言实现的文件、采用c#语言实现的文件、采用c语言实现的文件或者是采用HTML语言实现的文件。值得说明的是，目标报表组件之间的布局信息并不是生成数据报表所需的唯一数据，例如还需要目标报表组件的关联信息等。对于如何基于目标报表组件之间的布局信息生成数据报表的过程本申请实施例不做详述。

由上述可见，在本实施例中，向用户提供图形化界面，图形化界面上包括可拖动的报表组件以及布局面板，用户可以拖动报表组件到布局面板上进行组件布局，可以方便、灵活地配置多样性的组件布局；另外，通过创建与布局面板适配的m*n的xy坐标体系，基于xy坐标体系可以获取布局面板上的目标报表组件之间的布局信息。由此可见，本申请实施例在支持简单、灵活、友好地配置多样性组件布局的基础上，解决了报表组件之间的布局信息的获取问题。

在上述实施例或下述实施例中，需要创建与布局面板适配的m*n的xy坐标体系。m和n分别是布局面板在x轴和y轴上占据的单位刻度的个数。单位刻度不同，基于xy坐标体系描述目标报表组件之间的布局信息时的描述信息也会有所不同。在本实施方式中，考虑到不同显示器的分辨率不一样，不同用户的使用习惯也不一样，例如有的用户习惯使用600*800的分辨率，有的用户习惯使用1024*768的分辨率，有的用户习惯使用1920*1080的分辨率等，因此并未以固定数量的像素点定义单位刻度。在本实施例中，以用户使用页面或面板时比较普遍的使用习惯为依据，即宽度是固定的，高度是自动的，换句话说，宽度不可跟随内容的多少而自动增减，但高度可跟随内容多少的而自动增减，因此，以布局面板的宽度作为标准来定义单位刻度，进而创建xy坐标体系。以布局面板的宽度作为标准来创建xy坐标体系的过程如下：

确定布局面板的宽度方向和高度方向分别为xy坐标体系中的x轴和y轴；将布局面板的宽度与宽度方向上指定的列数k的比值，作为xy坐标体系中的单位刻度的取值，其中，m＝k；标记xy坐标体系中的m*n个方格，n＝布局面板的高度/单位刻度的取值；为m*n个方格分别赋予坐标值。

举例说明，假设k＝10，则可构建图2a所示的xy坐标体系。在图2a中，布局面板的的宽度方向为x轴，布局面板的高度方向为y轴；在x轴方向包含10列，y轴方向包含3行。为便于用户直观地理解本申请实施例中的xy坐标体系，在图2a中用网格线示出了xy坐标体系中的方格以及方格的坐标值。

在上述操作中，布局面板在x轴上占据的单位刻度的个数k实际上也就是x轴方向上的列数，相应地，布局面板在y轴方向上占据的单位刻度的个数实际上也就是y轴方向上的行数。其中，x轴方向上的列和y轴方向上的行结合起来可以将xy坐标体系划分为多个方格，这些方格可以映射到布局面板上，进而为这些方格赋予坐标值，就可以以单位刻度为精度刻画布局面板中任一点的坐标。

经上述操作，可以创建列数固定但行数不固定的xy坐标体系，行数不固定，具体可由y轴方向上目标组件的多少决定。当发现用户布设的目标报表组件在y轴方向上占据的行数超过了当前y轴方向上的行数，则可以自动在y轴方向上增加新的行数，相应地，在图形化界面上，可以在y轴方向上添加滚动条，通过监测滚动事件，使得用户可以下拉查看y轴方向上超出界面的部分。

其中，通过调节布局面板在宽度方向上的列数或者x轴方向上的列数，可以灵活调整布局信息的精度。

基于上述xy坐标体系，可以确定用户拖拽到布局面板上的目标报表组件的坐标和大小。如图2b所示为一种布设有目标报表组件的布局面板的示意图。为便于理解与布局面板适配的xy坐标体系，在图2b中示出了xy坐标体系的坐标轴以及xy坐标体系中的方格及其坐标值，实际上可以显示也可以不显示。图2b中，不同的灰色区域表示不同的目标报表组件。

如图2b所示，对m*n个方格中的每个方格来说，都有四个顶点，每个顶点都有一个坐标值，可基于xy坐标体系可以识别出每个顶点的坐标值。其中，每个方格来说，其坐标可以用该方格上四个顶点中某个顶点的坐标值来表示。值得说明的是，从一个方格的角度来说，可以使用四个顶点中任一顶点的坐标来表示方格的坐标值，但是从不同方格的角度来说，需要使用四个顶点中相同顶点的坐标值。

基于上述分析，一种为m*n个方格分别赋予坐标值的方式包括：对m*n个方格中的每个方格，基于xy坐标体系识别方格上四个顶点的坐标值；从方格上四个顶点中，选择最小坐标值对应的顶点作为方格的坐标顶点，坐标顶点的坐标值为方格的坐标值。其中，这里的最小坐标值是指x轴坐标和y轴坐标都是最小的坐标值。

在本申请实施例中，在基于xy坐标体系获取目标报表组件之间的布局信息的过程中，基于xy坐标体系定义的目标报表组件在布局面板中的位置和大小越规整越好，有利于减少计算量，有利于实现布局信息的数字化，有利于布局信息的存储。但是，用户在布局面板上布设目标报表组件时具有一定的随意性，而且用户无法准确识别目标报表组件在布局面板中的位置与xy坐标体系中方格的对应关系。基于此，在用户在布局面板上布设目标报表组件的过程中，可以根据目标报表组件对xy坐标体系中方格的覆盖情况，调整目标报表组件在布局面板中的位置和/或大小。调整的目的主要是使得定义出的每个目标报表组件在布局面板中的位置和大小都比较规整，便于数字化。

一种根据目标报表组件对xy坐标体系中方格的覆盖情况，调整目标报表组件在布局面板中的位置和/或大小的可选实施方式为：以移动距离最小为目标，对目标报表组件进行拖动和/或缩放，使得目标报表组件位于q个相邻的方格内，q为自然数。经过这种调整方式，目标报表组件的大小可以通过x轴方向上的整数个方格以及y轴方向上的整数个方格来表示，相当于对目标报表组件的位置和大小进行标准化处理。

举例说明，如图3a所示，为用户拖拽到布局面板中的目标报表组件，该目标报表组件在布局面板中的位置以及目标报表组件的大小都不规整，不利于以数字化方式进行描述。于是，采用上述实施方式对目标报表组件进行拖动和缩放，从而将目标报表组件调整至图3b所示的位置。在图3b中，目标报表组件占据4个方格，其坐标为(8，2)，高度为2个单位刻度，宽度为2个单位刻度，可以以数字化方式描述目标报表组件的位置和大小。在图3b中，为便于图示和说明，在目标报表组件与xy坐标体系的方格之间留有一定空隙，实际上可以有空隙也可以没有空隙。在没有空隙的情况下，即要求目标报表组件对q个方格的覆盖面积为100％。在图3a和图3b中，中间的灰色区域表示目标报表组件。

进一步，上述以移动距离最小为目标，对目标报表组件进行拖动和/或缩放，使得目标报表组件位于q个相邻的方格内的一种详细实施方式包括：

根据目标报表组件上四个顶点的坐标值以及被目标组件覆盖到的各方格的坐标值，识别出目标报表组件上四个顶点所在的边缘方格；

根据目标报表组件上四个顶点在屏幕上的像素坐标以及各自所在边缘方格的顶点在屏幕上的像素坐标，计算目标报表组件上四个顶点与各自所在边缘方格之间的距离比；

从目标报表组件上四个顶点所在边缘方格中，确定距离比最小的目标方格顶点；

移动或缩放目标报表组件，以使得目标报表组件上位于所述目标方格顶点所在方格内的顶点位于所述目标方格顶点附近。

例如，对上述识别边缘方格的步骤可以包括以下：

将目标报表组件上四个顶点的坐标值转换为在屏幕上的像素坐标。以图3c中目标报表组件的四个顶点为例，各顶点的像素坐标为：左上角：x＝330px、y＝30px；右上角：x＝530px、y＝30px；左下角：x＝330px、y＝240px；右下角：x＝530px、y＝240px。这里的x是指距离布局面板左上角的横向距离，y是指距离布局面板左上角的纵向距离，其实还是左上角那个顶点，只不过这里用像素点来表示而已。

同理，将布局面板中各方格的坐标顶点的坐标值也转换为在屏幕上的像素坐标。以图3c所示布局面板中坐标顶点(3，2)表示的方格为例，其四个顶点的像素坐标为：左上角：x＝300px、y＝200px；右上角：x＝400px、y＝200px；左下角：x＝300px、y＝300px；右下角：x＝400px、y＝300px。

根据上述目标报表组件上四个顶点的像素坐标以及布局面板中各方格的坐标顶点的像素坐标，可以识别出被目标报表组件完全覆盖的方格以及未被目标报表组件完全覆盖的方格。

其中，可以通过下面四个条件，来识别被目标报表组件完全覆盖的方格：

条件一：方格的左上角顶点(如图3d中的字母a所示)的像素坐标中的x和y值，分别要大于目标报表组件的左上角顶点(如图3d中的字母A所示)的像素坐标中的x和y值；

条件二：方格的右上角顶点(如图3d中的字母b所示)的像素坐标中的x值，要小于目标报表组件的右上角顶点(如图3d中的字母B所示)的像素坐标中的x值；同时方格的右上角顶点的像素坐标中的y值，要大于目标报表组件的右上角顶点的像素坐标中的y值；

条件三：方格的左下角顶点(如图3d中的字母c所示)的像素坐标中的x值，要大于目标报表组件的左下角顶点(如图3d中的字母C所示)的像素坐标中的x值；同时方格的左下角顶点的像素坐标中的y值，要小于目标报表组件的左下角顶点的像素坐标中的y值；

条件四：方格的右下角顶点(如图3d中的字母d所示)的像素坐标中的x和y值，要分别小于目标报表组件的右下角顶点(如图3d中的字母D所示)的像素坐标中的x和y值。

从所有被目标报表组件覆盖的方格中，去除被目标报表组件完全覆盖的方格，就可以得到被目标报表组件部分覆盖的方格。

进一步，可以从被目标报表组件部分覆盖的方格中，识别出目标报表组件上四个顶点所在的方格，称为边缘方格。

其中，可以通过下面四个条件，来识别目标报表组件上四个顶点所在的边缘方格：

条件一：当前方格的左上角顶点的像素坐标中的x和y值，分别要小于目标报表组件的左上角顶点的像素坐标中的x和y值；

条件二：当前方格的右上角顶点的像素坐标中的x值，要大于目标报表组件的右上角顶点的像素坐标中的x值；同时，当前方格的右上角顶点的像素坐标中的y值，要小于目标报表组件的右上角顶点的像素坐标中的x值；

条件三：当前方格的左下角顶点的像素坐标中的x值，要小于目标报表组件的左下角顶点的像素坐标中的x值；同时，当前方格的左下角顶点的像素坐标中的y值，要大于目标报表组件的左下角顶点的像素坐标中的y值；

条件四：当前方格的右下角顶点的像素坐标中的x和y值，要分别大于目标报表组件的右下角顶点的像素坐标中的x和y值。

基于上述目标报表组件上四个顶点的像素坐标以及四个顶点各自所在的边缘方格的坐标顶点的像素坐标，可以计算四个顶点与各自所在边缘方格之间的距离比。

可选地，对目标报表组件上的每个顶点来说，上述距离比可以包括该顶点到该顶点所在边缘方格四个边的距离比。例如：

顶点A距离其所在边缘方格的左侧边的比例＝|A.x-h.x|/单位刻度，值记为left；

顶点A距离其所在边缘方格的上侧边的比例＝|A.y-h.y|/单位刻度，值记为top；

顶点A距离其所在边缘方格的右侧边的比例＝|A.x-i.x|/单位刻度，值记为right；

顶点A距离其所在边缘方格的下侧边的比例＝|A.y-j.y|/单位刻度，值记为bottom；

在上述计算公式中，A.x表示顶点A的像素坐标中的x值；A.y表示顶点A的像素坐标中的y值；h.x表示边缘方格的左上角顶点的像素坐标中的x值；h.y表示边缘方格的左上角顶点的像素坐标中的y值；i.x表示边缘方格的右上角顶点的像素坐标中的x值；j.y表示边缘方格的左下角顶点的像素坐标中的y值。

假设单位刻度＝100px，则如图3b中目标报表组件上左上角的顶点A，可计算出其对应的left＝0.2、top＝0.2、right＝0.8、bottom＝0.8。

在上述四个距离比中，可以找出left和right中的最小值，top和bottom中的最小值，进而确定目标方格顶点。进而可以移动或缩放目标报表组件，以使得目标报表组件上位于目标方格顶点所在方格内的顶点位于目标方格顶点附近。所述附近可以根据应用需求适应性设置，例如可以设定一个距离范围，则位于该距离范围之内都属于目标方格顶点附近。

通过上面构建xy坐标体系和对目标报表组件的位置和大小进行标准化控制，用户可以很方便地在布局面板上拖拽出整整齐齐的组件布局，有利于以数字化方式描述报表组件之间的布局信息，不仅可以提高获取布局信息的效率，而且可以简化编程人员基于布局信息编写生成数据报表时所需的底层代码的过程，有利于提高数据报表的生成效率。

在上述实施例或下述实施例中，在用户提交报表组件布局的操作时，可基于xy坐标体系，获取目标报表组件之间的布局信息。可选地，可以通过目标报表组件在布局面板中的位置以及目标报表组件的大小来体现目标报表组件之间的布局。其中，目标报表组件在布局面板中的位置可通过xy坐标体系来定义。基于此，一种基于xy坐标体系，获取目标报表组件之间的布局信息的实施方式包括：基于xy坐标体系，获取目标报表组件的x轴偏移量、y轴偏移量、宽度和高度；将目标报表组件的x轴偏移量、y轴偏移量、宽度和高度作为一个信息项，记录到用于描述目标报表组件之间的布局信息的数据串中。例如，每个目标报表组件可以采用以下格式的信息项：{x轴偏移量：具体数值，y轴偏移量：具体数值，宽度：具体数值，高度：具体数值}。进一步，将信息项转换为英文表达方式为：{x：value，y：value，width：value，height：value}。

以图2b所示组件布局为例，从左到右，从上到下，各目标报表组件对应的信息项依次为：{x：0，y：0，width：3，height：2}，{x：3，y：0，width：3，height：2}，{x：0，y：2，width：6，height：1}，{x：0，y：3，width：2，height：2}，{x：2，y：3，width：2，height：2}，{x：4，y：3，width：2，height：2}。相应的，将各目标报表组件的信息项依次记录到用于描述目标报表组件之间的布局信息的数据串中，可以得到如下信息串：[{x：0，y：0，width：3，height：2}，{x：3，y：0，width：3，height：2}，{x：0，y：2，width：6，height：1}，{x：0，y：3，width：2，height：2}，{x：2，y：3，width：2，height：2}，{x：4，y：3，width：2，height：2}]。

在一种实施方式中，可以依次探测xy坐标体系中被目标报表组件覆盖的方格组；这里的方格组包括一个方格或至少两个相邻的方格。之后，获取方格组中首个被探测到的方格的坐标值，分别作为目标报表组件的x轴偏移量和y轴偏移量；接着，获取方格组的宽度和高度，作为目标报表组件的宽度和高度。方格组的宽度是指方格组在x轴方向上包含的方格个数，方格组的高度是指方格组在y轴方向上包含的方格个数。例如，可以按照从上到下、从左到右的次序，依次探测xy坐标体系中的每一个方格，去发现该方格上面是否有报表组件(即是否被报表组件覆盖)，如果有，那么该组件的坐标就是该方格的坐标，也就确定了该组件的x轴偏移量和y轴偏移量；进而探测被该组件覆盖的方格组。

基于上述，将基于xy坐标体系，将目标报表组件之间的布局信息转化成了包含一个个信息项的数字串。可选地，这里的数字串可以采用但不限于：Json格式。基于所述数字串，可以持久化存储目标报表组件之间的布局信息，为生成数据报表提供数据支持。

图4为本申请又一实施例提供的数据报表布局信息处理方法的流程示意图。如图4所示，所述方法包括：

401、展示图形化界面，所述图形化界面包括可拖动的报表组件和布局面板，以供用户在布局面板上布设目标报表组件。

402、创建与布局面板适配的m*n的xy坐标体系，m为布局面板在x轴上占据的单位刻度的个数，n为布局面板在y轴上占据的单位刻度的个数，m、n为自然数。

403、基于xy坐标体系，获取目标报表组件的x轴偏移量、y轴偏移量、宽度和高度。

404、将目标报表组件的x轴偏移量、y轴偏移量、宽度和高度作为一个信息项，记录到用于描述目标报表组件之间的布局信息的数据串中。

405、将数据串转成HTML格式的布局描述文档。

406、存储HTML格式的布局描述文档。

关于步骤401-404，可参见前述方法实施例中的相应描述，在此不再赘述。

在本本实施例中，在得到用于描述目标报表组件之间的布局信息的数据串之后，将数据串转换成HTML格式的布局描述文档，进而存储HTML格式的布局描述文档。其中，HTML格式的布局描述文档是指以HTML语言描述的目标报表组件之间的布局信息的文档。存储HTML格式的布局描述文档相当于存储目标报表组件之间的布局信息。

可选地，可以将HTML格式的布局描述文档存储在本地，或者存储于结构化数据库中，例如mysql等。

进一步，基于存储的HTML格式的布局描述文档，可以生成数据报表。

其中，对于HTML/CSS技术来说，实现布局信息的方法有很多种。例如，可以是纯HTML的表格布局方法，基于CSS的浮动、定位等布局形式方法。在本申请实施例中，通过CSS负责样式控制，通过HTML负责布局控制，所以下面会重点讨论如何将数据串转成HTML格式的布局描述文档。

在讨论如何将数据串转成HTML格式的布局描述文档之前，简单分析一下选择通过CSS负责样式控制，通过HTML负责布局控制的理由：

第一，通过CSS负责布局控制，有些浏览器或邮箱对布局的兼容性不好。例如，假设通过CSS在页面上摆放了五个div，并且设置了他们的宽度、高度、颜色，以及浮动float：left属性。在浏览器中直接查看或者有些邮件客户端如foxmail、outlook中呈现，其效果如图5a所示。但是，在一些网页版邮箱中呈现，其效果如图5b所示。可见，通过CSS负责布局控制，存在兼容性不好的缺陷，但通过HTML负责布局控制，一切浏览器或邮箱对布局都是很兼容的。

第二，在之前创建xy坐标体系，使得可以通过数字串传输x、y、width、height这四个参数来描述的一个个报表组件，这个描述是严格基于xy坐标体系的。如果基于CSS浮动和定位做布局控制，从数字串到CSS的浮动和定位之间的转换比较困难。如果基于HTML表格布局，可以直接将xy坐标体系映射为HTML表格，实现相对简单。

综合以上两点原因，考虑到纯HTML的表格布局方法具有优良的兼容性，并且可以完美契合了前面创建的xy坐标体系，因此选择通过HTML负责布局控制。

接下来，重点讨论如何将数据串转成HTML格式的布局描述文档。

本申请实施例提供一种将数据串转成HTML格式的布局描述文档的方法，其主要过程包括：根据数据串中各信息项中的x轴偏移量和y轴偏移量，创建与xy坐标体系对应的HTML表格；在HTML表格中，还原数据串中各信息项对应的目标报表组件的位置和大小，以得到HTML格式的布局描述文档。

基于上述实施方式，一种将数据串转成HTML格式的布局描述文档的方法主要包括：

首先，从数据串中各信息项中的x轴偏移量和y轴偏移量中，获取x轴最大偏移量xMax和y轴最大偏移量yMax。例如，可以遍历数据串中各信息项，进而从各信息项中的x轴偏移量中，获取x轴最大偏移量xMax，并从各信息项中的y轴偏移量中，获取y轴最大偏移量yMax。

在本实施例中，HTML表格与xy坐标体系之间具有对应关系，xy坐标体系中的方格对应于HTML表格中的单元格。但是，数据串中各信息项仅包含目标报表组件的x、y、width、height四个参数，从这四个参数并不能直接得出数据串中包含的所有目标报表组件一共占用了多少个方格，因此并不清楚需要构建包含多少单元格的HTML表格。而目标报表组件在xy坐标体系中x轴方向上的最大偏移量和y轴方向上的最大偏移量，即xMax和yMax可以表示HTML表格的最大范围。

可选地，可以求每个信息项中的x+width和y+height，然后从所有x+width中选择最大值，即为xMax，从所有y+height中选择最大值，即为yMax。

其中，上述xMax和yMax的操作对应的代码实现如下：

然后，创建包含yMax行(tr)、每行包含xMax个单元格(td)的HTML表格，即根据x轴最大偏移量xMax和y轴最大偏移量yMax制作HTML表格的布局框架。

通过生成yMax个tr，每个tr里生成xMax个td，可以将原来的前端图形化界面上的xy坐标体系还原为HTML表格(table)。以图2b所示组件布局，可以生成如图6a所示的HTML表格。其中，table、tr、td是HTML的国际标准元素。table定义一个表格，tr定义一个表格的行，td定义一个表格行里面的一个单元格，三者是嵌套关系。

其中，上述生成yMax个tr，每个tr里生成xMax个td的操作对应的代码实现如下：

接着，对数据串中的每个信息项，根据所述信息项中的x轴偏移量和y轴偏移量，确定所述信息项对应的目标报表组件在所述HTML表格中对应的定位单元格，根据所述信息项中的宽度和高度，确定所述信息项对应的目标报表组件在所述HTML表格中对应的其它单元格；将所述信息项对应的目标报表组件在所述HTML表格中对应的其它单元格合并至所述定位单元格。

上述操作的主要目的是在HTML表格中还原信息项中描述的目标报表组件的位置和大小。信息项中的x、y负责还原目标报表组件的位置，信息项中的width和height负责还原目标报表组件的大小。

其中，通过信息项中的x和y在HTML表格中定位到一个单元格，简称为定位单元格。可选地，可以采用java技术中一个名称为jsoup的工具包，基于信息项中的x和y定位HTML表格中的单元格。关于如何使用jsoup的工具包在HTML表格中定位单元格，在此不做详述。定位单元格的位置就是x和y表示的目标报表组件在HTML表格中的位置，对定位单元格进行标记，以区分于其它单元格。例如，可以给定位单元格添加一个属性，记为lock属性；并设置该属性的取值为真，即lock＝true，用来表示该单元格上有目标报表组件(即已被锁定了)。按照同样的操作，遍历数据串中所有的信息项，可以确定每个信息项表示的目标报表组件在HTML表格中对应的定位单元格，并且对定位单元格进行标记。

其中，通过width和height对HTML表格中的单元格进行合并处理，以实现还原目标报表组件的大小的目的。在HTML表格里面，可以使用rowspan和colspan参数来合并单元格。其中，rowspan参数表示同一列的多行合并，colspan参数表示同一行的多列合并。

举例说明，以图6a中左上角第一个目标报表组件为例，它对应的信息项为{x：0，y：0，width：3，height：2}；对应于HTML表格中，第1个tr(因为y＝0，即第1行)里面的第1个td(因为x＝0，即第1列)会被赋予lock＝true属性被锁定；信息项中的width为3，意思是宽度为3，于是第1行上的三个td需要被合并，故赋值colspan＝3；信息项中的height为2，意思是高度为2，于是第1列上的两个td需要被合并，故赋值rowspan＝2，这就将其它单元格合并至第1个tr里面的第1个td里。对第1个tr里面的第1个td进行处理的代码实现可以为：<tdlock＝"true"rowspan＝"2"colspan＝"3"></td>。

经过上述操作，可以将数据串中各信息项对应的目标报表组件从xy坐标体系中还原至HTML表格中。

其中，上述定位、合并操作对应的代码实现如下：

最后，在处理所有信息项后，删除HTML表格中的非定位单元格，以得到HTML格式的布局描述文档。

考虑到所有目标报表组件已经映射到了HTML表格中，此时，HTML表格中未被占用的td要么是多余的要么已经被合并至定位单元格中，故需要将已经无存在价值的td删除。

以图6a所示HTML表格为例，在经过上述删除操作，删除多余的td之后，可以得到图6b所示的HTML表格。在图6b所示HTML表格中，已经完全还原出xy坐标体系中目标报表组件之间的布局。图6b中，占据一个或多个tr的方框表示目标报表组件。

进一步，在图6b所示HTML表格中，没有多余的td，但是仍旧存在多余的tr，即第二行的tr和第五行的tr，这是因为tr是td的载体，td可以删除，tr不能随意删除。

其中，上述删除操作对应的代码实现如下：

doc.select("td[lock！＝true]").remove()；

综合上面所有操作的代码实现，可以得到将数据串转成HTML格式的布局描述文档的完整代码，具体如下：

在上述实施例中，可以将xy坐标体系中目标报表组件之间的布局还原至HTML表格中，这种还原在浏览器中的展示效果如图6c所示。将图6a与图6c进行比较，可以发现这种还原是布局的基本还原，并未做到百分百的还原，即未考虑高度上的还原。为了能够从布局到高度，更加全面的将xy坐标体系中目标报表组件之间的布局基本还原至HTML表格中，本申请实施例提供了另一种将数据串转成HTML格式的布局描述文档的方法，主要包括：

首先，从数据串中各信息项中的x轴偏移量和y轴偏移量中，获取x轴最大偏移量xMax和y轴最大偏移量yMax。该操作可参见上述实施例中的描述，在此不再赘述。

其中，该操作对应的代码实现如下：

在上述代码实现中，预先执行了xMax+1和yMax+1的功能。

然后，创建包含yMax+1(这里的yMax+1实际上等于上述代码实现中的yMax)行、每行包含xMax+1(这里的xMax+1实际上等于上述代码实现中的xMax)个单元格的HTML表格，并锁定HTML表格中基准行和基准列中单元格的样式。

考虑到td是盛放内容的载体，tr用来盛放td，多余td被删除或合并后最终体现为一个td，导致在一定程度上缺乏严谨的比例关系。因此，可以通过控制td之间的比例关系来保证目标报表组件在高度上的还原。于是，在创建HTML表格时，多生成一行和一列的单元格，作为基准行和基准列，并锁定其样式，以保持高度不变。基准行和基准列中的单元格具有比例标尺的作用。

其中，基准行和基准列可以是HTML表格中的第一行和第一列；或者，也可以是HTML表格中的最后一行和最后一列，或者可以是HTML表格中的第一行和最后一列，或者是HTML表格中的第一列和最后一行。在本实施例中，以第一行和第一列作为基准行和基准列为了进行说明。

可选地，可以给第一行和第一列中的单元格添加一个属性，记为lock属性；并设置该属性的取值为真，即lock＝true，用来表示该单元格被锁定。

基于上述代码中xMax+＝1，yMax+＝1，上述创建、锁定操作对应的代码实现如下：

需要说明的是，上述代码中，0＝＝y表示是第一行的td，0＝＝x表示是第一列的td。如果0＝＝y，则将第一行的td锁定，并且加了一个class，用来标识是第一行是作为“比例标尺”的行。同理0＝＝x，则将第一列的td锁定，加列的样式标识。0＝＝x且0＝＝y代表是第一行和第一列的td，需要同时具备行的样式标识和列的样式标识。

以图2b所示组件布局为例，经过上述处理可以得到图7a所示HTML表格，如图7a所示，第一行和第一列的td就像锚点一样，维系着整个HTML表格的“稳定性”。

接着，对数据串中的每个信息项，根据所述信息项中的x轴偏移量+1和y轴偏移量+1，确定所述信息项对应的目标报表组件在所述HTML表格中对应的定位单元格；根据所述信息项中的宽度和高度，确定所述信息项对应的目标报表组件在所述HTML表格中对应的其它单元格；将所述信息项对应的目标报表组件在HTML表格中对应的其它单元格合并至所述定位单元格。

该操作与上述实施例中的操作类似，区别仅在于：信息项中的x轴偏移量和y轴偏移量需要各自+1，以将作为基准行和基准列的第一行和第一列排除掉。

上述定位、锁定操作对应的代码实现如下：

最后，在处理所有信息项后，删除HTML表格中的非定位单元格，以得到HTML格式的布局描述文档。

值得说明的是，因为第一行和第一列的单元格被锁定了，所以不会被删除。

以图7a所示HTML表格为例，经过上述操作，可以得到图7b所示HTML表格。如图7b所示，第一行和第一列的td未被删除，作为比例标尺，维系整个HTML表格的比例关系。图7b中，占据一个或多个tr的方框表示目标报表组件。

综合上述操作对应的代码实现，可以得到将数据串转成HTML格式的布局描述文档的完整代码，具体如下：

以图2b所示布局信息为例，基于上述代码实现的展示效果如图7c所示。在图7c中，目标报表组件之间的布局比较稳固，保持了原有的高度比例关系。当然，在图7c中，也显示有第一行和第一列的单元格。实际应用中，第一行和第一列的单元格可以不做显示。可选地，在删除HTML表格中的非定位单元格之后，可以通过设置第一行的高度和第一列的宽度分别为隐藏临界值，以隐藏第一行和第一列。隐藏临界值可以灵活设置，凡是可以隐藏第一行和第一列的数值都适用于本申请实施例。例如，隐藏临界值可以是1px。基于此，一种设置第一行的高度和第一列的宽度分别为隐藏临界值的代码实现如下：

相应地，以图7c为例，隐藏第一行和第一列之后的展示效果如图7d所示。在图7d中，不仅保留着目标报表组件之间的布局，同时保留了目标报表组件之间的高度比例，同时也没有多余的显示。

进一步，在图7d所示报表框架中填充具体数据之后，可以得到图7e所示的展示效果。本实施例仅关注图7e中组件之间的布局，并不关注具体数据。

综上可见，本申请实施例提供可视化的图形化界面，允许用户拖拽报表组件到布局面板中进行组织，提供方便、友好、灵活的布局配置方法。另外，本申请实施例支持布局面板的灵活组织，即在用户将报表组件拖拽至布局面板之后，还可以通过缩放和摆放灵活的调整组件布局。再者，本申请实施例通过建立与布局面板适配的xy坐标体系，解决了如何获取报表组件之间的布局信息的问题。进一步，本申请实施例支持将组件布局进行数字化，为持久化存储提供基础，进而将存储布局信息的数据串转换为HTML格式的布局描述文档，通过HTML格式的布局描述文档持久化存储，可以很好的兼容性。

需要说明的是，上述实施例所提供方法的各步骤的执行主体均可以是同一设备，或者，该方法也由不同设备作为执行主体。比如，步骤101至步骤103的执行主体可以为设备A；又比如，步骤101和102的执行主体可以为设备A，步骤103的执行主体可以为设备B；等等。

图8为本申请又一实施例提供的报表组件布局信息处理装置的结构示意图。如图8所示，所述装置包括：展示模块81、创建模块82和获取模块83。

展示模块81，用于展示图形化界面，图形化界面包括可拖动的报表组件和布局面板，以供用户在布局面板上布设目标报表组件。

创建模块82，用于创建与布局面板适配的m*n的xy坐标体系；m为布局面板在x轴上占据的单位刻度的个数，n为布局面板在y轴上占据的单位刻度的个数，m、n为自然数。

获取模块83，用于响应于用户提交报表组件布局的操作，基于xy坐标体系，获取目标报表组件之间的布局信息。

在一可选实施方式中，创建模块82具体用于：

确定布局面板的宽度方向和高度方向分别为xy坐标体系中的x轴和y轴；

将布局面板的宽度与宽度方向上指定的列数k的比值，作为xy坐标体系中的单位刻度的取值，其中，m＝k；

标记xy坐标体系中的m*n个方格，n＝布局面板的高度/单位刻度的取值；

为m*n个方格分别赋予坐标值。

在一可选实施方式中，创建模块82在为m*n个方格分别赋予坐标值时，具体用于：

对m*n个方格中的每个方格，基于xy坐标体系识别方格上四个顶点的坐标值；

从方格上四个顶点的坐标值中，选择最小坐标值作为方格的坐标值。

在一可选实施方式中，如图9所示，所述装置还包括：

调整模块84，用于在用户在布局面板上布设目标报表组件的过程中，根据目标报表组件对xy坐标体系中方格的覆盖情况，调整目标报表组件在布局面板中的位置和/或大小。

在一可选实施方式中，调整模块84具体用于：

以移动距离最小为目标，对目标报表组件进行拖动和/或缩放，使得目标报表组件位于q个相邻的方格内，且对q个相邻的方格的覆盖面积达到设定比值，q为自然数。

在一可选实施方式中，获取模块83具体用于：

基于xy坐标体系，获取目标报表组件的x轴偏移量、y轴偏移量、宽度和高度；

将目标报表组件的x轴偏移量、y轴偏移量、宽度和高度作为一个信息项，记录到用于描述目标报表组件之间的布局信息的数据串中。

在一可选实施方式中，获取模块83在获取目标报表组件的x轴偏移量、y轴偏移量、宽度和高度时，具体用于：

探测xy坐标体系中被目标报表组件覆盖的方格组；

获取方格组中首个被探测到的方格的坐标值，分别作为目标报表组件的x轴偏移量和y轴偏移量；

获取方格组的宽度和高度，作为目标报表组件的宽度和高度。

在一可选实施方式中，如图9所示，所述装置还包括：

转换模块85，用于将数据串转成HTML格式的布局描述文档。

存储模块86，用于存储HTML格式的布局描述文档。

在一可选实施方式中，转换模块85具体用于：

根据数据串中各信息项中的x轴偏移量和y轴偏移量，创建与xy坐标体系对应的HTML表格；

在HTML表格中，还原数据串中各信息项对应的目标报表组件的位置和大小，以得到HTML格式的布局描述文档。

在一可选实施方式中，转换模块85在创建与xy坐标体系对应的HTML表格时，具体用于：

从数据串中各信息项中的x轴偏移量和y轴偏移量中，获取x轴最大偏移量xMax和y轴最大偏移量yMax；

创建包含yMax行、每行包含xMax个单元格的HTML表格。

在一可选实施方式中，转换模块85在HTML表格中，还原数据串中各信息项对应的目标报表组件的位置和大小时，具体用于：

对数据串中的每个信息项，根据信息项中的x轴偏移量和y轴偏移量，确定信息项对应的目标报表组件在HTML表格中对应的定位单元格；

根据信息项中的宽度和高度，确定信息项对应的目标报表组件在HTML表格中对应的其它单元格；

将信息项对应的目标报表组件在HTML表格中对应的其它单元格合并至定位单元格；

在处理所有信息项后，删除HTML表格中的非定位单元格，以得到HTML格式的布局描述文档。

在一可选实施方式中，转换模块85在创建与xy坐标体系对应的HTML表格时，具体用于：

从数据串中各信息项中的x轴偏移量和y轴偏移量中，获取x轴最大偏移量xMax和y轴最大偏移量yMax；

创建包含yMax+1行、每行包含xMax+1个单元格的HTML表格；

锁定HTML表格中第一行和第一列中单元格的样式。

在一可选实施方式中，转换模块85在HTML表格中，还原数据串中各信息项对应的目标报表组件的位置和大小时，具体用于：

对数据串中的每个信息项，根据信息项中的x轴偏移量+1和y轴偏移量+1，确定信息项对应的目标报表组件在HTML表格中对应的定位单元格；

根据信息项中的宽度和高度，确定信息项对应的目标报表组件在HTML表格中对应的其它单元格；

将信息项对应的目标报表组件在HTML表格中对应的其它单元格合并至定位单元格；

在处理所有信息项后，删除HTML表格中的非定位单元格，以得到HTML格式的布局描述文档。

在一可选实施方式中，如图9所示，所述装置还包括：

设置模块87，用于在转换模块85删除HTML表格中的非定位单元格之后，设置第一行的高度和第一列的宽度分别为隐藏临界值，以隐藏第一行和第一列。

本实施例提供的报表组件布局信息处理装置，可用于执行上述方法实施例的流程，其具体工作原理不再赘述。

本实施例提供的报表组件布局信息处理装置，向用户提供图形化界面，图形化界面上包括可拖动的报表组件以及布局面板，用户可以拖动报表组件到布局面板上进行组件布局，可以方便、灵活地配置多样性的组件布局；另外，通过创建与布局面板适配的m*n的xy坐标体系，基于xy坐标体系可以获取布局面板上的目标报表组件之间的布局信息。由此可见，本申请实施例在支持简单、灵活、友好地配置多样性组件布局的基础上，解决了报表组件之间的布局信息的获取问题。

本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。

内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。内存是计算机可读介质的示例。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitorymedia)，如调制的数据信号和载波。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。

本领域技术人员应明白，本申请的实施例可提供为方法、系统或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

以上所述仅为本申请的实施例而已，并不用于限制本申请。对于本领域技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本申请的权利要求范围之内。

本申请实施例公开A1、一种报表组件布局信息处理方法，包括：

展示图形化界面，所述图形化界面包括可拖动的报表组件和布局面板，以供用户在所述布局面板上布设目标报表组件；

创建与所述布局面板适配的m*n的xy坐标体系；m为所述布局面板在x轴上占据的单位刻度的个数，n为所述布局面板在y轴上占据的单位刻度的个数，m、n为自然数；

响应于所述用户提交报表组件布局的操作，基于所述xy坐标体系，获取所述目标报表组件之间的布局信息。

A2、如A1所述的方法中，创建与所述布局面板适配的m*n的xy坐标体系，包括：

确定所述布局面板的宽度方向和高度方向分别为所述xy坐标体系中的x轴和y轴；

将所述布局面板的宽度与所述宽度方向上指定的列数k的比值，作为所述xy坐标体系中的单位刻度的取值，其中，m＝k；

标记所述xy坐标体系中的m*n个方格，n＝所述布局面板的高度/所述单位刻度的取值；

为所述m*n个方格分别赋予坐标值。

A3、如A2所述的方法中，为所述m*n个方格分别赋予坐标值，包括：

对所述m*n个方格中的每个方格，基于所述xy坐标体系识别所述方格上四个顶点的坐标值；

从所述方格上四个顶点中，选择最小坐标值对应的顶点作为所述方格的坐标顶点，所述坐标顶点的坐标值为所述方格的坐标值。

A4、如A1所述的方法中，在所述用户在所述布局面板上布设所述目标报表组件的过程中，所述方法还包括：

根据所述目标报表组件对所述xy坐标体系中方格的覆盖情况，调整所述目标报表组件在布局面板中的位置和/或大小。

A5、如A4所述的方法中，根据所述目标报表组件对所述xy坐标体系中方格的覆盖情况，调整所述目标报表组件在布局面板中的位置和/或大小，包括：

以移动距离最小为目标，对所述目标报表组件进行拖动和/或缩放，使得所述目标报表组件位于q个相邻的方格内，q为自然数。

A6、如A1-A5任一项所述的方法中，以移动距离最小为目标，对所述目标报表组件进行拖动和/或缩放，使得所述目标报表组件位于q个相邻的方格内，包括：

根据所述目标报表组件上四个顶点的坐标值以及被所述目标组件覆盖到的各方格的坐标值，识别出所述目标报表组件上四个顶点所在的边缘方格；

根据所述目标报表组件上四个顶点在屏幕上的像素坐标以及各自所在边缘方格的顶点在屏幕上的像素坐标，计算所述目标报表组件上四个顶点与各自所在边缘方格之间的距离比；

从所述目标报表组件上四个顶点所在边缘方格中，确定距离比最小的目标方格顶点；

移动或缩放所述目标报表组件，以使得所述目标报表组件上位于所述目标方格顶点所在方格内的顶点位于所述目标方格顶点附近。

A7、如A1-A6任一项所述的方法中，响应于所述用户提交报表组件布局的操作，基于所述xy坐标体系，获取所述目标报表组件之间的布局信息，包括：

基于所述xy坐标体系，获取所述目标报表组件的x轴偏移量、y轴偏移量、宽度和高度；

将所述目标报表组件的x轴偏移量、y轴偏移量、宽度和高度作为一个信息项，记录到用于描述所述目标报表组件之间的布局信息的数据串中。

A8、如A7所述的方法中，基于所述xy坐标体系，获取所述目标报表组件的x轴偏移量、y轴偏移量、宽度和高度，包括：

探测所述xy坐标体系中被所述目标报表组件覆盖的方格组；

获取所述方格组中首个被探测到的方格的坐标值，分别作为所述目标报表组件的x轴偏移量和y轴偏移量；

获取所述方格组的宽度和高度，作为所述目标报表组件的宽度和高度。

A9、如A7所述的方法还包括：

将所述数据串转成HTML格式的布局描述文档；

存储所述HTML格式的布局描述文档。

A10、如A9所述的方法中，将所述数据串转成HTML格式的布局描述文档，包括：

根据所述数据串中各信息项中的x轴偏移量和y轴偏移量，创建与所述xy坐标体系对应的HTML表格；

在所述HTML表格中，还原所述数据串中各信息项对应的目标报表组件的位置和大小，以得到所述HTML格式的布局描述文档。

A11、如A10所述的方法中，根据所述数据串中各信息项中的x轴偏移量和y轴偏移量，创建与所述xy坐标体系对应的HTML表格，包括：

从所述数据串中各信息项中的x轴偏移量和y轴偏移量中，获取x轴最大偏移量xMax和y轴最大偏移量yMax；

创建包含yMax行、每行包含xMax个单元格的HTML表格。

A12、如A11所述的方法中，在所述HTML表格中，还原所述数据串中各信息项对应的目标报表组件的位置和大小，以得到所述HTML格式的布局描述文档，包括：

对所述数据串中的每个信息项，根据所述信息项中的x轴偏移量和y轴偏移量，确定所述信息项对应的目标报表组件在所述HTML表格中对应的定位单元格；

根据所述信息项中的宽度和高度，确定所述信息项对应的目标报表组件在所述HTML表格中对应的其它单元格；

将所述信息项对应的目标报表组件在所述HTML表格中对应的其它单元格合并至所述定位单元格；

在处理所有信息项后，删除所述HTML表格中的非定位单元格，以得到所述HTML格式的布局描述文档。

A13、如A10所述的方法中，根据所述数据串中各信息项中的x轴偏移量和y轴偏移量，创建与所述xy坐标体系对应的HTML表格，包括：

从所述数据串中各信息项中的x轴偏移量和y轴偏移量中，获取x轴最大偏移量xMax和y轴最大偏移量yMax；

创建包含yMax+1行、每行包含xMax+1个单元格的HTML表格；

锁定所述HTML表格中第一行和第一列中单元格的样式。

A14、如A13所述的方法中，在所述HTML表格中，还原所述数据串中各信息项对应的目标报表组件的位置和大小，以得到所述HTML格式的布局描述文档，包括：

对所述数据串中的每个信息项，根据所述信息项中的x轴偏移量+1和y轴偏移量+1，确定所述信息项对应的目标报表组件在所述HTML表格中对应的定位单元格；

根据所述信息项中的宽度和高度，确定所述信息项对应的目标报表组件在所述HTML表格中对应的其它单元格；

将所述信息项对应的目标报表组件在所述HTML表格中对应的其它单元格合并至所述定位单元格；

在处理所有信息项后，删除所述HTML表格中的非定位单元格，以得到所述HTML格式的布局描述文档。

A15、如A14所述的方法中，在得到所述HTML格式的布局描述文档的过程中，所述方法还包括：

在删除所述HTML表格中的非定位单元格之后，设置所述第一行的高度和所述第一列的宽度分别为隐藏临界值，以隐藏所述第一行和所述第一列。

本申请实施例还公开一种B16、一种报表组件布局信息处理装置，包括：

展示模块，用于展示图形化界面，所述图形化界面包括可拖动的报表组件和布局面板，以供用户在所述布局面板上布设目标报表组件；

创建模块，用于创建与所述布局面板适配的m*n的xy坐标体系；m为所述布局面板在x轴上占据的单位刻度的个数，n为所述布局面板在y轴上占据的单位刻度的个数，m、n为自然数；

获取模块，用于响应于所述用户提交报表组件布局的操作，基于所述xy坐标体系，获取所述目标报表组件之间的布局信息。

B17、如B16所述的装置中，所述创建模块具体用于：

确定所述布局面板的宽度方向和高度方向分别为所述xy坐标体系中的x轴和y轴；

将所述布局面板的宽度与所述宽度方向上指定的列数k的比值，作为所述xy坐标体系中的单位刻度的取值，其中，m＝k；

标记所述xy坐标体系中的m*n个方格，n＝所述布局面板的高度/所述单位刻度的取值；

为所述m*n个方格分别赋予坐标值。

B18、如B17所述的装置中，所述创建模块在为所述m*n个方格分别赋予坐标值时，具体用于：

对所述m*n个方格中的每个方格，基于所述xy坐标体系识别所述方格上四个顶点的坐标值；

从所述方格上四个顶点的坐标值中，选择最小坐标值对应的顶点作为所述方格的坐标顶点，所述坐标顶点的坐标值为所述方格的坐标值。

B19、如B16所述的装置还包括：

调整模块，用于在所述用户在所述布局面板上布设所述目标报表组件的过程中，根据所述目标报表组件对所述xy坐标体系中方格的覆盖情况，调整所述目标报表组件在布局面板中的位置和/或大小。

B20、如B19所述的装置中，所述调整模块具体用于：

以移动距离最小为目标，对所述目标报表组件进行拖动和/或缩放，使得所述目标报表组件位于q个相邻的方格内，q为自然数。

B21、如B20所述的装置中，所述调整模块具体用于：

根据所述目标报表组件上四个顶点的坐标值以及被所述目标组件覆盖到的各方格的坐标值，识别出所述目标报表组件上四个顶点所在的边缘方格；

根据所述目标报表组件上四个顶点在屏幕上的像素坐标以及各自所在边缘方格的顶点在屏幕上的像素坐标，计算所述目标报表组件上四个顶点与各自所在边缘方格之间的距离比；

从所述目标报表组件上四个顶点所在边缘方格中，确定距离比最小的目标方格顶点；

移动或缩放所述目标报表组件，以使得所述目标报表组件上位于所述目标方格顶点所在方格内的顶点位于所述目标方格顶点附近。

B22、如B16-B21任一项所述的装置中，所述获取模块具体用于：

基于所述xy坐标体系，获取所述目标报表组件的x轴偏移量、y轴偏移量、宽度和高度；

将所述目标报表组件的x轴偏移量、y轴偏移量、宽度和高度作为一个信息项，记录到用于描述所述目标报表组件之间的布局信息的数据串中。

B23、如B22所述的装置中，所述获取模块在获取所述目标报表组件的x轴偏移量、y轴偏移量、宽度和高度时，具体用于：

探测所述xy坐标体系中被所述目标报表组件覆盖的方格组；

获取所述方格组中首个被探测到的方格的坐标值，分别作为所述目标报表组件的x轴偏移量和y轴偏移量；

获取所述方格组的宽度和高度，作为所述目标报表组件的宽度和高度。

B24、如B23所述的装置还包括：

转换模块，用于将所述数据串转成HTML格式的布局描述文档；

存储模块，用于存储所述HTML格式的布局描述文档。

B25、如B24所述的装置中，所述转换模块具体用于：

根据所述数据串中各信息项中的x轴偏移量和y轴偏移量，创建与所述xy坐标体系对应的HTML表格；

在所述HTML表格中，还原所述数据串中各信息项对应的目标报表组件的位置和大小，以得到所述HTML格式的布局描述文档。

B26、如B24所述的装置中，所述转换模块在创建与所述xy坐标体系对应的HTML表格时，具体用于：

从所述数据串中各信息项中的x轴偏移量和y轴偏移量中，获取x轴最大偏移量xMax和y轴最大偏移量yMax；

创建包含yMax行、每行包含xMax个单元格的HTML表格。

B27、如B26所述的装置中，所述转换模块在所述HTML表格中，还原所述数据串中各信息项对应的目标报表组件的位置和大小时，具体用于：

对所述数据串中的每个信息项，根据所述信息项中的x轴偏移量和y轴偏移量，确定所述信息项对应的目标报表组件在所述HTML表格中对应的定位单元格；

根据所述信息项中的宽度和高度，确定所述信息项对应的目标报表组件在所述HTML表格中对应的其它单元格；

将所述信息项对应的目标报表组件在所述HTML表格中对应的其它单元格合并至所述定位单元格；

在处理所有信息项后，删除所述HTML表格中的非定位单元格，以得到所述HTML格式的布局描述文档。

B28、如B24所述的装置中，所述转换模块在创建与所述xy坐标体系对应的HTML表格时，具体用于：

从所述数据串中各信息项中的x轴偏移量和y轴偏移量中，获取x轴最大偏移量xMax和y轴最大偏移量yMax；

创建包含yMax+1行、每行包含xMax+1个单元格的HTML表格；

锁定所述HTML表格中第一行和第一列中单元格的样式。

B29、如B28所述的装置中，所述转换模块在所述HTML表格中，还原所述数据串中各信息项对应的目标报表组件的位置和大小时，具体用于：

对所述数据串中的每个信息项，根据所述信息项中的x轴偏移量+1和y轴偏移量+1，确定所述信息项对应的目标报表组件在所述HTML表格中对应的定位单元格；

根据所述信息项中的宽度和高度，确定所述信息项对应的目标报表组件在所述HTML表格中对应的其它单元格；

将所述信息项对应的目标报表组件在所述HTML表格中对应的其它单元格合并至所述定位单元格；

在处理所有信息项后，删除所述HTML表格中的非定位单元格，以得到所述HTML格式的布局描述文档。

B30、如B29所述的装置还包括：

设置模块，用于在删除所述HTML表格中的非定位单元格之后，设置所述第一行的高度和所述第一列的宽度分别为隐藏临界值，以隐藏所述第一行和所述第一列。

本申请实施例还公开C31、一种电子设备，包括：一个或多个存储器和一个或多个处理器；所述一个或多个存储器存储有一条或多条计算机指令，所述一条或多条计算机指令在被所述一个或多个处理器执行时实现上述A1-A15任一项所述方法中的步骤。

本申请实施例还公开D32、一种存储有计算机程序的计算机存储介质，所述计算机程序被执行时实现上述A1-A15任一项所述方法中的步骤。

Claims (10)

1.一种报表组件布局信息处理方法，其特征在于，包括：

展示图形化界面，所述图形化界面包括可拖动的报表组件和布局面板，以供用户在所述布局面板上布设目标报表组件；

创建与所述布局面板适配的m*n的xy坐标体系；m为所述布局面板在x轴上占据的单位刻度的个数，n为所述布局面板在y轴上占据的单位刻度的个数，m、n为自然数；

响应于所述用户提交报表组件布局的操作，基于所述xy坐标体系，获取所述目标报表组件之间的布局信息。

2.根据权利要求1所述的方法，其特征在于，创建与所述布局面板适配的m*n的xy坐标体系，包括：

确定所述布局面板的宽度方向和高度方向分别为所述xy坐标体系中的x轴和y轴；

将所述布局面板的宽度与所述宽度方向上指定的列数k的比值，作为所述xy坐标体系中的单位刻度的取值，其中，m＝k；

标记所述xy坐标体系中的m*n个方格，n＝所述布局面板的高度/所述单位刻度的取值；

为所述m*n个方格分别赋予坐标值。

3.根据权利要求1-2任一项所述的方法，其特征在于，响应于所述用户提交报表组件布局的操作，基于所述xy坐标体系，获取所述目标报表组件之间的布局信息，包括：

基于所述xy坐标体系，获取所述目标报表组件的x轴偏移量、y轴偏移量、宽度和高度；

将所述目标报表组件的x轴偏移量、y轴偏移量、宽度和高度作为一个信息项，记录到用于描述所述目标报表组件之间的布局信息的数据串中。

4.根据权利要求3所述的方法，其特征在于，所述方法还包括：

将所述数据串转成HTML格式的布局描述文档；

存储所述HTML格式的布局描述文档。

5.根据权利要求4所述的方法，其特征在于，将所述数据串转成HTML格式的布局描述文档，包括：

根据所述数据串中各信息项中的x轴偏移量和y轴偏移量，创建与所述xy坐标体系对应的HTML表格；

在所述HTML表格中，还原所述数据串中各信息项对应的目标报表组件的位置和大小，以得到所述HTML格式的布局描述文档。

6.根据权利要求5所述的方法，其特征在于，根据所述数据串中各信息项中的x轴偏移量和y轴偏移量，创建与所述xy坐标体系对应的HTML表格，包括：

从所述数据串中各信息项中的x轴偏移量和y轴偏移量中，获取x轴最大偏移量xMax和y轴最大偏移量yMax；

创建包含yMax行、每行包含xMax个单元格的HTML表格。

7.根据权利要求6所述的方法，其特征在于，在所述HTML表格中，还原所述数据串中各信息项对应的目标报表组件的位置和大小，以得到所述HTML格式的布局描述文档，包括：

对所述数据串中的每个信息项，根据所述信息项中的x轴偏移量和y轴偏移量，确定所述信息项对应的目标报表组件在所述HTML表格中对应的定位单元格；

根据所述信息项中的宽度和高度，确定所述信息项对应的目标报表组件在所述HTML表格中对应的其它单元格；

将所述信息项对应的目标报表组件在所述HTML表格中对应的其它单元格合并至所述定位单元格；

在处理所有信息项后，删除所述HTML表格中的非定位单元格，以得到所述HTML格式的布局描述文档。

8.根据权利要求5所述的方法，其特征在于，根据所述数据串中各信息项中的x轴偏移量和y轴偏移量，创建与所述xy坐标体系对应的HTML表格，包括：

从所述数据串中各信息项中的x轴偏移量和y轴偏移量中，获取x轴最大偏移量xMax和y轴最大偏移量yMax；

创建包含yMax+1行、每行包含xMax+1个单元格的HTML表格；

锁定所述HTML表格中第一行和第一列中单元格的样式。

9.根据权利要求8所述的方法，其特征在于，在所述HTML表格中，还原所述数据串中各信息项对应的目标报表组件的位置和大小，以得到所述HTML格式的布局描述文档，包括：

对所述数据串中的每个信息项，根据所述信息项中的x轴偏移量+1和y轴偏移量+1，确定所述信息项对应的目标报表组件在所述HTML表格中对应的定位单元格；

根据所述信息项中的宽度和高度，确定所述信息项对应的目标报表组件在所述HTML表格中对应的其它单元格；

将所述信息项对应的目标报表组件在所述HTML表格中对应的其它单元格合并至所述定位单元格；

在处理所有信息项后，删除所述HTML表格中的非定位单元格，以得到所述HTML格式的布局描述文档。

10.一种报表组件布局信息处理装置，其特征在于，包括：

展示模块，用于展示图形化界面，所述图形化界面包括可拖动的报表组件和布局面板，以供用户在所述布局面板上布设目标报表组件；

创建模块，用于创建与所述布局面板适配的m*n的xy坐标体系；m为所述布局面板在x轴上占据的单位刻度的个数，n为所述布局面板在y轴上占据的单位刻度的个数，m、n为自然数；

获取模块，用于响应于所述用户提交报表组件布局的操作，基于所述xy坐标体系，获取所述目标报表组件之间的布局信息。