CN105760401B - 基于移动终端的报表数据交互方法和系统 - Google Patents

Abstract

本发明提供了一种基于移动终端的报表数据交互方法和系统，其方法包括：定义用户界面上的网页画布元素；根据图形报表类型，解析报表统计数据中各个类别对应的统计数值，在所述网页画布元素的位置范围内生成图形报表；获取用户触摸用户界面时焦点所在的焦点坐标信息；修改所述焦点坐标信息指向的所述图形报表位置处对应的颜色显示属性值或透明度属性值，和/或根据所述焦点坐标信息，获得位于所述图形报表周围、与所述指向的所述图形报表位置处相对应的第一留白位置，并在所述第一留白位置上添加指示标志。本发明提供了一种动态交互展示图表信息的方式。

Description

基于移动终端的报表数据交互方法和系统

技术领域

本发明涉及移动终端网页浏览数据报表的技术，特别是涉及一种基于移动终端的报表数据交互方法和系统。

背景技术

报表是将软件中的数据以表格形式展现出来，以便各个岗位的工作人员查询数据，及时掌握业务状态。目前实现报表有多种形式，例如通过专门的工具(例如，水晶报表)制作，也有些软件不借助专门报表工具，而按一定格式将数据显示在软件界面而形成报表。

为了使报表数据更加直观、方便查看人员进行数据分析，人们越来越希望将报表中的数据以各种图形的形式显示。目前既有报表、又有图表的软件比较少，特别是在移动终端上通过网页方式浏览报表时，由于网络环境的局限性，无法处理大批量的数据，则对于报表数据只能生成静态的图表信息，无法与用户实现交互来展示相应的图表内容。

基于现有技术存在的问题，有待进一步地提高。

发明内容

基于此，有必要针对现有技术的问题，提供了一种基于移动终端的报表数据交互方法和系统，其提供了一种动态交互展示图表信息的方式。

本发明提供了一种基于移动终端的报表数据交互方法，其包括：

定义用户界面上的网页画布元素；

根据图形报表类型，解析报表统计数据中各个类别对应的统计数值，在所述网页画布元素的位置范围内生成图形报表；

获取用户触摸用户界面时焦点所在的焦点坐标信息；

修改所述焦点坐标信息指向的所述图形报表位置处对应的颜色显示属性值和/或透明度属性值，和/或根据所述焦点坐标信息，获得位于所述图形报表周围、与所述指向的所述图形报表位置处相对应的第一留白位置，并在所述第一留白位置上添加指示标志。

在其中一个实施例中，所述根据图形报表类型、解析报表统计数据中各个类别对应的统计数值、并在所述网页画布元素的位置范围内生成图形报表的步骤包括：

根据图形报表类型，解析所述报表统计数据中各个类别对应的统计数值，获得在所述网页画布元素的位置范围内各个类别相应的界面坐标信息及界面展示图形的参数；

生成与所述各个类别相对应的多个数据项，每个数据项包括用于描述一类别的标签、该类别对应的统计数值、该类别相应的界面坐标信息及界面展示图形的参数；

遍历所述多个数据项绘制图形报表，在所述位置范围内的一绘图范围生成所述图形报表。

在其中一个实施例中，所述获得在所述网页画布元素的位置范围内该类别相应的界面坐标信息及界面展示图形的参数的步骤包括：

获取所述图形报表类型和所述网页画布元素的宽度属性值及高度属性值；

根据所述网页画布元素的高度属性值，确定所述绘图范围的Y轴范围和所述第一留白空间；

根据所述报表统计数据中所述统计数值的最大值和所述Y轴范围，获得所述各个类别相应的界面坐标信息中Y轴的坐标信息；

根据所述报表统计数据中的类别种类数和所述网页画布元素的宽度属性值，获得所述各个类别相应的界面坐标信息中X轴的坐标信息及界面展示图形的参数；

关联记录所述第一留白空间中各个留白位置分别与所述各个类别相应的界面坐标信息的一一对应关系。

在其中一个实施例中，所述方法还包括：

获取在所述网页画布元素的位置范围中第二留白空间的位置信息；

