CN111078785B - 一种数据可视化展示的方法、装置、电子设备及存储介质 - Google Patents

Abstract

本申请公开了一种数据可视化展示方法、装置、电子设备和存储介质，具体包括：确定浏览器页面中需要全屏展示的数据可视化页面元素；将数据可视化页面元素的原页面样式更改为满铺模式；利用浏览器内核中的全屏显示方法隐藏页面头部区；将页面显示区全屏化并实现数据可视化页面元素的全屏展示。由于已经将数据可视化页面元素的原页面样式修改为满铺模式，占满了整个页面显示区，数据可视化页面元素也会随之全屏化，那么数据可视化页面元素在整个显示屏幕中全屏展示，更为突出醒目，满足了公众场所用户的浏览需求，提高了用户体验。

Description

一种数据可视化展示的方法、装置、电子设备及存储介质

技术领域

本申请涉及互联网技术领域，尤其涉及一种数据可视化展示的方法、装置、电子设备及存储介质。

背景技术

随着信息技术的发展，服务方通常会统计大量的数据，并将统计结果展示出来，为用户提供感兴趣的或者有价值的信息。数据可视化技术是关于数据视觉表现形式的技术，允许利用图形、图像处理、计算机视觉以及用户界面，通过表达、建模以及对立体、表面、属性以及动画的显示，对数据加以可视化解释。在实际应用中，可以将数据保存在服务器端，客户端将数据的计算结果通过转换成视觉表现形式，并通过浏览器页面展示出来。这些通过浏览器页面展示出来的具有视觉表现形式的数据，也属于浏览器页面的页面元素。这些页面元素也可称为数据可视化页面元素。

但现有的数据可视化技术中，数据可视化页面元素仅占页面显示区域的一小部分区域，显示不够醒目，在某些公众场所可能无法满足用户的浏览需求。

发明内容

针对上述现有技术，本发明实施例公开一种数据可视化展示的方法，可以克服数据可视化页面元素显示不醒目的缺陷，达到突出显示，满足用户浏览需求的目的。

鉴于此，本申请实施例提出一种数据可视化展示的方法，该方法包括：

确定浏览器页面中需要全屏展示的数据可视化页面元素，所述数据可视化页面元素是利用数据可视化方法得到且作为浏览器页面中的页面元素所展示的信息，所述浏览器页面包括页面头部区和页面显示区；

将所述数据可视化页面元素的原页面样式更改为满铺模式；

利用浏览器内核中的全屏显示方法隐藏所述页面头部区；

将所述页面显示区全屏化，并根据所述满铺模式实现所述数据可视化页面元素的全屏展示。

进一步地，

所述利用浏览器内核中的全屏显示方法隐藏页面头部区的步骤包括：

获取浏览器内核的类型；

根据获取的浏览器内核的类型调用相应的浏览器内核中的全屏显示方法；

执行所述全屏显示方法以隐藏页面头部区。

进一步地，

当监听到恢复页面请求事件，该方法进一步包括：

将所述数据可视化页面元素的为所述满铺模式的页面样式重新恢复为所述原页面样式；

利用所述浏览器内核中的全屏取消方法显示出所述页面头部区。

进一步地，

在所述确定浏览器页面中需要全屏展示的数据可视化页面元素的步骤之前，该方法进一步包括：建立与服务器端之间的长链接；

在所述服务器端的数据更新时，该方法进一步包括：

通过所述长链接获取更新的数据；

利用所述数据可视化方法将所述更新的数据处理为新的数据可视化页面元素；

用所述新的数据可视化页面元素替换所述数据可视化页面元素。

本发明实施例还公开一种数据可视化展示的装置，可以克服数据可视化页面元素显示不醒目的缺陷，达到突出显示，满足用户浏览需求的目的。

具体的，本申请实施例提供的一种数据可视化展示的装置包括：

全屏展示确定单元，用于确定浏览器页面中需要全屏展示的数据可视化页面元素，所述数据可视化页面元素是利用数据可视化方法得到且作为浏览器页面中的页面元素所展示的信息，所述浏览器页面包括页面头部区和页面显示区；

页面样式设置单元，用于将所述数据可视化页面元素的原页面样式更改为满铺模式；

头部隐藏单元，用于利用浏览器内核中的全屏显示方法隐藏所述页面头部区；

全屏展示单元，用于将所述页面显示区全屏化，并根据所述满铺模式实现所述数据可视化页面元素的全屏展示。

