用于终端浏览器的网页中图表的全屏显示方法及系统的制作方法

用于终端浏览器的网页中图表的全屏显示方法及系统的制作方法
【专利摘要】本发明是关于一种用于终端浏览器的网页中图表的全屏显示方法及系统，属于计算机技术领域。该方法包括：在所述终端浏览器中打开网页标签，获取网页中图表元素的位置信息；根据当前图表元素的位置信息，浏览器主进程在指定位置处创建并显示图表全屏按钮；当接收到用户对图表全屏按钮的触发时，判断图表元素的状态是否为全屏；当图表元素处于非全屏状态时，将图表控件从相应的一图表容器中放入一全屏页面容器中渲染；全屏页面容器调用图表重绘尺寸接口，将图表控件的尺寸拉伸至所述全屏页面容器的大小。本发明能够自适应的将图表以浏览器的网页的全屏大小显示，且同时不影响该终端的其它操作。
【专利说明】
用于终端浏览器的网页中图表的全屏显示方法及系统
技术领域
[0001] 本发明涉及计算机技术，尤其涉及一种用于终端浏览器的网页中图表的全屏显示 方法及系统。
【背景技术】
[0002] 在各种数据可视化平台中，都包含各种显示数据的图表控件，例如:折线图、柱图、 饼图等。但是，绝大多数的数据可视化平台中的图表控件，都没能提供全屏查看的功能。
[0003] 图表通常只能在其显示的位置查看，不可单独全屏查看，如图1所示。无法全屏查 看，用户有时无法集中精力查看自己关注的数据;用户在会议中显示图表数据时无法全屏， 观众看数据比较费精力；图表通常没有针对移动设备优化显示，比如在手机上看数据时很 不方便。
[0004] 因此，需要一种新的用于终端浏览器的网页中图表的全屏显示方法及系统。
[0005] 在所述【背景技术】部分公开的上述信息仅用于加强对本发明的背景的理解，因此它 可以包括不构成对本领域普通技术人员已知的现有技术的信息。

【发明内容】