在所述第二留白空间上，显示所述焦点坐标信息指向的所述图形报表位置处对应的统计数值、或者该统计数值和根据该统计数值获得的数值分析结果。

在其中一个实施例中，所述遍历所述多个数据项绘制图形报表、在所述位置范围内的一绘图范围显示所述图形报表的步骤包括：

遍历所述多个数据项，在所述绘图范围内绘制所述多个数据项的界面展示图形；

根据所述多个数据项中的统计数值的最大值和预设份数，确定所述绘图范围的Y轴刻度信息；

根据所述多个数据项的标签，在所述第一留白空间中、与该数据项相对应的第二留白位置上添加所述标签。

在其中一个实施例中，所述方法中还包括：

获取用户择一选择所述预设份数所生成的选择指令，根据所述选择指令中选择的所述预设份数和所述统计数值的最大值，确定所述Y轴刻度信息。

在其中一个实施例中，在所述每个数据项中还包括：与该数据项对应的第一留白位置和/或第二留白位置的相应坐标信息。

在其中一个实施例中，所述方法还包括：

关联记录位于所述图形报表周围的第一留白空间中各个第一留白位置与所述图形报表相应位置的一一对应关系。

一种基于移动终端的报表数据交互系统，其包括：

模型设定模块，用于定义用户界面上的网页画布元素；

绘制模块，用于根据图形报表类型，解析报表统计数据中各个类别对应的统计数值，在所述网页画布元素的位置范围内生成图形报表；

焦点获取模块，用于获取用户触摸用户界面时焦点所在的焦点坐标信息；及

修改/添加模块，用于修改所述焦点坐标信息指向的所述图形报表位置处对应的颜色显示属性值和/或透明度属性值，和/或根据所述焦点坐标信息，获得位于所述图形报表周围、与所述指向的所述图形报表位置处相对应的第一留白位置，并在所述第一留白位置上添加指示标志。

在其中一个实施例中，所述绘制模块包括：

解析单元，用于根据图形报表类型，解析报表统计数据中各个类别对应的统计数值，获得在所述网页画布元素的位置范围内各个类别相应的界面坐标信息及界面展示图形的参数；

数据生成单元，用于生成与所述各个类别相对应的多个数据项，每个数据项包括用于描述一类别的标签、该类别对应的统计数值、该类别相应的界面坐标信息及界面展示图形的参数；及

绘制单元，用于遍历所述多个数据项绘制图形报表，在所述位置范围内的一绘图范围生成所述图形报表。

基于智能手机Web端交互图表技术，本发明提供了一种新型的图标交互方式，其利用更为先进的网页技术标准和一种新式的图表数据存储方式，便于绘制相应的图标信息数据，并能够有效的通过用户触摸方式进行交互，获得相关参数信息。

附图说明

图1为本发明交互方法的一个实施例流程示意图；

图2为本发明交互方法的另一个实施例流程示意图；

图3为使用本发明方法在手机界面上进行显示的一效果示意图；

图4为使用本发明方法在手机界面上进行显示的另一效果示意图；

图5为本发明交互方法的另一个实施例流程示意图；

图6为本发明交互系统的一实施例结构示意图。

具体实施方式

基于智能手机Web端交互图表技术，本发明提供了一种新型的图标交互方式，其利用更为先进的网页技术标准和一种新式的图表数据存储方式，便于绘制相应的图标信息数据，并能够有效的通过用户触摸方式进行交互，获得相关参数信息。具体结合附图参见下述各个实施例。

如图1和图3、图4所示，在本发明的一个实施例中，提供了一种基于移动终端的报表数据交互方法，其包括以下步骤：

在步骤100中，定义用户界面上的网页画布元素。在本文中优选采用HTML5中提供的Canvas功能来确定在移动终端用户界面上设定的HTML网页画布元素，它可以利用Javascript在网页中进行图形绘制。在用户界面上定义一个Canvas对象作为网页画布元素时，设置此网页画布元素的高度和宽度属性值，其对应在图3和图4中相应的一个位置范围1内。