进一步地，

所述头部隐藏单元包括：

内核类型获取单元，用于获取浏览器内核的类型；

全屏方法调用单元，用于根据获取的浏览器内核的类型调用相应的浏览器内核中的全屏显示方法；

全屏方法执行单元，用于执行所述全屏显示方法以隐藏页面头部区。

进一步地，

该装置进一步包括监听单元、样式恢复单元和全屏取消单元；

所述监听单元，用于监听到恢复页面请求事件，并触发样式恢复单元；

所述样式恢复单元，用于将所述数据可视化页面元素的为所述满铺模式的页面样式重新恢复为所述原页面样式；

所述全屏取消单元，利用所述浏览器内核中的全屏取消方法显示出所述页面头部区。

进一步地，

该装置进一步包括长链接建立单元、数据获取单元、数据可视化页面元素生成单元和替换单元；

所述长链接建立单元，用于建立与服务器端之间的长链接；

所述数据获取单元，用于通过所述长链接获取更新的数据；

所述数据可视化页面元素生成单元，利用所述数据可视化方法将所述更新的数据处理为新的数据可视化页面元素；

所述替换单元，利用所述新的数据可视化页面元素替换所述数据可视化页面元素。

本申请还提供一种计算机可读存储介质的实施例，其上存储有计算机指令，其特征在于，所述指令被处理器执行时可实现上述任一项所述的数据可视化展示方法的步骤。

本申请还提供一种数据可视化展示的电子设备，该电子设备包括：

处理器；

用于存储所述处理器可执行指令的存储器；

所述处理器，用于从所述存储器中读取所述可执行指令，并执行所述指令以实现上述任一项所述的数据可视化展示方法。

综上所述，本申请实施例将数据可视化页面元素的原页面样式修改为满铺模式，利用浏览器内核中全屏显示方法隐藏页面头部区，触发页面显示区占满整个显示屏幕，也随之使得数据可视化页面元素全屏化。正是由于实现了数据可视化页面元素的全屏化，其显示更为醒目、突出，极大满足了用户的浏览需求，提高用户体验。

附图说明

为了更清楚地说明本申请实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1是本申请实施例的应用场景100的示例图。

图2是显示屏幕103所展示出来的浏览器页面200的示例图。

图3是本申请一实施例实现数据可视化展示的方法300的流程图。

图4是本申请另一实施例实现数据可视化展示的方法400的流程图。

图5是步骤402执行后在浏览器页面上呈现的效果示意图。

图6是数据可视化页面元素105全屏展示的效果示意图。

图7是本申请实施例中数据可视化页面元素退出全屏展示的方法700的流程图。

图8是本申请实施例中对数据可视化页面元素进行更新的方法800的流程图。

图9是本申请实施例中更新后的数据可视化页面元素105′全屏展示的效果示意图。

图10是本申请一实施例种数据可视化展示的装置1000的内部结构示意图。

图11是本申请另一实施例种数据可视化展示的装置2000的内部结构示意图。

图12是本申请实施例中电子设备的内部结构示意图。

具体实施方式

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

本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”、“第三”、“第四”等(如果存在)是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本发明的实施例例如能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含。例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其他步骤或单元。

下面以具体实施例对本发明的技术方案进行详细说明。下面几个具体实施例可以相互结合，对于相同或相似的概念或过程可能在某些实施例不再赘述。

针对现有技术中数据可视化页面元素仅占有页面显示区域一小部分区域，显示不醒目，无法满足公众场所用户浏览需求的缺陷，本申请实施例提出一种数据可视化展示的方法，将数据可视化页面元素进行全屏展示，扩大显示区域，从而用户浏览需求。

图1是本申请实施例的应用场景100的示例图。如图1所示，该场景100包括服务器端101、客户端102以及显示屏幕103。其中，服务器端101提供服务数据，客户端102根据提供的服务数据进行计算，将计算结果转换成视觉表现形式，并通过浏览器在显示屏幕103中展示出来。这里的显示屏幕103实际上是作为客户端102一侧的输出装置，比如是在某个交易中心大厅的大屏幕显示器。图2是显示屏幕103所展示出来的浏览器页面200的示例图。

图3是本申请实施例实现数据可视化展示的方法300的流程图。如图3所示，该方法包括：

步骤301：确定浏览器页面中需要全屏展示的数据可视化页面元素，所述数据可视化页面元素是利用数据可视化方法得到且作为浏览器页面中的页面元素所展示的信息，所述浏览器页面包括页面头部区和页面显示区。

