CN108153886A - 实时数据在web应用中的自定义可视化展示方法 - Google Patents

Abstract

本发明提供一种实时数据在web应用中的自定义可视化展示方法，包括：设计器将显示控件的属性信息以及绑定的数据源ID的对应关系；数据源的数据实时到达WEB播放器时，WEB播放器根据数据源ID，查询到对应的显示控件组件；然后，WEB播放器调用查询到的显示控件组件，并采用数据源渲染查询到的显示控件组件中的显示控件，实现动态实时数据的自定义可视化展示。优点为：WEB播放器将重构的对显示控件组件与数据源绑定，当数据源数据动态变化时，只需要对显示控件组件进行渲染，即可实现以图表等方式实时动态显示数据，而不需要频繁构造对应的显示控制，从而提高了数据动态可视化显示的效率。

Description

实时数据在web应用中的自定义可视化展示方法

技术领域

本发明属于数据展示技术领域，具体涉及一种实时数据在web应用中的自定义可视化展示方法。

背景技术

目前，数据可视化工具主要采用以下方法实现数据的可视化展示：每当到来一条数据时，需要构造自定义的一个展示控件，然后，采用展示组件显示数据。因此，由于每当到来一条数据时，均需要构造一个展示组件，具有数据可视化展示的速度慢的问题，无法满足实时高效展示数据的需求。

发明内容

针对现有技术存在的缺陷，本发明提供一种实时数据在web应用中的自定义可视化展示方法，可有效解决上述问题。

本发明采用的技术方案如下：

本发明提供一种实时数据在web应用中的自定义可视化展示方法，包括以下步骤：

步骤1，设计器配置有若干个不同类型的显示控件；对于每种类型的显示控制，均执行以下步骤2-步骤6；

步骤2，将显示控件拖动到所创建的画布上面；

对布置于所述画布的显示控件进行自定义设置，设置所述显示控件的属性信息，同时，每个所述显示控件均绑定待展示数据的数据源ID；

步骤3，设计器将显示控件的属性信息以及绑定的数据源ID的对应关系，作为一条记录信息存储到记录数据库中；

此外，设计器创建并维护记录列表，所述记录列表存储每条记录信息的记录ID；每当所述设计器向所述数据库中存储一条记录信息时，所述设计器即更新所述记录列表；所述设计器将所述记录列表存储到记录列表数据库中；

步骤4，WEB播放器启动后，从所述记录列表数据库中加载所述记录列表，在所述WEB播放器的播放列表中，以列表形式显示每条记录信息的记录ID；对于每条记录ID，均执行步骤5和步骤6；

步骤5，触发某条记录ID，所述WEB播放器向所述记录数据库中发送查询所述记录ID对应的记录信息的查询请求消息；所述WEB播放器接收所述记录数据库返回的记录信息；所述WEB播放器解析所述记录信息，获得显示控件的属性信息以及绑定的数据源ID；

然后，所述WEB播放器根据所述显示控件的属性信息，重构出对应的显示控件；重构出的显示控件绑定数据源ID；

步骤6，所述WEB播放器将重构出的显示控件以及绑定的数据源ID，作为显示控件组件保存；

至此，将设计器自定义的每个类型的显示控件及绑定的数据源ID，均转化为WEB播放器中的对应的显示控件组件；

步骤7，由于每个显示控件组件均包括绑定的重构出的显示控件以及绑定的数据源ID，由此实现了数据源和重构出的显示控件的同步性；因此，数据源的数据实时到达所述WEB播放器时，所述WEB播放器根据数据源ID，查询到对应的显示控件组件；然后，所述WEB播放器调用查询到的所述显示控件组件，并采用所述数据源渲染查询到的显示控件组件中的显示控件，实现动态实时数据的自定义可视化展示。

优选的，步骤1中，所述显示控件包括数据图表类型控件和图片类型控件。

优选的，所述数据图表类型控件包括柱状图类型控件、折线图类型控件或泡泡图类型控件。