在步骤200中，根据图形报表类型，解析报表统计数据中各个类别对应的统计数值，在所述网页画布元素的位置范围内生成图形报表。在本发明的一个优选实施例中，此步骤200包括以下步骤201至步骤203。

在步骤201中，根据图形报表类型，解析报表统计数据中各个类别对应的统计数值，获得在上述网页画布元素的位置范围内各个类别相应的界面坐标信息及界面展示图形的参数。为了能在有限的界面上呈现图形报表，则在执行本步骤之前还需要从相应的数据库中提取在用户界面展示所需要的报表统计数据，例如，用于界面展示最佳显示5个类别的统计数据，则只提取5个类别的数据进行步骤201的解析，并生成相应的数据进行展示。通常对于报表统计数据都具有多个类别及其对应的统计数值，例如，人名及对应的销售量，月份及对应的销售量等等，那么这里的人名或者月份则视为类别，用于作为图形图表的X轴(如图3和图4中的标号8)的参数。在上述步骤201中的界面坐标信息包括X轴(如图3和图4中的标号8)和Y轴的坐标信息。上述网页画布元素的位置范围1通过上述设置的网页画布元素的高度和宽度属性值来确定。如图3所示，图形报表类型为柱状图，则相应的界面展示图形为柱状项，那么其界面展示图形的参数指的是柱状项的高度和宽度值。同理，当图形报表类型为折线图时，则如图4所示，相应的界面展示图形为圆点或者圆圈，那么其界面展示图形的参数指的是圆点或者圆圈的半径或者直径。那么根据其他类型的图形报表类型，可以确定相应的界面展示图形的参数。

在本发明的一个实施例中，如图3、图4和图5所示，上述步骤201中获得在上述网页画布元素的位置范围1内该类别相应的界面坐标信息及界面展示图形的参数的步骤包括以下步骤：

步骤210，获取上述图形报表类型和上述网页画布元素的宽度属性值及高度属性值。优选地，通过在用户界面上弹出提示框、或者提示符等方式向用户需求选择相应图形报表类型的指令，从而获取图形报表类型。而上述网页画布元素的宽度属性值及高度属性值可在用户界面上定义一个Canvas对象时即提供赋值信息。

步骤220，根据上述网页画布元素的高度属性值，确定上述绘图范围2的Y轴范围和第一留白空间。这里的上述绘图范围2是指位于网页画布元素的位置范围1内用于显示图形报表的区域，例如图3和图4中分别用于展示柱状图表和折线图表的位置区域。而对于上述绘图范围2的Y轴范围是如图3和图4中绘图范围2在Y轴上的限高。第一留白空间则位于上述绘图范围2的周围，同样也位于网页画布元素的位置范围1内，主要用于提供其他信息的添加，下文将会详细说明。针对Canvas的绘图机制，其零点坐标是在左上角，根据网页画布元素的高度属性值即可确定网页画布元素中相应信息展示区域的大小。

步骤230，根据上述报表统计数据中上述统计数值的最大值和上述Y轴范围，获得上述各个类别相应的界面坐标信息中Y轴的坐标信息。Y轴的坐标信息用于表示报表统计数据中统计数值对应于绘图范围2内Y轴上的位置，比如折线图表中圆点或圆圈所在的Y轴的坐标信息，或者柱状图表中柱状项顶点所在的Y轴的坐标信息等等。

步骤240，根据上述报表统计数据中的类别种类数和上述网页画布元素的宽度属性值，获得上述各个类别相应的界面坐标信息中X轴的坐标信息及界面展示图形的参数。例如，如图3所示，根据人名类别的种类数将X轴8均分为多个等份，如图4所示，根据月份类别的种类数将X轴8均分为多个等份，而每个等份对应的X轴的坐标信息即为本步骤所求数据。因此，这里X轴的坐标信息用于表示报表统计数据中各个类别对应于X轴上的位置。参照上述步骤200的相关说明，如图3所示的柱状图表，前述界面展示图形的参数指的是柱状项的高度和宽度值。同理，如图4所示的折线图，相应的界面展示图形的参数为圆点或者圆圈的半径或者直径。