如图2所示，显示屏幕103包括边缘外框1033和显示部分1034，在主要浏览器页面通常包括页面头部区1031和页面显示区1032。其中，页面头部区1031是指浏览器页面顶部显示的区域，比如可以包括标题栏、地址栏、菜单栏、收藏夹栏等等，属于浏览器页面中固有的功能控制部分。页面显示区1032是指需要给提供给用户浏览的与数据内容相关的部分。在不同的浏览器页面中，显示的页面头部区1031通常是相同，而页面显示区1032的内容则通常是不相同的。当然，图2所示的浏览器页面仅仅是一个示例，实际应用中可能会有不同的浏览器页面的外观展示，并不能用于限制本申请保护的范围。

如前所述，为了便于将大量的数据提供给用户参考，可以将数据进行可视化技术处理，将数据计算结果转换成视觉表现形式进行表达，即采用“数据可视化页面元素”表达。在创建浏览器页面过程中，通常会创建不同的页面元素提供给用户，比如文字、图片、音频、动画、视频等等，再按照一定的排版要求将这些页面元素整合起来形成完整的浏览器页面。因此，“数据可视化页面元素”也属于一种页面元素，具体地可以为柱状图、折线图、饼图等图表。当然，“数据可视化页面元素”还可以采用方式表达，只要能够充分体现数据含义即可。

考虑到“数据可视化页面元素”属于一种页面元素，因此后续步骤可以采用符合页面元素的方法对其进行处理。

步骤302：将数据可视化页面元素的原页面样式更改为满铺模式。

在创建浏览器页面元素的过程中，可以设置页面元素的页面样式。页面样式是指页面元素呈现的外观描述，比如规定了如何在页面中布局。本申请实施例中，为了后续将数据可视化页面元素进行全屏化展示，这里先将其页面样式设置为满铺模式。在本申请实施例中，满铺模式是指占满整个页面显示区域的模式。需要注意的是，这里的数据可视化页面元素仅占满整个页面显示区域1032，并没有占满整个显示屏幕103实现全屏化。

步骤303：利用浏览器内核中的全屏显示方法隐藏页面头部区；

步骤304：将所述页面显示区全屏化，并根据所述满铺模式实现所述数据可视化页面元素的全屏化。

上述步骤303～304是将数据可视化页面元素全屏化的具体方法。由于利用浏览器内核中的全屏显示方法将页面头部区1031进行了隐藏，这将自动触发页面显示区1032占满整个显示屏幕103。进一步的，由于已经将数据可视化页面元素的原页面样式修改为满铺模式，占满了整个页面显示区1032，那么在页面显示区1032全屏化时，数据可视化页面元素也会随之全屏化。这样，由于数据可视化页面元素实现了全屏化，在整个显示屏幕103中全屏展示，从而更为突出、醒目，满足了公众场所用户的浏览需求，提高了用户体验。

为了更好地说明本申请方案，下面用另一个较佳实施例进行详细描述。

本实施例的应用场景仍然可以参见图1，并假设服务器端101为某个房产交易中心的服务器，客户端102为该房产交易中心的客户端，显示屏幕103为该房产交易中心大厅的大屏幕。

图4是本申请实施例实现数据可视化展示的方法400的流程图。如图4所示，该方法包括：

步骤401：建立与服务器端之间的长链接(websocket)，并通过建立的长链接从服务器端获取数据。

实际应用中，客户端102需要从服务器端101中获取数据，就需要事先建立数据传输通道。本申请实施例中，为了能够及时获取服务器端101中数据的更新情况，可以在客户端102和服务器端101之间建立长链接。一旦建立长链接，可以一直保持而不必将其关闭。这样，此后当服务器端101中的数据发生变化时，可以主动推送给客户端102。客户端102在不刷新页面的情况下，可以实时更新数据可视化页面元素。当然，客户端102也可以采用其他方式与服务器端101建立数据传输通道，不一定限制于websocket方式。

步骤402：根据获取的数据生成数据可视化页面元素并通过浏览器页面展示。

本步骤可以利用现有的数据可视化技术实现，将数据计算结果转换为具有视觉表现形式，比如柱状图、折线图、饼图、散点图等等。至于如何转换以及转换为哪种形式可以由应用本申请实施例方案的用户自行确定，此处不再赘述。