优选的，步骤2中，所述显示控件的属性信息包括显示控控件的坐标信息、显示控件的大小信息以及显示控件的颜色信息。

优选的，步骤5中，所述WEB播放器接收所述记录数据库返回的记录信息，具体为：

所述记录数据库将查询到的所述记录信息转换为json格式，并通过websocket通信技术将json格式的记录信息推送给所述WEB播放器。

优选的，所述WEB播放器根据所述显示控件的属性信息，重构出对应的显示控件；重构出的显示控件绑定数据源ID，具体为：

Web播放器接收到json格式的记录信息之后，通过web播放器内部的javascript代码将json格式的记录信息转换为web播放器所需的对象数据格式，然后，将对象数据格式的记录信息存储到web播放器本地的状态管理工具内；

web播放器内部javascript的Object.defineProperty的setter或getter对状态管理工具进行实时监听，因此，每当状态管理工具内的数据发生改变时，setter或getter均会监听到这一改变事件，setter或getter将监听到的状态管理工具接收到新的对象数据格式的记录信息发送给web播放器内置的对应显示控件，并根据显示控件的属性信息，驱动web播放器内的各个DOM以及canvas，对所述web播放器内置的对应显示控件进行渲染，得到属性与所述设计器自定义设置的显示控件相同的显示控件。

优选的，将设计器自定义的每个类型的显示控件及绑定的数据源ID，均转化为WEB播放器中的对应的显示控件组件，之后还包括：

利用网状式的组件化开发技术，当需要采用不同类型的显示控件可视化展示同一数据源时，将选择的不同类型的显示控件对应的显示控件组件，作为子组件调配集中到一个总组件中；将各个子组件的属性赋予到所述总组件；因此，当需要采用不同类型的显示控件同时可视化展示数据源时，调用所述总组件，对所述总组件进行渲染即可。

本发明提供的实时数据在web应用中的自定义可视化展示方法具有以下优点：

本发明提供的实时数据在web应用中的自定义可视化展示方法，WEB播放器将重构的对显示控件组件与数据源绑定，当数据源数据动态变化时，只需要对显示控件组件进行渲染，即可实现以图表等方式实时动态显示数据，而不需要频繁构造对应的显示控制，从而提高了数据动态可视化显示的效率。

附图说明

图1为本发明提供的实时数据在web应用中的自定义可视化展示方法的流程示意图。

图2为本发明提供的实时数据在web应用中的自定义可视化展示系统的架构图；

图3为本发明提供的实时数据在web应用中的自定义可视化展示系统的模型原理图。

具体实施方式

为了使本发明所解决的技术问题、技术方案及有益效果更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本发明，并不用于限定本发明。

传统的数据可视化工具无法满足用户对更佳实时的数据需求和对展示效果的快速自定义的需求，传统的数据可视化展示工具，需要经过大量的代码级开发，或者数据的实时性不尽人意。本发明的核心目的在于解决上述问题，可以让更加即时的数据在web有限性能下得以更效率的个性化实施及展示。本发明提供一种实时数据在web应用中的自定义可视化展示方法，可实现web应用中动态数据的实时、高效、自定义可视化展示，本发明主要思路为：在设计器上，将自定义(位置、大小、类型、颜色)的显示控件布置到画布上；将显示控件的属性以及绑定的数据源ID形成的记录信息，利用html5新特性websocket的即时通信技术，第一时间推送至WEB播放器；WEB播放器经过JavaScript逻辑处理后，重构与设计器的显示控件属性一致的显示控件，并将数据源与重构到的相应显示控件对接，运用MVVM技术，通过对显示控件的控制，直接渲染可视化展示效果。

参考图1，实时数据在web应用中的自定义可视化展示方法具体包括以下步骤：

步骤1，设计器配置有若干个不同类型的显示控件；对于每种类型的显示控制，均执行以下步骤2-步骤6；

其中，显示控件包括但不限于数据图表类型控件和图片类型控件。所述数据图表类型控件包括但不限于柱状图类型控件、折线图类型控件或泡泡图类型控件。