步骤250，关联记录上述第一留白空间中各个留白位置分别与上述各个类别相应的界面坐标信息的一一对应关系。上述第一留白空间主要用于添加例如标签信息，或者指示标志等信息，如图3和图4所示，在本发明的一个实施例汇总，上述第一留白空间包括在上述位置范围1内围绕绘图范围2、且与X轴平行的多条平行区域3，每个平行区域3中根据数据项的个数设置多个留白位置，而每个留白位置分布对应一个数据项。优选的，留白位置与各个类别相应的界面坐标信息关联记录，主要是留白位置优选设置在各个类别相应的界面坐标信息附近。

下面以柱状图表为例，详细举例说明上述计算过程。通常柱状图表由多个矩形柱状组成。根据上述报表统计数据的每一类别数据，解析成包含一个坐标点(x,y)以及柱状的高宽的信息。在UI界面上定义一个Canvas对象，为其设置固定的高和宽。然后计算出上述报表统计数据集合中统计数值的最大值。Canvas的绘图机制零点坐标是在左上角。假设Canvas画布的高为450px宽为320px。现在约定画布的上方400px用于绘制柱状图表，剩下的50px绘制每个柱状的描述信息。那么所有柱状的Y坐标都是400px。绘制柱状的最大高度可为400px。如果在上方绘制柱状图有些留白空间的话，那么就设定柱状图可绘制的最大高度为380px；那么就可以得到每个柱状项的高度比例对应关系。上述报表统计数据中统计数值的最大项对应的柱状高度是380px；那么每一类别对应的柱状高度都可以计算出来。每一类别对应的柱状宽度和X轴8是相互关联的，根据网页画布元素的宽度和柱状的个数(即类别个数)可以计算出柱状宽度和X轴的坐标信息。