假设图5是本步骤402执行后在浏览器页面上呈现的效果示意图。如图5所示，显示屏幕103包括边缘外框1033和显示部分1034。在显示部分1034中显示了浏览器页面，包括页面头部区1031和页面显示区1032，页面显示区1032中包括3个页面元素，即：用于触发用于全屏显示的控件按钮104、数据可视化页面元素105以及侧边栏106。此时，数据可视化页面元素105用柱状图和饼图表示数据统计结果。从图5可以可知，在全屏显示之前，数据可视化页面元素仅占页面显示区1032的一小部分区域。后续步骤将对数据可视化页面元素105进行全屏化展示。

步骤403：确定浏览器页面中需要全屏展示的数据可视化页面元素，所述数据可视化页面元素是利用数据可视化方法得到且作为浏览器页面中的页面元素所展示的信息，所述浏览器页面包括页面头部区和页面显示区。

这里，如图5所示的数据可视化页面元素105就是步骤402中采用数据可视化方法生成的，并作为浏览器页面中页面元素显示出来。实际应用中，可以采用点击或者圈定相应的数据可视化页面元素，或者点击事先设置的控件按钮来确定需要全屏展示的数据可视化页面元素。本实施例中，可以点击浏览器页面中标有“全屏显示”字样的控件按钮104，确定数据可视化页面元素105作为需要全屏展示的对象，将其进行全屏化。

步骤404：将所述数据可视化页面元素的原页面样式更改为满铺模式。

本领域技术人员知道，在构建浏览器页面时可以设置页面样式以规范页面元素的外观。在图5中，不管数据可视化页面元素105的原页面样式是什么，这里都可以强制更改为满铺模式，使其占满整个页面显示区1032。

实际应用中，可以通过如下方式设置满铺模式。比如：

1)将数据可视化页面元素的层级设置为最高级。本领域技术人员知道，在渲染浏览器页面时需要考虑其中各个页面元素的层级，高层级的元素会遮挡低层级的元素。在图5的示例中，假设“z-index”表示数据可视化页面元素105的层级，为了保证数据可视化页面元素105不被其他元素遮挡，可以将其设置为最高级，比如“z-index＝1000”。

2)将数据可视化元素的最高顶点设置为显示页面所在像素行的第一行。在图5的示例中，假设“top”表示数据可视化页面元素105的最高顶点所在的像素行，为了保证满铺，可以将其设置为“top＝0”。其中，“0”表示显示页面1032所在像素行的第一行。

3)将数据可视化元素的最左起始点设置为显示页面所在像素列的第一列。在图5的示例中，假设“left”表示数据可视化页面元素105最左起始点所在的像素列，为了保证满铺，可以将其设置为“left＝0”。其中，“0”表示显示页面1032所在像素列的第一列。

4)将数据可视化元素的宽度设置为显示页面的最大宽度。在图5的示例中，假设“width”表示数据可视化页面元素105的宽度，为了保证满铺，可以将其设置为“width＝100％”。其中“100％”表示显示页面1032的最大宽度。

5)将数据可视化元素的高度设置为显示页面的最大高度。在图5的示例中，假设“height”表示数据可视化页面元素105的高度，为了保证满铺，可以将其设置为“height＝100vh”。其中“100vh”表示显示页面1032的所能达到的最大高度。

本申请实施例利用上述步骤1)～5)可以将数据可视化页面元素105的页面样式设置为满铺模式。另外，还可以在页面样式中设置数据可视化页面元素105外观的其他方面，比如设置背景色，此处不再赘述。

步骤405：获取浏览器内核的类型。

步骤406：根据获取的浏览器内核的类型调用相应的浏览器内核中的全屏显示方法。

步骤407：执行所述全屏显示方法以隐藏页面头部区。

上述步骤405～407描述了如何隐藏页面头部区，即上述实施例步骤303的具体实现方法。实际应用中存在不同类型的浏览器，比如谷歌浏览器、微软浏览器、火狐浏览器、欧朋浏览器等，分别具有谷歌浏览器内核、微软浏览器内核、火狐浏览器内核以及欧朋浏览器内核。这些不同的浏览器内核都分别有自身的全屏显示方法，比如requestFullscreen方法、msRequestFullscreen方法、mozRequestFullScreen方法以及webkitRequestFullscreen方法。

为了适应不同浏览器内核的类型，本申请实施例先判断浏览器内核的类型，再调用相应浏览器内核中的全屏显示方法，使得本申请实施例的方案能被不同的浏览器兼容，实现方案的无差化。