步骤2，将显示控件拖动到所创建的画布上面；

对布置于所述画布的显示控件进行自定义设置，设置所述显示控件的属性信息，例如，自定义的显示控件的属性信息包括显示控控件的坐标信息、显示控件的大小信息以及显示控件的颜色信息。同时，每个所述显示控件均绑定待展示数据的数据源ID；

步骤3，设计器将显示控件的属性信息以及绑定的数据源ID的对应关系，作为一条记录信息存储到记录数据库中；

此外，设计器创建并维护记录列表，所述记录列表存储每条记录信息的记录ID；每当所述设计器向所述数据库中存储一条记录信息时，所述设计器即更新所述记录列表；所述设计器将所述记录列表存储到记录列表数据库中；

步骤4，WEB播放器启动后，从所述记录列表数据库中加载所述记录列表，在所述WEB播放器的播放列表中，以列表形式显示每条记录信息的记录ID；对于每条记录ID，均执行步骤5和步骤6；

步骤5，触发某条记录ID，所述WEB播放器向所述记录数据库中发送查询所述记录ID对应的记录信息的查询请求消息；所述WEB播放器接收所述记录数据库返回的记录信息；所述WEB播放器解析所述记录信息，获得显示控件的属性信息以及绑定的数据源ID；

具体的，步骤5中，所述WEB播放器接收所述记录数据库返回的记录信息，具体为：所述记录数据库将查询到的所述记录信息转换为json格式，并通过websocket通信技术将json格式的记录信息推送给所述WEB播放器。

然后，所述WEB播放器根据所述显示控件的属性信息，重构出对应的显示控件；重构出的显示控件绑定数据源ID；

此处，WEB播放器根据所述显示控件的属性信息，重构出对应的显示控件；重构出的显示控件绑定数据源ID，具体为：

Web播放器接收到json格式的记录信息之后，通过web播放器内部的javascript代码将json格式的记录信息转换为web播放器所需的对象数据格式(object)，然后，将对象数据格式的记录信息存储到web播放器本地的状态管理工具(VueX)内；

web播放器内部javascript的Object.defineProperty的setter或getter对状态管理工具进行实时监听，因此，每当状态管理工具内的数据发生改变时，setter或getter均会监听到这一改变事件，setter或getter将监听到的状态管理工具接收到新的对象数据格式的记录信息发送给web播放器内置的对应显示控件，并根据显示控件的属性信息，驱动web播放器内的各个DOM以及canvas，对所述web播放器内置的对应显示控件进行渲染，得到属性与所述设计器自定义设置的显示控件相同的显示控件。

步骤6，所述WEB播放器将重构出的显示控件以及绑定的数据源ID，作为显示控件组件保存；

至此，将设计器自定义的每个类型的显示控件及绑定的数据源ID，均转化为WEB播放器中的对应的显示控件组件；

将设计器自定义的每个类型的显示控件及绑定的数据源ID，均转化为WEB播放器中的对应的显示控件组件，之后还包括：

利用网状式的组件化开发技术，当需要采用不同类型的显示控件可视化展示同一数据源时，将选择的不同类型的显示控件对应的显示控件组件，作为子组件调配集中到一个总组件中；将各个子组件的属性赋予到所述总组件；因此，当需要采用不同类型的显示控件同时可视化展示数据源时，调用所述总组件，对所述总组件进行渲染即可。

通过网状式的组件化开发，可以避免相同及类似组件的重复性开发。

步骤7，由于每个显示控件组件均包括绑定的重构出的显示控件以及绑定的数据源ID，由此实现了数据源和重构出的显示控件的同步性；因此，数据源的数据实时到达所述WEB播放器时，所述WEB播放器根据数据源ID，查询到对应的显示控件组件；然后，所述WEB播放器调用查询到的所述显示控件组件，并采用所述数据源渲染查询到的显示控件组件中的显示控件，实现动态实时数据的自定义可视化展示。

最终，web播放器将会给用户呈现出渲染之后需要看到的数据的可视化画面效果。

