[发明专利]实时数据在web应用中的自定义可视化展示方法

权利要求书

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播放器调用查询到的所述显示控件组件，并采用所述数据源渲染查询到的显示控件组件中的显示控件，实现动态实时数据的自定义可视化展示；

其中，步骤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播放器中的对应的显示控件组件，之后还包括：

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

其中，步骤1中，所述显示控件包括数据图表类型控件和图片类型控件；

其中，所述数据图表类型控件包括柱状图类型控件、折线图类型控件或泡泡图类型控件；

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

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

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

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

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

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

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

（3）将所有的数据图表类型控件编码使之为一个总组件，分别将柱状图、折线图、泡泡图这样的单独数据图表分别独立编码为一个个的小组件；

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

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

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

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

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

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

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

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