步骤408：将所述页面显示区全屏化，并根据所述满铺模式实现所述数据可视化页面元素的全屏化。

与上述实施例相同，由于隐藏了页面头部区，浏览器的页面显示区将自动全屏化，铺满模式的可视化页面元素也随之全屏化。仍然以图5为例，假设点击了“全屏显示”字样的控件按钮104，确定数据可视化页面元素105作为需要全屏展示的对象。那么，在执行步骤405～步骤408之后，数据可视化页面元素105全屏展示的效果如图6所示。从图6可以看到，页面头部区1031已经被隐藏，显示部分1034已经被页面显示区1032占满。由于数据可视化页面元素105是满铺模式，此时整个显示部分1034中仅显示数据可视化页面元素105，即实现了数据可视化页面元素105的全屏化。

应用本申请实施例方案，由于利用浏览器内核中的全屏显示方法将页面头部区1031进行了隐藏，并将数据可视化页面元素的原页面样式修改为满铺模式，实现了数据可视化页面元素的全屏化，满足了公众场所用户的浏览需求，提高了用户体验。另外，本申请实施例还可以适用于不同的浏览器内核，增加本申请实施例方案的兼容性。以及，本申请实施例还建立了与服务器端之间的长链接，可以通过长链接实时获取更新的数据。

实际应用中，当触发浏览器退出全屏显示时(比如点击esc按键)，浏览器监听到恢复页面请求事件，可以按照图7所示的退出全屏方式700进行恢复。如图7所示，该方法包括：

步骤701：将所述数据可视化页面元素的为所述满铺模式的页面样式重新恢复为所述原页面样式。

也就是说，本步骤将上述实施例步骤404设置的满铺模式重新恢复为原页面样式，使得数据可视化页面元素105不再占满整个页面显示区1032。

步骤702：利用所述浏览器内核中的全屏取消方法显示出所述页面头部区。

与上述实施例步骤406所述的浏览器内核中的全屏显示方法相对应，浏览器内核还有全屏取消方法，执行该全屏取消方法，就可以重新显示出页面头部区1031，其显示结果恢复为图5所示。

另外，由于本申请实施例客户端102与服务器端101之间建立了websocket长链接，通过长链接实时获取服务器端101的数据。那么，如果服务器端101中的数据发生变化，则可以利用图8所示的方法对数据可视化页面元素进行更新。如图8所示，对数据可视化页面元素进行更新的方法800包括：

步骤801：通过所述长链接获取更新的数据。

本步骤中，由于客户端102与服务器端101之间建立了websocket长链接，而且一直保持该链接，因此，服务器端101可以将变化情况实时推送给客户端102。

步骤802：利用所述数据可视化方法将所述更新的数据处理为新的数据可视化页面元素。

步骤803：用所述新的数据可视化页面元素替换所述数据可视化页面元素。

与上述实施例步骤402类似，本实施例的步骤802根据接收到的更新的数据生成新的数据可视化页面元素105′，并用新的数据可视化页面元素105′去替换原有的数据可视化页面元素105。假设本实施例在图6所示的全屏状态下接收到服务器端101推送的更新的数据，更新后的数据可视化页面元素105′全屏展示的效果如图9所示。从图9可以看到，新的数据可视化页面元素105′已经发生变化，但在不刷新浏览器页面的情况下，可以实时更新并提供给用户浏览。

本申请实施例还提供一种数据可视化展示的装置1000。图10是本申请实施例所述数据可视化展示的装置1000的内部结构示意图。如图10所示，该装置可以包括全屏展示元素确定单元1001、页面样式设置单元1002、头部隐藏单元1003和全屏展示单元1004。其中：

全屏展示元素确定单元1001，用于确定浏览器页面中需要全屏展示的数据可视化页面元素，所述数据可视化页面元素是利用数据可视化方法得到且作为浏览器页面中的页面元素所展示的信息，所述浏览器页面包括页面头部区和页面显示区。

页面样式设置单元1002，用于将所述数据可视化页面元素的原页面样式更改为满铺模式。

头部隐藏单元1003，用于利用浏览器内核中的全屏显示方法隐藏页面头部区。

全屏展示单元1004，用于将所述页面显示区全屏化，并根据所述满铺模式实现所述数据可视化页面元素的全屏化。