[0006] 本发明提供一种用于终端浏览器的网页中图表的全屏显示方法及系统，使图表可 支持浏览器的网页全屏查看。
[0007] 本发明的其他特性和优点将通过下面的详细描述变得显然，或部分地通过本发明 的实践而习得。
[0008] 根据本发明的一方面，提供一种用于终端浏览器的网页中图表的全屏显示方法， 包括:在所述终端浏览器中打开网页标签，获取网页中图表元素的位置信息;根据所述图表 元素的位置信息，所述浏览器主进程在指定位置处创建并显示图表全屏按钮；当接收到用 户对所述图表全屏按钮的触发时，判断所述图表元素的状态是否为全屏；当所述图表元素 处于非全屏状态时，将图表控件从相应的一图表容器中放入一全屏页面容器中渲染;所述 全屏页面容器调用图表重绘尺寸接口，将所述图表控件的尺寸拉伸至所述全屏页面容器的 大小。
[0009] 根据本发明的一实施方式，还包括:预先在网页中创建所述图表容器，其中所述图 表容器用于存放所述图表控件;预先在所述网页中创建所述全屏页面容器，其中所述全屏 页面容器用于存放图表全屏显示后的相应图表控件，所述全屏显示是指所述图表元素以该 网页的全屏尺寸显示。
[0010] 根据本发明的一实施方式，还包括:当所述图表元素处于全屏状态时，将所述图表 控件从所述全屏页面容器中放入相应的图表容器中渲染;所述全屏页面容器调用所述图表 重绘尺寸接口，将所述图表控件的尺寸恢复至所述图表容器的大小。
[0011] 根据本发明的一实施方式，还包括:检测所述浏览器的窗口尺寸是否发生变化;当 所述浏览器的窗口尺寸发生变化时，且所述图表元素处于全屏状态，所述全屏页面容器调 用所述图表重绘尺寸接口，将所述图表控件的尺寸拉伸至所述浏览器的窗口尺寸改变后的 所述全屏页面容器的大小。
[0012] 根据本发明的一实施方式，还包括:判断所述终端是否为移动设备；当所述终端是 移动设备时，判断所述移动设备是否处于竖屏状态；当所述移动设备处于竖屏状态时，且所 述图表元素处于全屏状态时，对所述图表元素的坐标执行图表坐标转换;所述全屏页面容 器调用所述图表重绘尺寸接口，用于将所述图表控件的尺寸拉伸至所述移动设备竖屏状态 下的所述全屏页面容器的大小。
[0013] 根据本发明的一实施方式，其中所述判断所述图表元素的状态是否为全屏或者非 全屏包括:根据所述全屏页面容器中的一图表全屏状态参数的预设值来判断所述图表元素 的状态为全屏状态或者非全屏状态。
[0014] 根据本发明的一实施方式，还包括：当所述图表元素当前的全屏状态参数的值指 示为非全屏状态，在执行完拉伸操作全屏显示所述图表元素时，修改所述全屏状态参数的 值指示为全屏状态；当所述图表元素当前的全屏状态参数的值指示为全屏状态，在执行完 恢复操作非全屏显示所述图表元素时，修改所述全屏状态参数的值指示为非全屏状态。
[0015] 根据本发明的一实施方式，其中所述图表全屏按钮内嵌于所述图表容器中，当用 户点击所述图表全屏按钮时，切换所述图表元素以全屏或者非全屏状态显示。
[0016] 根据本发明的一实施方式，其中所述指定位置为:所述图表元素区域内任一位置； 或者为所述图表元素边缘处一位置。
[0017] 根据本发明的再一个方面，提供一种用于终端浏览器的网页中图表的全屏显示系 统，包括:位置信息获取模块，用于在所述终端浏览器中打开网页标签，获取网页中图表元 素的位置信息;创建全屏按钮模块，用于根据所述图表元素的位置信息，所述浏览器主进程 在指定位置处创建并显示图表全屏按钮;第一判断模块，用于当接收到用户对所述图表全 屏按钮的触发时，判断所述图表元素的状态是否为全屏;第一渲染模块，用于当所述图表元 素处于非全屏状态时，将图表控件从相应的一图表容器中放入一全屏页面容器中渲染;第 一拉伸模块，用于所述全屏页面容器调用图表重绘尺寸接口，将所述图表控件的尺寸拉伸 至所述全屏页面容器的大小。
[0018] 根据本发明的一实施方式，还包括:图表容器创建模块，用于预先在网页中创建所 述图表容器，其中所述图表容器用于存放所述图表控件;全屏页面容器创建模块，用于预先 在所述网页中创建所述全屏页面容器，其中所述全屏页面容器用于存放图表全屏显示后的 相应图表控件，所述全屏显示是指所述图表元素以该网页的全屏尺寸显示。
[0019] 根据本发明的一实施方式，还包括:第二渲染模块，用于当所述图表元素处于全屏 状态时，将所述图表控件从所述全屏页面容器中放入相应的图表容器中渲染;恢复模块，用 于所述全屏页面容器调用所述图表重绘尺寸接口，将所述图表控件的尺寸恢复至所述图表 容器的大小。
[0020] 根据本发明的一实施方式，还包括:修改状态模块，用于当所述图表元素当前的全 屏状态参数的值指示为非全屏状态，在执行完拉伸操作全屏显示所述图表元素时，修改所 述全屏状态参数的值指示为全屏状态；当所述图表元素当前的全屏状态参数的值指示为全 屏状态，在执行完恢复操作非全屏显示所述图表元素时，修改所述全屏状态参数的值指示 为非全屏状态。
[0021 ]根据本发明的一实施方式，还包括:检测模块，用于检测所述浏览器的窗口尺寸是 否发生变化;第二拉伸模块，用于当所述浏览器的窗口尺寸发生变化时，且所述图表元素处 于全屏状态，所述全屏页面容器调用所述图表重绘尺寸接口，将所述图表控件的尺寸拉伸 至所述浏览器的窗口尺寸改变后的所述全屏页面容器的大小。
[0022]根据本发明的一实施方式，还包括:第二判断模块，用于判断所述终端是否为移动 设备；第三判断模块，用于当所述终端是移动设备时，判断所述移动设备是否处于竖屏状 态;坐标变换模块，用于当所述移动设备处于竖屏状态时，且所述图表元素当前处于全屏状 态，对所述图表元素执行坐标转换;第三拉伸模块，用于所述全屏页面容器调用所述图表重 绘尺寸接口，将所述图表控件的尺寸拉伸至所述移动设备竖屏状态下的所述全屏页面容器 的大小。
[0023]根据本发明的再一个方面，还提供一种终端设备，包括:处理器；用于存储处理器 可执行指令的存储器。其中，所述处理器被配置为:在所述终端设备的浏览器中打开网页标 签，获取网页中图表元素的位置信息;根据所述图表元素的位置信息，在指定位置处创建并 显示图表全屏按钮；当接收到用户对所述图表全屏按钮的触发时，判断所述图表元素的状 态是否为全屏；当所述图表元素处于非全屏状态时，将图表控件从相应的一图表容器中放 入一全屏页面容器中渲染;所述全屏页面容器调用图表重绘尺寸接口，将所述图表控件的 尺寸拉伸至所述全屏页面容器的大小。
[0024]根据本发明的一实施方式，其中，所述处理器还被配置为:判断所述终端设备是否 为移动设备；当所述终端设备是移动设备时，判断所述移动设备是否处于竖屏状态；当所述 移动设备处于竖屏状态时，且所述图表元素处于全屏状态时，对所述图表元素的坐标执行 图表坐标转换;所述全屏页面容器调用所述图表重绘尺寸接口，用于将所述图表控件的尺 寸拉伸至所述移动设备竖屏状态下的所述全屏页面容器的大小。
[0025]本发明公开的用于终端浏览器的网页中图表的全屏显示方法及系统，图表可支持 全屏，用户可以方便地查看自己关注的数据，为用户节省宝贵的时间与精力;在一些公共场 合演示图表数据时，也会使观众看数据显得更加直观。
[0026]应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不 能限制本发明。
【附图说明】
[0027]此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本发明的实施 例，并与说明书一起用于解释本发明的原理。
[0028]图1示意性示出终端浏览器的网页中图表的非全屏显示；
[0029] 图2A-2C示意性示出根据本发明示例实施方式的用于终端浏览器的网页中图表的 全屏显示方法的流程图；
[0030] 图3A-3C示意性示出根据本发明示例实施方式的用于终端浏览器的网页中图表的 全屏显示方法的流程图；
[0031] 图4A-4C示意性示出根据本发明示例实施方式的用于终端浏览器的网页中图表的 全屏显示方法的流程图；
[0032] 图5示意性示出根据本发明示例实施方式的用于终端浏览器的网页中的图表全屏 按钮的示意图；
[0033]图6示意性示出根据本发明示例实施方式的用于终端浏览器的网页中图表的全屏 显示系统的框图；
[0034]图7A-7C示意性示出现有的用于终端浏览器的网页中图表的全屏显示方法的流程 图。
【具体实施方式】
[0035] 现在将参考附图更全面地描述示例实施方式。然而，示例实施方式能够以多种形 式实施，且不应被理解为限于在此阐述的范例;相反，提供这些实施方式使得本发明将更加 全面和完整，并将示例实施方式的构思全面地传达给本领域的技术人员。附图仅为本发明 的示意性图解，并非一定是按比例绘制。图中相同的附图标记表示相同或类似的部分，因而 将省略对它们的重复描述。
[0036] 此外，所描述的特征、结构或特性可以以任何合适的方式结合在一个或更多实施 方式中。在下面的描述中，提供许多具体细节从而给出对本发明的实施方式的充分理解。然 而，本领域技术人员将意识到，可以实践本发明的技术方案而省略所述特定细节中的一个 或更多，或者可以采用其它的方法、组元、系统、步骤等。在其它情况下，不详细示出或描述 公知结构、方法、系统、实现、材料或者操作以避免喧宾夺主而使得本发明的各方面变得模 糊。
[0037]附图中所示的一些方框图是功能实体，不一定必须与物理或逻辑上独立的实体相 对应。可以采用软件形式来实现这些功能实体，或在一个或多个硬件模块或集成电路中实 现这些功能实体，或在不同网络和/或处理器系统和/或微控制器系统中实现这些功能实 体。
[0038] 以下示例性实施例中所描述的实施方式并不代表与本发明相一致的所有实施方 式。相反，它们仅是与如所附权利要求书中所详述的、本发明的一些方面相一致的系统和方 法的例子。
[0039] 图2A-2C示意性示出根据本发明示例实施方式的用于终端浏览器的网页中图表的 全屏显示方法的流程图。
[0040] 如图2A所示，在步骤S110,在所述终端浏览器中打开网页标签，获取网页中图表元 素的位置信息。
[0041] 例如，打开浏览器主进程和网页子进程，在所述网页子进程中打开网页标签，并获 取网页中图表元素的位置信息。
[0042]本发明实施例主要针对网页端全屏显示图表控件，包括使用PC或者移动设备等终 端打开浏览器查看网页、或者在移动设备APP内嵌入的网页中浏览(如微信分享）。
[0043]浏览器内核负责对网页进行加载、显示、以及JS( javascript)的执行的部分，是浏 览器的核心。网页内核中包括用于网页元素排版的排版引擎。浏览器显示网页时，图表实际 上是网页的一个节点，大小和位置由浏览器排版引擎控制。浏览器将图表的网页节点当作 普通节点对待。因此，一般情况下，图表区域只是作为网页的一个部分进行显示，并不会全 屏显示，用户除了能看到图表，还看到了网页的其它元素。WebView是安卓操作系统上用来 显示的控件，将其称为网页视图控件。
[0044] 所述图片元素的位置信息包括:所述图片元素在所述网页子进程的页面可见区域 中的左上角位置坐标和所述图片元素的宽和高。
[0045] 在示例性实施例中，还可以获取所述图片元素的属性信息和图片数据。所述图片 元素的属性信息包括：图片大小、图片在本地缓存的地址、图片在云端的保存地址和/或所 述图片元素的URL。
[0046] 在步骤S120,根据所述图表元素的位置信息，所述浏览器主进程在指定位置处创 建并显示图表全屏按钮。
[0047] 在示例性实施例中，其中所述图表全屏按钮内嵌于图表容器中，当用户点击所述 图表全屏按钮时，切换所述图表元素以全屏或者非全屏状态显示。
[0048] 在示例性实施例中，其中所述指定位置为:所述图表元素区域内任一位置;或者为 所述图表元素边缘处一位置。
[0049] 在步骤S130,当接收到用户对所述图表全屏按钮的触发时，判断所述图表元素的 状态是否为全屏。
[0050] 在示例性实施例中，其中所述判断所述图表元素的状态是否为全屏或者非全屏包 括:根据所述全屏页面容器中的一图表全屏状态参数的预设值来判断所述图表元素的状态 为全屏状态或者非全屏状态。
[0051] 在示例性实施例中，所述图表全屏状态参数的值用于记录当前图表是否处于全屏 状态，类型为bool，默认为false(即非全屏状态）。
[0052]在步骤S140,当所述图表元素处于非全屏状态时，将图表控件从相应的一图表容 器中放入一全屏页面容器中渲染。
[0053]在示例性实施例中，还包括:预先在网页中创建所述图表容器，其中所述图表容器 用于存放所述图表控件;预先在所述网页中创建所述全屏页面容器，其中所述全屏页面容 器用于存放图表全屏显示后的相应图表控件，所述全屏显示是指所述图表元素以该网页的 全屏尺寸显示。
[0054]在示例性实施例中，存放所述图表控件的所述图表容器在html页面中通常为某个 div标签。所述全屏页面容器在html页面中为body标签。
[0055] html即超文本标记语言，开发网页都需要使用html 即为html的最新版本。 结合本发明实施例的简单示例如下：
[0056] <!D0CTYPE html> <html> 〈head〉 <meta http-equiv="Content-Type" content="text/html; charset=utf-8f, /> <title></title> <meta charset="utf-8" /> </head> <body> <div>
[0057] 此di v标签为地图容器 </div> <div> 此div标签为饼图容器 </div> </body> </html>
[0058] 如上例所示，body标签即为全屏页面容器，两个div标签即为图表容器。
[0059]在步骤S150,所述全屏页面容器调用图表重绘尺寸接口，将所述图表控件的尺寸 拉伸至所述全屏页面容器的大小。
[0060]在示例性实施例中，图表重绘尺寸方法使所述图表控件的尺寸自适应其当前容器 的可执行方法，一般提供为javascript API。不同的图表框架有各自不同的实现。 javascript即为一种可嵌入在html内执行的脚本语言，通常在网页开发中都需要用。
[0061 ]例如：high charts 中为re flow 方法；echarts 中为resize 方法。high charts 及 echarts为第三方实现的javascript图表控件库。
[0062] API即为应用程序编程接口。如重绘方法ref low及resize，贝lj为highcharts及 echarts分别对外提供的重绘图表的API接口。
[0063]在网页全屏显示所述图表元素的同时，不隐藏所述移动终端的其它视图控件，也 不屏蔽所述网页视图控件的部分或全部功能。
[0064] 本发明实施例中，切换图表当前所处容器以达到全屏显示的效果。使用该方法全 屏显示图表前的效果如图2B所示。用户点击图2B中的右面图表中的方框标识的图表全屏按 钮后，图表会以该网页内的全屏尺寸显示(注意，此处并不是以终端屏幕的全屏尺寸显示）， 全屏显示图表后的效果如图2C所示。
[0065] 在示例性实施例中，在接收到进入全屏指令后，从终端获取所述网页视图控件相 对于所述图表控件中基准点的偏移量;根据所述获取的偏移量以及所述图表控件的宽和 高，将所述图表控件的界面拉伸至与所述网页视图控件的界面重合;其中，所述网页视图控 件用于网页内容显示，所述图表控件用于图表内容显示，以及所述图表控件在所述网页视 图控件中。其中，所述网页视图控件相对于所述图表控件中基准点的偏移量是从移动终端 浏览器内核中获取的。
[0066] 其中，所述网页视图控件基准点是网页视图控件的左上角顶点，所述图表控件的 基准点是图表控件的移动左上角顶点。所述偏移量包括X坐标值和Y坐标值，所述坐标值是 基于以所述图表控件的左上角为原点建立的坐标系确定的，以及根据所述获取的偏移量以 及所述网页视图控件的宽和高，将所述图表控件的界面边界拉伸至与所述网页视图控件的 边界重合包括:将所述图表控件的左上角顶点的坐标分别设置为所述偏移量中的X坐标值 和 Y坐标值；以及根据所设置的图表控件左上角顶点的坐标和宽高，在所述图表控件界面中 重新绘制所述图表控件界面。
[0067] 在示例性实施例中，还包括：当所述图表元素处于全屏状态时，将所述图表控件从 所述全屏页面容器中放入相应的图表容器中渲染;所述全屏页面容器调用所述图表重绘尺 寸接口，将所述图表控件的尺寸恢复至所述图表容器的大小。
[0068] 在接收到退出全屏指令后，从所述浏览器内核中获取当前所述图表控件的基准点 相对于拉伸前的所述图表控件的基准点的原始偏移量以及原始宽高值；以及根据当前所述 图表控件的基准点相对于拉伸前的所述图表控件的基准点的原始偏移量以及原始宽高值， 将所述图表控件在所述网页视图控件中的位置移回到拉伸前的位置并将所述图表控件的 宽高设置为原始宽高值。
[0069] 在示例性实施例中，还包括：当所述图表元素当前的全屏状态参数的值指示为非 全屏状态，在执行完拉伸操作全屏显示所述图表元素时，修改所述全屏状态参数的值指示 为全屏状态；当所述图表元素当前的全屏状态参数的值指示为全屏状态，在执行完恢复操 作非全屏显示所述图表元素时，修改所述全屏状态参数的值指示为非全屏状态。
[0070] 在示例性实施例中，还包括:检测所述浏览器的窗口尺寸是否发生变化;当所述浏 览器的窗口尺寸发生变化时，且所述图表元素处于全屏状态，所述全屏页面容器调用所述 图表重绘尺寸接口，将所述图表控件的尺寸拉伸至所述浏览器的窗口尺寸改变后的所述全 屏页面容器的大小。
[0071 ]在示例性实施例中，还包括:判断所述终端是否为移动设备；当所述终端是移动设 备时，判断所述移动设备是否处于竖屏状态；当所述移动设备处于竖屏状态时，且所述图表 元素处于全屏状态时，对所述图表元素的坐标执行图表坐标转换;所述全屏页面容器调用 所述图表重绘尺寸接口，用于将所述图表控件的尺寸拉伸至所述移动设备竖屏状态下的所 述全屏页面容器的大小。
[0072]图3A-3C示意性示出根据本发明示例实施方式的用于终端浏览器的网页中图表的 全屏显示方法的流程图。
[0073] 如图3A所示，在步骤S210,预先在网页中创建图表容器和全屏页面容器。
[0074]在步骤S220,浏览器主进程在当前网页的图表元素的指定位置处创建并显示图表 全屏按钮。
[0075] 在示例性实施例中，首先渲染所述图表全屏按钮到相应的图表元素的图表控件 中。
[0076] 在步骤S230,是否触发图表全屏按钮?如果没有检测到用户点击触发所述图表全 屏按钮，则跳转到步骤S270;如果检测到用户点击触发所述图表全屏按钮，则进入下一步。
[0077] 判断用户是否点击某一图表控件内的所述图表全屏按钮。
[0078] 在步骤S240,该图表元素是否为全屏状态?如果所述图表元素处于全屏状态，则跳 转到步骤S260;如果所述图表元素处于非全屏状态，则进入下一步。
[0079] 在步骤S250,将图表控件从相应的图表容器中放入该全屏页面容器中渲染，将图 表控件的尺寸拉伸至全屏页面容器的大小。
[0080] 如果所述图表元素当前处于非全屏状态，则在接收到用户点击所述图表全屏按钮 的触发操作时，将所述图表控件由原容器中放入所述全屏页面容器中渲染。
[0081] 在步骤S260,将图表控件从全屏页面容器中放入相应的图表容器中渲染，将图表 控件的尺寸恢复至图表容器的大小。
[0082] 如果所述图表元素当前处于全屏状态(如图3B所示），则在接收到用户点击所述图 表全屏按钮的触发操作时，将所述图表控件由全屏页面容器中放入原容器（即相应的图表 容器)中渲染。所述图表元素会恢复为非全屏状态，如图3C所示。
[0083] 在步骤S270,结束。
[0084] 本发明实施例中的其它内容参考上述实施例中的内容，在此不再赘述。
[0085] 图4A-4C示意性示出根据本发明示例实施方式的用于终端浏览器的网页中图表的 全屏显示方法的流程图。
[0086] 如图4A所示，在步骤S310,打开浏览器主进程和网页子进程，在网页子进程中打开 网页标签，并获取网页中图表元素的位置信息。
[0087] 在步骤S320，终端是否为移动设备?如果该终端是移动设备，则进入下一步;反之， 跳转到步骤S370。
[0088] 在步骤S330，该移动设备处于竖屏状态?如果所述移动设备处于竖屏状态，则进入 下一步;反之，跳转到步骤S370。
[0089] 在步骤S340，该图表元素是否为全屏状态?如果所述图表元素处于全屏状态，则进 入下一步;反之，跳转到步骤S370。
[0090] 在步骤S350，对图表元素的坐标执行图表坐标转换。
[0091] 在移动设备中，用户使用的设备通常处于竖屏状态。此时就需要进行图表坐标转 换。例如，
[0092] 当用户将所述移动设备从横屏状态切换为竖屏状态时，如果所述图表元素当前处 于竖屏状态，则需要首先将所述图表元素的坐标进行90度转换，使所述图表控件全屏后更 好地在竖屏状态下的移动设备中显示。
[0093] 在示例性实施例中，所述图表坐标转换可以使用CSS3的transform:rotate来实 现。但本发明并不以此为限。
[0094] CSS(Cascading StyleSheet)即层叠样式表，是一种可嵌入的html内执行的描述 标签样式的语言。在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜 色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改 变同一页面的不同部分，或者页数不同的网页的外观和格式。CSS3即为CSS的最新版本。 CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复 杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括:盒子模 型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等。
[0095]本发明实施例中的图表坐标90度转换方式，就可以使用CSS实现，语法为： transform:rotate(90deg)〇
[0096]如果用户的所述移动设备当前处于横屏状态，则无需坐标转换。
[0097]在步骤S360,全屏页面容器调用图表重绘尺寸接口，将图表控件的尺寸拉伸至移 动设备竖屏状态下的全屏页面容器的大小。
[0098]在执行完图表坐标转换操作后，此时图表尺寸还未自适应当前容器，须调用所述 图表重绘尺寸接口，使所述图表控件自适应当前所处容器（原容器或全屏页面容器）的大 小。完成了全屏显不图表。
[0099] 在步骤S370,结束。
[0100]在移动设备中全屏显示后，如手机当前处于竖屏状态，则会自动转换为竖屏显示。 例如，全屏显示如图4B(对应于上图2C)或者图4C所示(对应于上图3B)。
[0101] 在另一发明实施例中，当所述终端为PC时，也会有类似情况。例如：在用户触发所 述图表全屏按钮后，此时用户可以在PC端拖动浏览器窗口以改变浏览器窗口的大小。此时 如果所述图表全屏状态参数的值为"全屏"，由于浏览器窗口尺寸发生了变化，此时须要调 用所述图表重绘尺寸接口再次进行拉伸操作以使所述图表元素的尺寸适配改变了浏览器 窗口尺寸后的全屏页面容器的大小。具体实现方式可以为监听浏览器尺寸改变事件，在该 事件中触发上述操作。
[0102] 本发明实施例中的其它内容参考上述实施例中的内容，在此不再赘述。
[0103] 图5示意性示出根据本发明示例实施方式的用于终端浏览器的网页中的图表全屏 按钮的示意图。
[0104] 如图5所示，所述图表全屏按钮位于所述图表元素区域内的左上角。其中，所述图 表全屏按钮的形状为两个交叉的双向箭头(圆圈标识中的符号）。但本发明并不以此为限。
[0105] 在示例性实施例中，所述图表全屏按钮可以为所述图表元素区域内的某一个角。 例如，可以为图表的左上角、左下角、右上角、右下角，甚至，可以位于邻近与所述图表元素 的区域的周边区域。例如，所述图表全屏按钮可以为原点、空心圆圈、对号形、错号形等。
[0106] 在示例性实施例中，用户输入全屏指令或者输入退出全屏指令均以形状、位置相 同的所述图表全屏按钮并结合图表全屏状态参数来识别。在另一实施例中，也可以通过不 同形状和/或不同位置的按钮来分别指示全屏指令或者退出全屏指令。
[0107] 另外，关于用户输入全屏或者退出全屏指令的形式，可以有很多种，并不限于上述 的图表全屏按钮，也可以是其它可以达到相同目的的技术手段。例如，系统可以通过预先设 置的手势来其中，用户可以通过在任一图表上发出指定手势来控制终端从全屏显示模式切 换至非全屏显示模式，或者从非全屏显示模式切换至全屏显示模式。
[0108] 本发明实施例中的其它内容参考上述实施例中的内容，在此不再赘述。
[0109] 图6示意性示出根据本发明示例实施方式的用于终端浏览器的网页中图表的全屏 显示系统的框图。
[0110] 如图6所示，该系统包括:位置信息获取模块610,用于在所述终端浏览器中打开网 页标签，获取网页中图表元素的位置信息；创建全屏按钮模块620,用于根据所述图表元素 的位置信息，所述浏览器主进程在指定位置处创建并显示图表全屏按钮；第一判断模块 630，用于当接收到用户对所述图表全屏按钮的触发时，判断所述图表元素的状态是否为全 屏;第一渲染模块640,用于当所述图表元素处于非全屏状态时，将图表控件从相应的一图 表容器中放入一全屏页面容器中渲染;第一拉伸模块650,用于所述全屏页面容器调用图表 重绘尺寸接口，将所述图表控件的尺寸拉伸至所述全屏页面容器的大小。
[0111] 在示例性实施例中，还包括：图表容器创建模块，用于预先在网页中创建所述图表 容器，其中所述图表容器用于存放所述图表控件;全屏页面容器创建模块，用于预先在所述 网页中创建所述全屏页面容器，其中所述全屏页面容器用于存放图表全屏显示后的相应图 表控件，所述全屏显示是指所述图表元素以该网页的全屏尺寸显示。
[0112] 在示例性实施例中，还包括:第二渲染模块，用于当所述图表元素处于全屏状态 时，将所述图表控件从所述全屏页面容器中放入相应的图表容器中渲染;恢复模块，用于所 述全屏页面容器调用所述图表重绘尺寸接口，将所述图表控件的尺寸恢复至所述图表容器 的大小。
[0113] 在示例性实施例中，还包括:修改状态模块，用于当所述图表元素当前的全屏状态 参数的值指示为非全屏状态，在执行完拉伸操作全屏显示所述图表元素时，修改所述全屏 状态参数的值指示为全屏状态；当所述图表元素当前的全屏状态参数的值指示为全屏状 态，在执行完恢复操作非全屏显示所述图表元素时，修改所述全屏状态参数的值指示为非 全屏状态。
[0114] 在示例性实施例中，还包括:检测模块，用于检测所述浏览器的窗口尺寸是否发生 变化;第二拉伸模块，用于当所述浏览器的窗口尺寸发生变化时，且所述图表元素处于全屏 状态，所述全屏页面容器调用所述图表重绘尺寸接口，将所述图表控件的尺寸拉伸至所述 浏览器的窗口尺寸改变后的所述全屏页面容器的大小。
[0115] 在示例性实施例中，还包括:第二判断模块，用于判断所述终端是否为移动设备； 第三判断模块，用于当所述终端是移动设备时，判断所述移动设备是否处于竖屏状态;坐标 变换模块，用于当所述移动设备处于竖屏状态时，且所述图表元素当前处于全屏状态，对所 述图表元素执行坐标转换；第三拉伸模块，用于所述全屏页面容器调用所述图表重绘尺寸 接口，将所述图表控件的尺寸拉伸至所述移动设备竖屏状态下的所述全屏页面容器的大 小。
[0116] 本发明实施例中的模块对应上述方法实施例中的内容，在此不再详述。
[0117]本发明实施例还公开了一种终端设备，包括:处理器；用于存储处理器可执行指令 的存储器。
[0118] 其中，所述处理器被配置为:在所述终端设备的浏览器中打开网页标签，获取网页 中图表元素的位置信息;根据所述图表元素的位置信息，在指定位置处创建并显示图表全 屏按钮；当接收到用户对所述图表全屏按钮的触发时，判断所述图表元素的状态是否为全 屏；当所述图表元素处于非全屏状态时，将图表控件从相应的一图表容器中放入一全屏页 面容器中渲染;所述全屏页面容器调用图表重绘尺寸接口，将所述图表控件的尺寸拉伸至 所述全屏页面容器的大小。
[0119] 例如，所述终端设备可以是智能手机，计算机，数字广播终端，消息收发设备，游戏 控制台，平板设备，医疗设备，健身设备，个人数字助理等。
[0120] 在示例性实施例，所述处理器还被配置为:判断所述终端设备是否为移动设备；当 所述终端设备是移动设备时，判断所述移动设备是否处于竖屏状态；当所述移动设备处于 竖屏状态时，且所述图表元素处于全屏状态时，对所述图表元素的坐标执行图表坐标转换； 所述全屏页面容器调用所述图表重绘尺寸接口，用于将所述图表控件的尺寸拉伸至所述移 动设备竖屏状态下的所述全屏页面容器的大小。
[0121] 所述终端设备可以包括以下一个或多个组件：处理组件，存储器，电源组件，多媒 体组件，音频组件，输入/输出（I/O)的接口，传感器组件，以及通信组件。
[0122] 处理组件通常控制所述终端设备的整体操作，诸如与显示，数据通信，相机操作和 记录操作相关联的操作。处理组件可以包括一个或多个处理器来执行指令，以完成上述的 方法的全部或部分步骤。此外，处理组件可以包括一个或多个模块，便于处理组件和其他组 件之间的交互。例如，处理组件可以包括多媒体模块，以方便多媒体组件和处理组件之间的 交互。
[0123] 存储器被配置为存储各种类型的数据以支持在设备的操作。这些数据的示例包括 用于在所述终端设备上操作的任何应用程序或方法的指令，消息，图片，视频等。存储器可 以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器 (SRAM)，电可擦除可编程只读存储器(EEPR0M)，可擦除可编程只读存储器(EPROM)，可编程 只读存储器(PR0M)，只读存储器(ROM)，磁存储器，快闪存储器，磁盘或光盘。
[0124] 电源组件为所述终端设备的各种组件提供电力。电源组件可以包括电源管理系 统，一个或多个电源，及其他与为所述终端设备生成、管理和分配电力相关联的组件。
[0125] 多媒体组件包括在所述所述终端设备和用户之间的提供一个输出接口的屏幕。在 一些实施例中，屏幕可以包括液晶显示器(LCD)和触摸面板(TP)。如果屏幕包括触摸面板， 屏幕可以被实现为触摸屏，以接收来自用户的输入信号。触摸面板包括一个或多个触摸传 感器以感测触摸、滑动和触摸面板上的手势。所述触摸传感器可以不仅感测触摸或滑动动 作的边界，而且还检测与所述触摸或滑动操作相关的持续时间和压力。在一些实施例中，多 媒体组件包括一个前置摄像头和/或后置摄像头。当终端设备处于操作模式，如拍摄模式或 视频模式时，前置摄像头和/或后置摄像头可以接收外部的多媒体数据。每个前置摄像头和 后置摄像头可以是一个固定的光学透镜系统或具有焦距和光学变焦能力。
[0126] 音频组件被配置为输出和/或输入音频信号。例如，音频组件包括一个麦克风 (MIC)，当所述终端设备处于操作模式，如呼叫模式、记录模式和语音识别模式时，麦克风被 配置为接收外部音频信号。所接收的音频信号可以被进一步存储在存储器或经由通信组件 发送。在一些实施例中，音频组件还包括一个扬声器，用于输出音频信号。
[0127] I/O接口为处理组件和外围接口模块之间提供接口，上述外围接口模块可以是键 盘，点击轮，按钮等。这些按钮可包括但不限于:主页按钮、音量按钮、启动按钮和锁定按钮。
[0128] 传感器组件包括一个或多个传感器，用于为所述终端设备提供各个方面的状态评 估。例如，传感器组件可以检测到设备的打开/关闭状态，组件的相对定位，例如所述组件为 所述终端设备的显示器和小键盘，传感器组件还可以检测所述终端设备或所述终端设备一 个组件的位置改变，用户与所述终端设备接触的存在或不存在，所述终端设备方位或加速/ 减速和所述终端设备的温度变化。传感器组件可以包括接近传感器，被配置用来在没有任 何的物理接触时检测附近物体的存在。传感器组件还可以包括光传感器，如CMOS或CCD图像 传感器，用于在成像应用中使用。在一些实施例中，该传感器组件还可以包括加速度传感 器，陀螺仪传感器，磁传感器，压力传感器或温度传感器。
[0129] 通信组件被配置为便于所述终端设备和其他设备之间有线或无线方式的通信。所 述终端设备可以接入基于通信标准的无线网络，如WiFi，2G或3G，或它们的组合。在一个示 例性实施例中，通信组件经由广播信道接收来自外部广播管理系统的广播信号或广播相关 信息。在一个示例性实施例中，所述通信组件还包括近场通信(NFC)模块，以促进短程通信。 例如，在NFC模块可基于射频识别（RFID)技术，红外数据协会（IrDA)技术，超宽带(UWB)技 术，蓝牙(BT)技术和其他技术来实现。
[0130]此外，根据本发明的方法还可以被实现为由CPU执行的计算机程序。在该计算机程 序被CPU执行时，执行本发明的方法中限定的上述功能。此外，上述方法步骤以及系统单元 也可以利用控制器以及用于存储使得控制器实现上述步骤或单元功能的计算机程序的计 算机可读存储设备实现。
[0131 ]本发明实施例中的其它内容参考上述实施例中的内容，在此不再赘述。
[0132] 图7A-7C示意性示出现有的用于终端浏览器的网页中图表的全屏显示方法的流程 图。
[0133] 现有的在网页端实现全屏的技术方案通常为使用javascript调用 html5fullScreen API，使得网页中某个元素（比如图表控件）以整个终端的尺寸全屏显示， 可以参考如图7A中的网页示例。
[0134] 如图7A所示，点击该网页中的图片，该图片会以整个终端的尺寸显示，效果如图7B 所示。
[0135] 采用这种方案，用户在退出全屏前不可以做其它操作（比如在PC端拖动改变浏览 器尺寸或最小化浏览器;在手机端切换至其它APP等等）；在执行全屏及退出全屏时无法插 入一些动画效果;在移动设备竖屏状态下不会自适应以横屏全屏显示，而是图片上下会出 现黑色部分，如图7C所示。
[0136] 这种以html5fullScreen API方式实现的全屏对用户终端的浏览器版本及手机版 本有限制，一些稍旧的浏览器(比如IE9)或移动设备（比如部分安卓4.2版手机)无法用这种 方式执行全屏。
[0137] 其中，html5fullscreen API即为html5提供的全屏javascript API。
[0138] 本领域技术人员还将明白的是，结合这里的公开所描述的各种示例性逻辑块、单 元、电路和算法步骤可以被实现为电子硬件、计算机软件或两者的组合。为了清楚地说明硬 件和软件的这种可互换性，已经就各种示意性组件、方块、单元、电路和步骤的功能对其进 行了一般性的描述。这种功能是被实现为软件还是被实现为硬件取决于具体应用以及施加 给整个系统的设计约束。本领域技术人员可以针对每种具体应用以各种方式来实现所述的 功能，但是这种实现决定不应被解释为导致脱离本发明的范围。
[0139] 结合这里的公开所描述的各种示例性逻辑块、单元和电路可以利用被设计成用于 执行这里所述功能的下列部件来实现或执行:通用处理器、数字信号处理器(DSP)、专用集 成电路(ASIC)、现场可编程门阵列(FPGA)或其它可编程逻辑器件、分立门或晶体管逻辑、分 立的硬件组件或者这些部件的任何组合。通用处理器可以是微处理器，但是可替换地，处理 器可以是任何传统处理器、控制器、微控制器或状态机。处理器也可以被实现为计算设备的 组合，例如，DSP和微处理器的组合、多个微处理器、一个或多个微处理器结合DSP核、或任何 其它这种配置。
[0140] 上述所有可选技术方案，可以采用任意结合形成本发明的可选实施例，在此不再 --赘述。
[0141] 图1、2和3示出根据本发明示例实施方式的用于终端浏览器的网页中图表的全屏 显示方法的流程图。该方法可例如利用如图4或5所示的用于终端浏览器的网页中图表的全 屏显示系统实现，但本发明不限于此。需要注意的是，图1、2和3仅是根据本发明示例实施方 式的方法所包括的处理的示意性说明，而不是限制目的。易于理解，图1、2和3所示的处理并 不表明或限制这些处理的时间顺序。另外，也易于理解，这些处理可以是例如在多个模块/ 进程/线程中同步或异步执行的。
[0142] 本发明公开的用于终端浏览器的网页中图表的全屏显示方法及系统，通过将图表 控件在图表容器和全屏页面容器之间的切换，可以实现图表以网页的全屏大小显示，这样， 用户在退出全屏前可做任意操作，如缩放浏览器大小、最小化浏览器等;在执行全屏及退出 全屏时可以再插入一些特效动画，如在图表原始容器内以逐渐变大的效果切换至全屏显 示;该方案可以支持一些较旧的浏览器及移动设备，如IE6-10,安卓4.0-4.2等。此外，通过 针对移动设备横竖屏状态切换时的坐标转换，使得移动设备竖屏状态下会自动变为竖屏全 屏显示。使图表可支持全屏查看，全屏后也可支持取消全屏；图表全屏查看支持针对移动设 备优化。图表可全屏查看后，用户可以更方便地查看自己最关注的数据。用户在会议等公共 场合显示图表数据时，可以使观众看得更直观。使用移动设备的用户也可以更好地查看图 表数据。
[0143] 本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本发明的其 它实施方案。本申请旨在涵盖本发明的任何变型、用途或者适应性变化，这些变型、用途或 者适应性变化遵循本发明的一般性原理并包括本发明未公开的本技术领域中的公知常识 或惯用技术手段。说明书和实施例仅被视为示例性的，本发明的真正范围和精神由下面的 权利要求指出。
[0144] 以上具体地示出和描述了本发明的示例性实施方式。应可理解的是，本发明不限 于这里描述的详细结构、设置方式或实现方法;相反，本发明意图涵盖包含在所附权利要求 的精神和范围内的各种修改和等效设置。
【主权项】
1. 一种用于终端浏览器的网页中图表的全屏显示方法，其特征在于，包括： 在所述终端浏览器中打开网页标签，获取网页中图表元素的位置信息； 根据所述图表元素的位置信息，在指定位置处创建并显示图表全屏按钮； 当接收到用户对所述图表全屏按钮的触发时，判断所述图表元素的状态是否为全屏； 当所述图表元素处于非全屏状态时，将图表控件从相应的一图表容器中放入一全屏页 面容器中渲染； 所述全屏页面容器调用图表重绘尺寸接口，将所述图表控件的尺寸拉伸至所述全屏页 面容器的大小。2. 根据权利要求1所述的方法，其特征在于，还包括： 预先在网页中创建所述图表容器，其中所述图表容器用于存放所述图表控件； 预先在所述网页中创建所述全屏页面容器，其中所述全屏页面容器用于存放图表全屏 显示后的相应图表控件，所述全屏显示是指所述图表元素以该网页的全屏尺寸显示。3. 根据权利要求1所述的方法，其特征在于，还包括： 当所述图表元素处于全屏状态时，将所述图表控件从所述全屏页面容器中放入相应的 图表容器中植染； 所述全屏页面容器调用所述图表重绘尺寸接口，将所述图表控件的尺寸恢复至所述图 表容器的大小。4. 根据权利要求1所述的方法，其特征在于，还包括： 检测所述浏览器的窗口尺寸是否发生变化； 当所述浏览器的窗口尺寸发生变化时，且所述图表元素处于全屏状态，所述全屏页面 容器调用所述图表重绘尺寸接口，将所述图表控件的尺寸拉伸至所述浏览器的窗口尺寸改 变后的所述全屏页面容器的大小。5. 根据权利要求1所述的方法，其特征在于，还包括： 判断所述终端是否为移动设备； 当所述终端是移动设备时，判断所述移动设备是否处于竖屏状态； 当所述移动设备处于竖屏状态时，且所述图表元素处于全屏状态时，对所述图表元素 的坐标执行图表坐标转换； 所述全屏页面容器调用所述图表重绘尺寸接口，用于将所述图表控件的尺寸拉伸至所 述移动设备竖屏状态下的所述全屏页面容器的大小。6. 根据权利要求3所述的方法，其特征在于，其中所述判断所述图表元素的状态是否为 全屏或者非全屏包括： 根据所述全屏页面容器中的一图表全屏状态参数的预设值来判断所述图表元素的状 态为全屏状态或者非全屏状态。7. 根据权利要求6所述的方法，其特征在于，还包括： 当所述图表元素当前的全屏状态参数的值指示为非全屏状态，在执行完拉伸操作全屏 显示所述图表元素时，修改所述全屏状态参数的值指示为全屏状态； 当所述图表元素当前的全屏状态参数的值指示为全屏状态，在执行完恢复操作非全屏 显示所述图表元素时，修改所述全屏状态参数的值指示为非全屏状态。8. 根据权利要求1所述的方法，其特征在于，其中所述图表全屏按钮内嵌于所述图表容 器中，当用户点击所述图表全屏按钮时，切换所述图表元素以全屏或者非全屏状态显示。9. 根据权利要求1所述的方法，其特征在于，其中所述指定位置为： 所述图表元素区域内任一位置;或者 为所述图表元素边缘处一位置。10. -种用于终端浏览器的网页中图表的全屏显示系统，其特征在于，包括： 位置信息获取模块，用于在所述终端浏览器中打开网页标签，获取网页中图表元素的 位置信息； 创建全屏按钮模块，用于根据所述图表元素的位置信息，所述浏览器主进程在指定位 置处创建并显示图表全屏按钮； 第一判断模块，用于当接收到用户对所述图表全屏按钮的触发时，判断所述图表元素 的状态是否为全屏； 第一渲染模块，用于当所述图表元素处于非全屏状态时，将图表控件从相应的一图表 容器中放入一全屏页面容器中渲染； 第一拉伸模块，用于所述全屏页面容器调用图表重绘尺寸接口，将所述图表控件的尺 寸拉伸至所述全屏页面容器的大小。11. 根据权利要求10所述的系统，其特征在于，还包括： 图表容器创建模块，用于预先在网页中创建所述图表容器，其中所述图表容器用于存 放所述图表控件； 全屏页面容器创建模块，用于预先在所述网页中创建所述全屏页面容器，其中所述全 屏页面容器用于存放图表全屏显示后的相应图表控件，所述全屏显示是指所述图表元素以 该网页的全屏尺寸显示。12. 根据权利要求10所述的系统，其特征在于，还包括： 第二渲染模块，用于当所述图表元素处于全屏状态时，将所述图表控件从所述全屏页 面容器中放入相应的图表容器中渲染； 恢复模块，用于所述全屏页面容器调用所述图表重绘尺寸接口，将所述图表控件的尺 寸恢复至所述图表容器的大小。13. 根据权利要求12所述的系统，其特征在于，还包括： 修改状态模块，用于当所述图表元素当前的全屏状态参数的值指示为非全屏状态，在 执行完拉伸操作全屏显示所述图表元素时，修改所述全屏状态参数的值指示为全屏状态； 当所述图表元素当前的全屏状态参数的值指示为全屏状态，在执行完恢复操作非全屏显示 所述图表元素时，修改所述全屏状态参数的值指示为非全屏状态。14. 根据权利要求10所述的系统，其特征在于，还包括： 检测模块，用于检测所述浏览器的窗口尺寸是否发生变化； 第二拉伸模块，用于当所述浏览器的窗口尺寸发生变化时，且所述图表元素处于全屏 状态，所述全屏页面容器调用所述图表重绘尺寸接口，将所述图表控件的尺寸拉伸至所述 浏览器的窗口尺寸改变后的所述全屏页面容器的大小。15. 根据权利要求10所述的系统，其特征在于，还包括： 第二判断模块，用于判断所述终端是否为移动设备； 第三判断模块，用于当所述终端是移动设备时，判断所述移动设备是否处于竖屏状态； 坐标变换模块，用于当所述移动设备处于竖屏状态时，且所述图表元素当前处于全屏 状态，对所述图表元素执行坐标转换； 第三拉伸模块，用于所述全屏页面容器调用所述图表重绘尺寸接口，将所述图表控件 的尺寸拉伸至所述移动设备竖屏状态下的所述全屏页面容器的大小。16. -种终端设备，其特征在于，包括： 处理器； 用于存储处理器可执行指令的存储器； 其中，所述处理器被配置为： 在所述终端设备的浏览器中打开网页标签，获取网页中图表元素的位置信息； 根据所述图表元素的位置信息，在指定位置处创建并显示图表全屏按钮； 当接收到用户对所述图表全屏按钮的触发时，判断所述图表元素的状态是否为全屏； 当所述图表元素处于非全屏状态时，将图表控件从相应的一图表容器中放入一全屏页 面容器中渲染； 所述全屏页面容器调用图表重绘尺寸接口，将所述图表控件的尺寸拉伸至所述全屏页 面容器的大小。17. 根据权利要求16所述的终端设备，其特征在于，其中，所述处理器还被配置为： 判断所述终端设备是否为移动设备； 当所述终端设备是移动设备时，判断所述移动设备是否处于竖屏状态； 当所述移动设备处于竖屏状态时，且所述图表元素处于全屏状态时，对所述图表元素 的坐标执行图表坐标转换； 所述全屏页面容器调用所述图表重绘尺寸接口，用于将所述图表控件的尺寸拉伸至所 述移动设备竖屏状态下的所述全屏页面容器的大小。
【文档编号】G06F17/30GK105893602SQ201610252215
【公开日】2016年8月24日
【申请日】2016年4月21日
【发明人】周涛
【申请人】北京京东尚科信息技术有限公司, 北京京东世纪贸易有限公司