本发明提供的实时数据在web应用中的自定义可视化展示方法，具有以下特点：

(1)Websocket数据推送取代了http数据请求方式，该技术对数据获取效率更高，从而提升数据获取即时性，也保证了多端互动的扩展性。

(3)采用基于MVVM模式的低耦合代码开发方式，MVVM架构中，WEB播放器的显示控件组件数据模型与视图分离，保证了WEB播放器代码层可靠的渲染性能以及强大的可重用性。

除此之外，MVVM提供的效率渲染速度，降低了WEB浏览器渲染可视化图形的单位时间和所消耗性能，让用户有更多的性能来支撑其设计的实现。

采用Vue+ES6+Echart+组件化这样的技术栈组合。组件化后，只需要对显示控件组件进行维护，不会影响到其它文件。而且文件结构清楚，方便开发人员对代码的后续维护及更新迭代。

采用块状化结构，一个显示控件组件一个标识，标识加元素标签定位书写css，减少了代码中大量的class样式定义，减少了代码的体积。

(4)将所有的数据图表类型控件编码使之为一个总组件，分别将例如柱状图、折线图、泡泡图这样的单独数据图表分别独立编码为一个个的小组件。

当用户希望只用柱状图展示数据时，WEB播放器只会调用柱状图组件，不会计算其他小组件的代码，省去大量计算时间。

当用户希望使用柱状图及折线图时，WEB播放器会调用相应的两个小组件进行计算。

当用户希望在一个图表里面使用折线图及柱状图或者其他的数据图表展示组合数据，会将使用到的小组件调配集中到一个总组件中进行计算和展示。

总组件套小组件以及组件之间灵活的串并联，使代码扩展更加快速高效。

(5)本发明的核心是一个响应的数据绑定系统，让数据源与DOM保持同步非常简单高效。在传统使用jQuery手工操作DOM时，代码常常是命令式的、重复的与易错的。通俗地讲，意味着在普通HTML模板中使用特殊的语法将DOM“绑定”到底层数据。一旦创建了绑定，DOM将与绑定的数据源保持同步。每当修改了数据源，DOM便相应地更新。这样，应用中的逻辑就几乎都是直接修改数据源了，不必与DOM更新搅在一起。这让代码更容易撰写、理解与维护。DOM可理解为显示控制组件。

(6)WEB播放器从代码层解决了数据源与视图的关联问题，从而用户只需要关注数据可视化效果层的设计与自定义，不需要做更多数据层及代码层的学习与开发。用户只需用数据源对应显示控件和拖动或选择显示控件的展示效果，不需要进行代码级开发和调试。

(7)支持4k分辨率图表在每秒50000条数据推送压力下渲染50-100个用户自定义图表，改变了用户对数据可视化的需求上限。

因此，本发明提供的实时数据在web应用中的自定义可视化展示方法，WEB播放器将重构的对显示控件组件与数据源绑定，当数据源数据动态变化时，只需要对显示控件组件进行渲染，即可实现以图表等方式实时动态显示数据，而不需要频繁构造对应的显示控制，从而提高了数据动态可视化显示的效率。

以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视本发明的保护范围。

Claims (7)

1.一种实时数据在web应用中的自定义可视化展示方法，其特征在于，包括以下步骤：

步骤1，设计器配置有若干个不同类型的显示控件；对于每种类型的显示控制，均执行以下步骤2-步骤6；

步骤2，将显示控件拖动到所创建的画布上面；

对布置于所述画布的显示控件进行自定义设置，设置所述显示控件的属性信息，同时，每个所述显示控件均绑定待展示数据的数据源ID；

步骤3，设计器将显示控件的属性信息以及绑定的数据源ID的对应关系，作为一条记录信息存储到记录数据库中；

此外，设计器创建并维护记录列表，所述记录列表存储每条记录信息的记录ID；每当所述设计器向所述数据库中存储一条记录信息时，所述设计器即更新所述记录列表；所述设计器将所述记录列表存储到记录列表数据库中；