在步骤202中，生成与上述报表统计数据中各个类别相对应的多个数据项，每个数据项包括用于描述一类别的标签、该类别对应的统计数值、该类别相应的界面坐标信息及界面展示图形的参数。本实施例中在此步骤中采用特定的数据格式的约定，优选采用JSON数据格式(即JavaScript Object Notation)，它是一种轻量级的数据交换格式，基于JavaScript(Standard ECMA-2623rd Edition-December 1999)的一个子集。JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯(包括C,C++,C#,Java,JavaScript,Perl,Python等)。这些特性使JSON成为理想的数据交换语言，易于人阅读和编写，同时也易于机器解析和生成，使得网络传输速度快，便于进行前后台交互，以及图标触控数据变化的交互。它会包含多个数据项，每个数据项必定包含一个标签描述，一个具体的数值，当然还可以包括该数据项的其他额外的信息。例如在本发明的一个优选实施例中，在上述每个数据项中还包括：在上述第一留白空间3中与该数据项对应的第一留白位置5和/或第二留白位置9的相应坐标信息。

在步骤203中，遍历上述多个数据项绘制图形报表，在位置范围1内的一绘图范围2显示该图形报表。在本实施例中，根据Canvas的绘图API(Application ProgrammingInterface,应用程序编程接口)去遍历上述各个数据项中的界面坐标信息集合，进行图形绘制获得图形报表。

此外，在本发明的一个实施例中，如图3和图4所示，上述步骤203中遍历上述多个数据项绘制图形报表、在位置范围内的一绘图范围显示图形报表的步骤包括：

首先，遍历上述多个数据项，在上述绘图范围2内绘制上述各个数据项的界面展示图形；

然后，根据上述多个数据项中的统计数值的最大值和预设份数，确定上述绘图范围2的Y轴刻度信息；例如根据需求将刻度分成三份，四份或者自定义的刻度，大致的每份刻度的值＝(最大的统计数值/预设份数)。

其次，根据上述多个数据项的标签，在上述第一留白空间3中、与该数据项相对应的第二留白位置9上添加上述标签。为了提升刻度的显示效果，在绘制X轴坐标添加相应标签时，设置相应的间隔，因此，在本发明的一个优选实施例中，在第一留白空间3中设置留白位置时包括以下步骤：首先，确定数据项的个数，然后获取设置间隔，其次，按照数据项的个数和设置间隔将第一留白空间3沿X轴均匀分割获得多个分割点，分割点记为留白位置。

又如，为了提供更加个性化的服务，在本发明的一个优选实施例中，通过在显示界面上显示提示框、提示符等提供用户选择相应预设份数的接口，具体方案如下所述：获取用户择一选择所述预设份数所生成的选择指令，根据所述选择指令中选择的预设份数和上述统计数值的最大值，确定上述Y轴刻度信息。

在步骤300中，获取用户触摸用户界面时焦点7所在的焦点坐标信息。当用户触摸用户界面时并不一定焦点位置有明确的指向对象，则基于上述步骤200的具体方案，还包括以下步骤：

在步骤301中，查找上述多个数据项，获得上述焦点坐标信息指向的数据项、或者位于上述焦点坐标信息最近位置处所指向的数据项。当焦点坐标信息无法匹配其中任何一个数据项中的界面坐标信息时，则在上述多个数据项对应的界面坐标信息中，搜寻与该焦点坐标信息位置距离最近的界面坐标信息，此界面坐标信息指向的数据项，记为位于上述焦点坐标信息最近位置处所指向的数据项。

在步骤400中，修改所述焦点坐标指向的所述图形报表位置处对应的颜色显示属性值和/或透明度属性值，和/或根据所述焦点坐标信息，获得位于所述图形报表周围、与所述指向的所述图形报表位置处相对应的第一留白位置，并在所述第一留白位置上添加指示标志。这里提到的焦点坐标指向的所述图形报表位置处包括位于焦点坐标上的图形报表中相应界面展示图形6，或者位于上述焦点坐标信息最近位置处所指向的图形报表中相应界面展示图形6。如图2所示，此时依据上述步骤201至步骤203，在本发明的一个优选实施例中，步骤400变更为图2所示的步骤401，即修改上述指向的数据项的界面展示图形对应的颜色显示属性值或透明度属性值，和/或根据所述指向的数据项中的界面坐标信息，获得位于所述绘图范围周围、与该数据项相对应的上述第一留白位置5，并在该第一留白位置上添加指示标志。

为了便于根据焦点坐标查找相关的图形报表位置处，则在本发明的一个实施例中，还包括：关联记录位于所述图形报表周围的第一留白空间中各个第一留白位置5与图形报表相应位置(例如相应界面展示图形6等等参考位置)的一一对应关系。在本发明的一个优选实施例中，上述步骤202提到的每个数据项中还包含：第一留白位置的坐标信息。上述第一留白位置位于第一留白空间内，其确定方式可参见前文说明。

基于上述步骤100至步骤400的过程，用户触摸点击到的当前柱状会被改变颜色或透明度，以便突出显示。为了明了的标识出当前的柱状，还可以在上述第一留白位置添加一个形如三角形的标识用以指向该柱状。当用户的手势触摸操作的时候，该指示标识会随着手指的移动而移动，那么指向的柱状也会随之更换颜色或透明度以便突出显示。

基于上述各个实施例，如图3和图4所示，在本发明的一个实施例中，上述方法还包括以下步骤：

首先，获取在所述网页画布元素的位置范围1中第二留白空间4的位置信息。

然后，在上述第二留白空间4上，显示上述焦点坐标信息指向的所述图形报表位置处对应的统计数值、或者该统计数值和根据该统计数值获得的数值分析结果。这里第二留白空间4的位置信息通过在上述步骤200中根据上述绘图范围2和所述第一留白空间3来确定上述网页画布元素的位置范围1中的第二留白空间4的位置范围。又如，上述焦点坐标信息指向的所述图形报表位置处对应的统计数值，优选通过查找上述步骤202中提到的多个数据项，根据焦点坐标获得该焦点坐标指向的数据项中的统计数值。

基于本实施例，在用户触摸到图形报表中的某个类别对应的界面展示图形时，触发相应的回调函数，去更新相关的UI信息，这样就可以看到数据随着用户的手势滑动操作而随之变更。

图1为本发明一个实施例的方法的流程示意图。应该理解的是，虽然图1的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，其可以以其他的顺序执行。而且，图1中的至少一部分步骤可以包括多个子步骤或者多个阶段，这些子步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，其执行顺序也不必然是依次进行，而是可以与其他步骤或者其他步骤的子步骤或者阶段组合实施例的。

上述方法中，优选的基于JSON数据格式和HTML5中提供的Canvas功能实现上述方法时，可以有效地基于交互方式实时更新用户界面上的显示数据和显示图形报表，提高了基于智能手机的网页浏览应用操作的体验方式，提高数据显示的流畅性。

基于上述方法，如图6所示，本发明还提供了一种基于移动终端的报表数据交互系统900，该系统包括：

模型设定模块901，用于定义用户界面上的网页画布元素；

绘制模块902，用于根据图形报表类型，解析报表统计数据中各个类别对应的统计数值，在所述网页画布元素的位置范围内生成图形报表；

焦点获取模块903，用于获取用户触摸用户界面时焦点所在的焦点坐标信息；及

修改/添加模块904，用于修改所述焦点坐标信息指向的所述图形报表位置处对应的颜色显示属性值或透明度属性值，和/或根据所述焦点坐标信息，获得位于所述图形报表周围、与所述指向的所述图形报表位置处相对应的第一留白位置，并在所述第一留白位置上添加指示标志。

上述功能模块901至904分别用于执行图1所示的上述基于移动终端的报表数据交互方法中的步骤100至400，因此其各个功能模块901至904的具体实现方式可参见上述步骤100至400的相关解释说明，在此不累述。

在本发明的一个实施例中，上述绘制模块902包括：

解析单元912，用于根据图形报表类型，解析报表统计数据中各个类别对应的统计数值，获得在所述网页画布元素的位置范围内各个类别相应的界面坐标信息及界面展示图形的参数；

数据生成单元913，用于生成与所述各个类别相对应的多个数据项，每个数据项包括用于描述一类别的标签、该类别对应的统计数值、该类别相应的界面坐标信息及界面展示图形的参数；及

绘制单元914，用于遍历所述多个数据项绘制图形报表，在所述位置范围内的一绘图范围生成所述图形报表。

上述功能模块912至914分别用于执行图1所示的上述基于移动终端的报表数据交互方法中的步骤201至203，因此其各个功能模块912至914的具体实现方式可参见上述步骤201至203的相关解释说明，在此不累述。

基于上述实施例，在本发明的一个实施例中，上述方法中还包括：

查找模块560，用于查找上述多个数据项，获得上述焦点坐标信息指向的数据项、或者位于上述焦点坐标信息最近位置处所指向的数据项。则上述步骤修改/添加模块904用于修改上述指向的数据项的界面展示图形对应的颜色显示属性值或透明度属性值，和/或根据所述指向的数据项中的界面坐标信息，获得位于所述绘图范围周围、与该数据项相对应的上述第一留白位置5，并在该第一留白位置上添加指示标志。

基于上述实施例，在本发明的一个实施例中，上述解析单元912包括：

第一单元，用于获取上述图形报表类型和上述网页画布元素的宽度属性值及高度属性值；

第二单元，用于根据上述网页画布元素的高度属性值，确定上述绘图范围的Y轴范围和上述第一留白空间；

第三单元，用于根据上述报表统计数据中上述统计数值的最大值和上述Y轴范围，获得上述各个类别相应的界面坐标信息中Y轴的坐标信息；

第四单元，用于根据上述报表统计数据中的类别种类数和上述网页画布元素的宽度属性值，获得上述各个类别相应的界面坐标信息中X轴的坐标信息及界面展示图形的参数；及

第五单元，用于关联记录上述第一留白空间中各个留白位置分别与上述各个类别相应的界面坐标信息的一一对应关系。

上述第一单元至第五单元分别用于执行图4中的步骤210至步骤250，因此上述第一单元至第五单元的具体实现方式可参见上述步骤210至步骤250的相关解释说明，在此不累述。

基于上述实施例，在本发明的一个实施例中，如图6所示，上述系统还包括：

位置确定模块580，用于获取在上述网页画布元素的位置范围中第二留白空间的位置信息；及

数据显示模块590，用于在上述第二留白空间上，显示上述焦点坐标信息指向的所述图形报表位置处对应的统计数值、或者该统计数值和根据该统计数值获得的数值分析结果。此两个功能模块用于执行上述方法中的相应步骤，其具体实现方式参见上述相关说明。

基于上述实施例，在本发明的一个实施例中，如图6所示，所述系统还包括

关联记录模块，用于关联记录位于上述图形报表周围的第一留白空间中各个第一留白位置与所述图形报表相应位置的一一对应关系，主要是为了便于根据焦点坐标信息查找相关位置。

基于上述实施例，在本发明的一个实施例中，上述绘制单元914包括：

读取显示单元，用于遍历上述多个数据项，在上述绘图范围内绘制上述多个数据项的界面展示图形；

刻度显示单元，用于根据上述多个数据项中的统计数值的最大值和预设份数，确定上述绘图范围的Y轴刻度信息；

标签显示单元，用于根据上述多个数据项的标签，在上述第一留白空间中、与该数据项相对应的第二留白位置上添加上述标签。

基于上述实施例，在本发明的一个实施例中，上述方法中还包括：

提示模块，用于获取用户择一选择上述预设份数所生成的选择指令，根据上述选择指令中选择的上述预设份数和上述统计数值的最大值，确定上述Y轴刻度信息。

上述各个功能模块或单元是基于上述交互方法的各个步骤来设置的，因此，其各个功能模块或单元的具体实现方式参见上述交互方法中相关步骤的说明，在此不累述。

以上各个实施例在具体说明中仅只针对相应步骤的实现方式进行了阐述，然后在逻辑不相矛盾的情况下，上述各个实施例是可以相互组合的而形成新的技术方案的，而该新的技术方案依然在本具体实施方式的公开范围内。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品承载在一个非易失性计算机可读存储载体(如ROM、磁碟、光盘，服务器存储空间)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，或者网络设备等)执行本发明各个实施例所述的系统结构和方法。