也就是说，在实施本申请上述方案时，全屏展示元素确定单元1001先确定浏览器页面中需要全屏展示的数据可视化页面元素；页面样式设置单元1002将所述数据可视化页面元素的原页面样式更改为满铺模式；头部隐藏单元1003利用浏览器内核中的全屏显示方法隐藏页面头部区；全屏展示单元1004将所述页面显示区全屏化，并根据所述满铺模式实现所述数据可视化页面元素的全屏化。

应用本申请实施例方案，由于页面样式设置单元1002可以将数据可视化页面元素设置为满铺模式，并由头部隐藏单元1003对浏览器页面头部区进行隐藏，因此全屏展示单元1004可以直接将数据可视化页面元素进行全屏化，从而更为突出醒目，满足公众场所用户的浏览需求。

本申请还提出另一种数据可视化展示的装置2000。图11是本申请实施例所述数据可视化展示的装置2000的内部结构示意图。在图10所示的装置实施例基础上，本申请装置实施例不但包括全屏展示元素确定单元1001、页面样式设置单元1002、头部隐藏单元1003和全屏展示单元1004，还包括全屏取消部分和数据更新部分。在头部隐藏单元1003中包括内核类型获取单元100a、全屏方法调用单元100b、全屏方法执行单元100c。在全屏取消部分中包括监听单元1005、样式恢复单元1006和全屏取消单元1007。在数据更新部分包括长链接建立单元1008、数据获取单元1009、数据可视化页面元素生成单元1010和替换单元1011。

其中：

内核类型获取单元100a，用于获取浏览器内核的类型。

全屏方法调用单元100b，用于根据获取的浏览器内核的类型调用相应的浏览器内核中的全屏显示方法。

全屏方法执行单元100c，用于执行所述全屏显示方法以隐藏页面头部区。

监听单元1005，用于监听到恢复页面请求事件，并触发样式恢复单元1006和全屏取消单元1007。

样式恢复单元1006，用于将所述数据可视化页面元素的为所述满铺模式的页面样式重新恢复为所述原页面样式。

全屏取消单元1007，利用所述浏览器内核中的全屏取消方法显示出所述页面头部区。

长链接建立单元1008，用于建立与服务器端之间的长链接。

数据获取单元1009，用于通过所述长链接获取更新的数据。

数据可视化页面元素生成单元1010，利用所述数据可视化方法将所述更新的数据处理为新的数据可视化页面元素。

替换单元1011，利用所述新的数据可视化页面元素替换所述数据可视化页面元素。

也就是说，与上述实施例一样，本申请实施例也可以利用全屏展示元素确定单元1001、页面样式设置单元1002、头部隐藏单元1003和全屏展示单元1004实现数据可视化页面元素的全屏化。

当监听单元1005监听到恢复页面请求事件时，将触发样式恢复单元1006；样式恢复单元1006将所述数据可视化页面元素的为所述满铺模式的页面样式重新恢复为所述原页面样式；同时，全屏取消单元1007利用所述浏览器内核中的全屏取消方法显示出所述页面头部区，从而将全屏展示的状态恢复到原有的状态。

另外，在服务器端的数据发生更新时，本申请实施例可以利用长链接建立单元1008、数据获取单元1009、数据可视化页面元素生成单元1010和替换单元1011，在不刷新浏览器页面的情况下实时更新数据可视化页面元素。具体地，事先利用长链接建立单元1008建立与服务器端之间的长链接，并一直保持连接关系。这样，在服务器端的数据更新时，数据获取单元1009通过所述长链接获取更新的数据；数据可视化页面元素生成单元1010利用所述数据可视化方法将所述更新的数据处理为新的数据可视化页面元素；再由替换单元1011利用所述新的数据可视化页面元素替换所述数据可视化页面元素，从而达到实时更新的目的。

本申请实施例还提供一种计算机可读介质，所述计算机可读存储介质存储指令，所述指令在由处理器执行时可执行如上所述的数据可视化展示的方法中的步骤。实际应用中，所述的计算机可读介质可以是上述实施例中描述的设备/装置/系统中所包含的，也可以是单独存在，而未装配入该设备/装置/系统中。上述计算机可读存储介质承载有一个或者多个程序，当上述一个或多个程序被执行时，可以实现上述各实施例描述的数据可视化展示的方法。根据本申请公开的实施例，计算机可读存储介质可以是非易失性的计算机可读存储介质，例如可以包括但不限于：便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件，或者上述的任意合适的组合，但不用于限制本申请保护的范围。在本申请公开的实施例中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。