步骤4，WEB播放器启动后，从所述记录列表数据库中加载所述记录列表，在所述WEB播放器的播放列表中，以列表形式显示每条记录信息的记录ID；对于每条记录ID，均执行步骤5和步骤6；

步骤5，触发某条记录ID，所述WEB播放器向所述记录数据库中发送查询所述记录ID对应的记录信息的查询请求消息；所述WEB播放器接收所述记录数据库返回的记录信息；所述WEB播放器解析所述记录信息，获得显示控件的属性信息以及绑定的数据源ID；

然后，所述WEB播放器根据所述显示控件的属性信息，重构出对应的显示控件；重构出的显示控件绑定数据源ID；

步骤6，所述WEB播放器将重构出的显示控件以及绑定的数据源ID，作为显示控件组件保存；

至此，将设计器自定义的每个类型的显示控件及绑定的数据源ID，均转化为WEB播放器中的对应的显示控件组件；

步骤7，由于每个显示控件组件均包括绑定的重构出的显示控件以及绑定的数据源ID，由此实现了数据源和重构出的显示控件的同步性；因此，数据源的数据实时到达所述WEB播放器时，所述WEB播放器根据数据源ID，查询到对应的显示控件组件；然后，所述WEB播放器调用查询到的所述显示控件组件，并采用所述数据源渲染查询到的显示控件组件中的显示控件，实现动态实时数据的自定义可视化展示。

2.根据权利要求1所述的实时数据在web应用中的自定义可视化展示方法，其特征在于，步骤1中，所述显示控件包括数据图表类型控件和图片类型控件。

3.根据权利要求2所述的实时数据在web应用中的自定义可视化展示方法，其特征在于，所述数据图表类型控件包括柱状图类型控件、折线图类型控件或泡泡图类型控件。

4.根据权利要求1所述的实时数据在web应用中的自定义可视化展示方法，其特征在于，步骤2中，所述显示控件的属性信息包括显示控控件的坐标信息、显示控件的大小信息以及显示控件的颜色信息。

5.根据权利要求1所述的实时数据在web应用中的自定义可视化展示方法，其特征在于，步骤5中，所述WEB播放器接收所述记录数据库返回的记录信息，具体为：

所述记录数据库将查询到的所述记录信息转换为json格式，并通过websocket通信技术将json格式的记录信息推送给所述WEB播放器。

6.根据权利要求5所述的实时数据在web应用中的自定义可视化展示方法，其特征在于，所述WEB播放器根据所述显示控件的属性信息，重构出对应的显示控件；重构出的显示控件绑定数据源ID，具体为：

Web播放器接收到json格式的记录信息之后，通过web播放器内部的javascript代码将json格式的记录信息转换为web播放器所需的对象数据格式，然后，将对象数据格式的记录信息存储到web播放器本地的状态管理工具内；

web播放器内部javascript的Object.defineProperty的setter或getter对状态管理工具进行实时监听，因此，每当状态管理工具内的数据发生改变时，setter或getter均会监听到这一改变事件，setter或getter将监听到的状态管理工具接收到新的对象数据格式的记录信息发送给web播放器内置的对应显示控件，并根据显示控件的属性信息，驱动web播放器内的各个DOM以及canvas，对所述web播放器内置的对应显示控件进行渲染，得到属性与所述设计器自定义设置的显示控件相同的显示控件。

7.根据权利要求1所述的实时数据在web应用中的自定义可视化展示方法，其特征在于，将设计器自定义的每个类型的显示控件及绑定的数据源ID，均转化为WEB播放器中的对应的显示控件组件，之后还包括：

利用网状式的组件化开发技术，当需要采用不同类型的显示控件可视化展示同一数据源时，将选择的不同类型的显示控件对应的显示控件组件，作为子组件调配集中到一个总组件中；将各个子组件的属性赋予到所述总组件；因此，当需要采用不同类型的显示控件同时可视化展示数据源时，调用所述总组件，对所述总组件进行渲染即可。