综上所述，现有的Mobile web App中出现的数据报表中，仅仅是展示柱状图信息或者曲线图信息，而没有用户的手势触摸交互。并且，展现的数据也是静态的，但是本发明通过上述方案可以实现用户手势触摸操作来查看报表数据中每项的具体信息，还可以在手机有限的屏幕上有组织的展示更多的报表信息。提升用户的操作体验并展现丰富的数据，让基于手机浏览器的页面应用操作体验更加的接近基于智能手机本地APP应用的操作，数据交互更加多样化，数据显示更为流畅。

以上所述实施例仅表达了本发明的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。因此，本发明专利的保护范围应以所附权利要求为准。

Claims (10)

1.一种基于移动终端的报表数据交互方法，其包括：

定义用户界面上的网页画布元素；

根据图形报表类型，解析报表统计数据中各个类别对应的统计数值，在所述网页画布元素的位置范围内生成图形报表；

获取用户触摸用户界面时焦点所在的焦点坐标信息；

修改所述焦点坐标信息指向的所述图形报表位置处对应的颜色显示属性值和/或透明度属性值，和/或根据所述焦点坐标信息，获得位于所述图形报表周围、与所述指向的所述图形报表位置处相对应的第一留白位置，并在所述第一留白位置上添加指示标志；