如图12所示，本发明实施例还提供一种电子设备，其中可以集成本申请实施例实现方法的装置，比如客户端102。如图12所示，其示出了本发明实施例所涉及的电子设备的结构示意图，具体来讲：

该电子设备可以包括一个或一个以上处理核心的处理器1201、一个或一个以上计算机可读存储介质的存储器1202以及存储在存储器上并可在处理器上运行的计算机程序。在执行所述存储器1202的程序时，可以实现上述数据可视化展示的方法。

具体的，实际应用中，该电子设备还可以包括电源1203、输入单元1204、以及输出单元1205等部件。本领域技术人员可以理解，图12中示出的电子设备的结构并不构成对该电子设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。其中：

处理器1201是该电子设备的控制中心，利用各种接口和线路连接整个电子设备的各个部分，通过运行或执行存储在存储器1202内的软件程序和/或模块，以及调用存储在存储器1202内的数据，执行服务器的各种功能和处理数据，从而对该电子设备进行整体监控。

存储器1202可用于存储软件程序以及模块，即上述计算机可读存储介质。处理器1201通过运行存储在存储器1202的软件程序以及模块，从而执行各种功能应用以及数据处理。存储器1202可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序等；存储数据区可存储根据服务器的使用所创建的数据等。此外，存储器1202可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。相应地，存储器1202还可以包括存储器控制器，以提供处理器1201对存储器1202的访问。

该电子设备还包括给各个部件供电的电源1203，可以通过电源管理系统与处理器1201逻辑相连，从而通过电源管理系统实现管理充电、放电、以及功耗管理等功能。电源1203还可以包括一个或一个以上的直流或交流电源、再充电系统、电源故障检测电路、电源转换器或者逆变器、电源状态指示器等任意组件。

该电子设备还可包括输入单元1204，该输入单元1204可用于接收输入的数字或字符信息，以及产生与用户设置以及功能控制有关的键盘、鼠标、操作杆、光学或者轨迹球信号输入。

该电子设备还可以包括输出单元1205，该输出单元1205可以用于显示由用户输入的信息或提供给用户的信息以及各种图像用户接口，这些图形用户接口可以由图形、文本、图标、视频和其任意组合来构成。

本申请附图中的流程图和框图，示出了按照本申请公开的各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或者代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应该注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同附图中所标准的顺序发生。例如，两个连接地表示的方框实际上可以基本并行地执行，它们有时也可以按照相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或者流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

本领域技术人员可以理解，本公开的各个实施例和/或权利要求中记载的特征可以进行多种组合和/或结合，即使这样的组合或结合没有明确记载于本申请中。特别地，在不脱离本申请精神和教导的情况下，本申请的各个实施例和/或权利要求中记载的特征可以进行多种组合和/或结合，所有这些组合和/或结合均落入本申请公开的范围。

本文中应用了具体实施例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思路，并不用于限制本申请。对于本领域的技术人员来说，可以依据本发明的思路、精神和原则，在具体实施方式及应用范围上进行改变，其所做的任何修改、等同替换、改进等，均应包含在本申请保护的范围之内。

Claims (10)

1.一种数据可视化展示的方法，其特征在于，该方法包括：

确定浏览器页面中需要全屏展示的数据可视化页面元素，所述数据可视化页面元素是利用数据可视化方法将数据计算结果转换成视觉表现形式进行表达，且作为浏览器页面中的页面元素所展示的信息，所述浏览器页面包括页面头部区和页面显示区；所述确定浏览器页面中需要全屏展示的数据可视化页面元素包括：点击相应的数据可视化页面元素，或者点击事先设置的控件按钮来确定需要全屏展示的数据可视化页面元素；

将所述数据可视化页面元素的原页面样式更改为满铺模式，所述满铺模式是指占满整个页面显示区域的模式；所述将所述数据可视化页面元素的原页面样式更改为满铺模式的步骤包括：将所述数据可视化页面元素的层级设置为最高级，将所述数据可视化元素的最高顶点设置为显示页面所在像素行的第一行，将所述数据可视化元素的最左起始点设置为显示页面所在像素列的第一列，将所述数据可视化元素的宽度设置为显示页面的最大宽度，将所述数据可视化元素的高度设置为显示页面的最大高度；

利用浏览器内核中的全屏显示方法隐藏所述页面头部区；

将所述页面显示区全屏化，并根据所述满铺模式实现所述数据可视化页面元素通过浏览器在显示屏幕中进行全屏展示，所述显示屏幕为交易中心大厅的大屏幕显示器。