获取在所述网页画布元素的位置范围中第二留白空间的位置信息；

在所述第二留白空间上，显示所述焦点坐标信息指向的所述图形报表位置处对应的统计数值、或者该统计数值和根据该统计数值获得的数值分析结果。

2.根据权利要求1所述的基于移动终端的报表数据交互方法，其特征在于，所述根据图形报表类型、解析报表统计数据中各个类别对应的统计数值、并在所述网页画布元素的位置范围内生成图形报表的步骤包括：

根据图形报表类型，解析所述报表统计数据中各个类别对应的统计数值，获得在所述网页画布元素的位置范围内各个类别相应的界面坐标信息及界面展示图形的参数；

生成与所述各个类别相对应的多个数据项，每个数据项包括用于描述一类别的标签、该类别对应的统计数值、该类别相应的界面坐标信息及界面展示图形的参数；

遍历所述多个数据项绘制图形报表，在所述位置范围内的一绘图范围生成所述图形报表。

3.根据权利要求2所述的基于移动终端的报表数据交互方法，其特征在于，所述获得在所述网页画布元素的位置范围内该类别相应的界面坐标信息及界面展示图形的参数的步骤包括：

获取所述图形报表类型和所述网页画布元素的宽度属性值及高度属性值；

根据所述网页画布元素的高度属性值，确定所述绘图范围的Y轴范围和所述第一留白空间；