2.根据权利要求1所述的方法，其特征在于，所述利用浏览器内核中的全屏显示方法隐藏页面头部区的步骤包括：

获取浏览器内核的类型；

根据获取的浏览器内核的类型调用相应的浏览器内核中的全屏显示方法；

执行所述全屏显示方法以隐藏页面头部区。

3.根据权利要求1所述的方法，其特征在于，当监听到恢复页面请求事件，该方法进一步包括：

将所述数据可视化页面元素的为所述满铺模式的页面样式重新恢复为所述原页面样式；

利用所述浏览器内核中的全屏取消方法显示出所述页面头部区。

4.根据权利要求1所述的方法，其特征在于，在所述确定浏览器页面中需要全屏展示的数据可视化页面元素的步骤之前，该方法进一步包括：建立与服务器端之间的长链接；

在所述服务器端的数据更新时，该方法进一步包括：

通过所述长链接获取更新的数据；

利用所述数据可视化方法将所述更新的数据处理为新的数据可视化页面元素；

用所述新的数据可视化页面元素替换所述数据可视化页面元素。

5.一种数据可视化展示的装置，其特征在于，该装置包括：

全屏展示确定单元，用于确定浏览器页面中需要全屏展示的数据可视化页面元素，所述数据可视化页面元素是利用数据可视化方法将数据计算结果转换成视觉表现形式进行表达，且作为浏览器页面中的页面元素所展示的信息，所述浏览器页面包括页面头部区和页面显示区；所述确定浏览器页面中需要全屏展示的数据可视化页面元素包括：点击相应的数据可视化页面元素，或者点击事先设置的控件按钮来确定需要全屏展示的数据可视化页面元素；所述将所述数据可视化页面元素的原页面样式更改为满铺模式的步骤包括：将所述数据可视化页面元素的层级设置为最高级，将所述数据可视化元素的最高顶点设置为显示页面所在像素行的第一行，将所述数据可视化元素的最左起始点设置为显示页面所在像素列的第一列，将所述数据可视化元素的宽度设置为显示页面的最大宽度，将所述数据可视化元素的高度设置为显示页面的最大高度；

页面样式设置单元，用于将所述数据可视化页面元素的原页面样式更改为满铺模式，所述满铺模式是指占满整个页面显示区域的模式；

头部隐藏单元，用于利用浏览器内核中的全屏显示方法隐藏所述页面头部区；

全屏展示单元，用于将所述页面显示区全屏化，并根据所述满铺模式实现所述数据可视化页面元素通过浏览器在显示屏幕中进行全屏展示，所述显示屏幕为交易中心大厅的大屏幕显示器。

6.根据权利要求5所述的装置，其特征在于，所述头部隐藏单元包括：

内核类型获取单元，用于获取浏览器内核的类型；

全屏方法调用单元，用于根据获取的浏览器内核的类型调用相应的浏览器内核中的全屏显示方法；

全屏方法执行单元，用于执行所述全屏显示方法以隐藏页面头部区。

7.根据权利要求5所述的装置，其特征在于，该装置进一步包括监听单元、样式恢复单元和全屏取消单元；

所述监听单元，用于监听到恢复页面请求事件，并触发样式恢复单元；

所述样式恢复单元，用于将所述数据可视化页面元素的为所述满铺模式的页面样式重新恢复为所述原页面样式；

所述全屏取消单元，利用所述浏览器内核中的全屏取消方法显示出所述页面头部区。

8.根据权利要求5所述的装置，其特征在于，该装置进一步包括长链接建立单元、数据获取单元、数据可视化页面元素生成单元和替换单元；

所述长链接建立单元，用于建立与服务器端之间的长链接；

所述数据获取单元，用于通过所述长链接获取更新的数据；

所述数据可视化页面元素生成单元，利用所述数据可视化方法将所述更新的数据处理为新的数据可视化页面元素；

所述替换单元，利用所述新的数据可视化页面元素替换所述数据可视化页面元素。

9.一种计算机可读存储介质，其上存储有计算机指令，其特征在于，所述指令被处理器执行时可实现权利要求1～4任一项所述的数据可视化展示方法的步骤。

10.一种数据可视化展示的电子设备，其特征在于，该电子设备包括：

处理器；

用于存储所述处理器可执行指令的存储器；

所述处理器，用于从所述存储器中读取所述可执行指令，并执行所述指令以实现上述权利要求1～4任一项所述的数据可视化展示方法。