根据所述报表统计数据中所述统计数值的最大值和所述Y轴范围，获得所述各个类别相应的界面坐标信息中Y轴的坐标信息；

根据所述报表统计数据中的类别种类数和所述网页画布元素的宽度属性值，获得所述各个类别相应的界面坐标信息中X轴的坐标信息及界面展示图形的参数；

关联记录所述第一留白空间中各个留白位置分别与所述各个类别相应的界面坐标信息的一一对应关系。

4.根据权利要求1所述的基于移动终端的报表数据交互方法，其特征在于，所述方法基于JSON数据格式和HTML5中提供的Canvas功能实现。

5.根据权利要求2所述的基于移动终端的报表数据交互方法，其特征在于，所述遍历所述多个数据项绘制图形报表、在所述位置范围内的一绘图范围显示所述图形报表的步骤包括：

遍历所述多个数据项，在所述绘图范围内绘制所述多个数据项的界面展示图形；

根据所述多个数据项中的统计数值的最大值和预设份数，确定所述绘图范围的Y轴刻度信息；

根据所述多个数据项的标签，在所述第一留白空间中、与该数据项相对应的第二留白位置上添加所述标签。

6.根据权利要求5所述的基于移动终端的报表数据交互方法，其特征在于，所述方法中还包括：

获取用户择一选择所述预设份数所生成的选择指令，根据所述选择指令中选择的所述预设份数和所述统计数值的最大值，确定所述Y轴刻度信息。

7.根据权利要求2或5所述的基于移动终端的报表数据交互方法，其特征在于，在所述每个数据项中还包括：与该数据项对应的第一留白位置和/或第二留白位置的相应坐标信息。

8.根据权利要求1所述的基于移动终端的报表数据交互方法，其特征在于，所述方法还包括：

关联记录位于所述图形报表周围的第一留白空间中各个第一留白位置与所述图形报表相应位置的一一对应关系。

9.一种基于移动终端的报表数据交互系统，其特征在于，所述系统包括：

模型设定模块，用于定义用户界面上的网页画布元素；

绘制模块，用于根据图形报表类型，解析报表统计数据中各个类别对应的统计数值，在所述网页画布元素的位置范围内生成图形报表；

焦点获取模块，用于获取用户触摸用户界面时焦点所在的焦点坐标信息；及

修改/添加模块，用于修改所述焦点坐标信息指向的所述图形报表位置处对应的颜色显示属性值和/或透明度属性值，和/或根据所述焦点坐标信息，获得位于所述图形报表周围、与所述指向的所述图形报表位置处相对应的第一留白位置，并在所述第一留白位置上添加指示标志；

位置确定模块，用于获取在上述网页画布元素的位置范围中第二留白空间的位置信息；及

数据显示模块，用于在所述第二留白空间上，显示所述焦点坐标信息指向的所述图形报表位置处对应的统计数值、或者该统计数值和根据该统计数值获得的数值分析结果。

10.根据权利要求9所述的基于移动终端的报表数据交互系统，其特征在于，所述绘制模块包括：

解析单元，用于根据图形报表类型，解析报表统计数据中各个类别对应的统计数值，获得在所述网页画布元素的位置范围内各个类别相应的界面坐标信息及界面展示图形的参数；

数据生成单元，用于生成与所述各个类别相对应的多个数据项，每个数据项包括用于描述一类别的标签、该类别对应的统计数值、该类别相应的界面坐标信息及界面展示图形的参数；及

绘制单元，用于遍历所述多个数据项绘制图形报表，在所述位置范围内的一绘图范围生成所述图形报表。