CN108153886B - 实时数据在web应用中的自定义可视化展示方法 - Google Patents
实时数据在web应用中的自定义可视化展示方法 Download PDFInfo
- Publication number
- CN108153886B CN108153886B CN201711455191.0A CN201711455191A CN108153886B CN 108153886 B CN108153886 B CN 108153886B CN 201711455191 A CN201711455191 A CN 201711455191A CN 108153886 B CN108153886 B CN 108153886B
- Authority
- CN
- China
- Prior art keywords
- display control
- data
- data source
- web player
- record
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
- 230000000007 visual effect Effects 0.000 title claims abstract description 32
- 238000000034 method Methods 0.000 title claims abstract description 28
- 238000009877 rendering Methods 0.000 claims abstract description 11
- 238000005516 engineering process Methods 0.000 claims description 12
- 238000007726 management method Methods 0.000 claims description 12
- 238000013079 data visualisation Methods 0.000 claims description 8
- 238000011161 development Methods 0.000 claims description 8
- 230000000694 effects Effects 0.000 claims description 8
- 230000000712 assembly Effects 0.000 claims description 4
- 238000000429 assembly Methods 0.000 claims description 4
- 238000004364 calculation method Methods 0.000 claims description 4
- 238000013461 design Methods 0.000 claims description 4
- 230000001360 synchronised effect Effects 0.000 claims description 4
- 230000008859 change Effects 0.000 claims description 3
- 238000004891 communication Methods 0.000 claims description 3
- 230000003252 repetitive effect Effects 0.000 claims description 3
- 238000010168 coupling process Methods 0.000 claims description 2
- 238000005859 coupling reaction Methods 0.000 claims description 2
- 238000013499 data model Methods 0.000 claims description 2
- 230000003993 interaction Effects 0.000 claims description 2
- 238000012423 maintenance Methods 0.000 claims description 2
- 238000012800 visualization Methods 0.000 description 4
- 238000010586 diagram Methods 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 230000007547 defect Effects 0.000 description 1
- 210000001503 joint Anatomy 0.000 description 1
- 238000012545 processing Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明提供一种实时数据在web应用中的自定义可视化展示方法，包括：设计器将显示控件的属性信息以及绑定的数据源ID的对应关系；数据源的数据实时到达WEB播放器时，WEB播放器根据数据源ID，查询到对应的显示控件组件；然后，WEB播放器调用查询到的显示控件组件，并采用数据源渲染查询到的显示控件组件中的显示控件，实现动态实时数据的自定义可视化展示。优点为：WEB播放器将重构的对显示控件组件与数据源绑定，当数据源数据动态变化时，只需要对显示控件组件进行渲染，即可实现以图表等方式实时动态显示数据，而不需要频繁构造对应的显示控制，从而提高了数据动态可视化显示的效率。
Description
技术领域
本发明属于数据展示技术领域，具体涉及一种实时数据在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 (1)
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播放器将重构的对显示控件组件与数据源绑定，当数据源数据动态变化时，只需要对显示控件组件进行渲染，即可实现以图表方式实时动态显示数据，而不需要频繁构造对应的显示控制，从而提高了数据动态可视化显示的效率。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201711455191.0A CN108153886B (zh) | 2017-12-28 | 2017-12-28 | 实时数据在web应用中的自定义可视化展示方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201711455191.0A CN108153886B (zh) | 2017-12-28 | 2017-12-28 | 实时数据在web应用中的自定义可视化展示方法 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN108153886A CN108153886A (zh) | 2018-06-12 |
| CN108153886B true CN108153886B (zh) | 2021-02-02 |
Family
ID=62463679
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201711455191.0A Active CN108153886B (zh) | 2017-12-28 | 2017-12-28 | 实时数据在web应用中的自定义可视化展示方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN108153886B (zh) |
Families Citing this family (23)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109145008B (zh) * | 2018-08-16 | 2020-11-06 | 北京奥技异科技发展有限公司 | 基于kks编码规则和大数据架构的实时数据平台 |
| CN109284329A (zh) * | 2018-08-16 | 2019-01-29 | 北京奥技异科技发展有限公司 | 基于kks编码规则和大数据架构的应用展示平台 |
| CN109325220A (zh) * | 2018-08-29 | 2019-02-12 | 东软集团股份有限公司 | 图表生成方法、装置、存储介质和电子设备 |
| CN109446209A (zh) * | 2018-09-13 | 2019-03-08 | 北京中科闻歌科技股份有限公司 | 一种动态屏的生成和显示方法及系统 |
| CN109460418B (zh) * | 2018-10-22 | 2021-04-13 | 武汉达梦数据库有限公司 | 一种基于数据库的查询业务执行方法 |
| CN109445791A (zh) * | 2018-11-01 | 2019-03-08 | 郑州云海信息技术有限公司 | 一种页面前端访问方法及实现系统 |
| CN109857579B (zh) * | 2019-02-15 | 2021-07-30 | 深圳市迅雷网文化有限公司 | 一种数据处理方法及相关装置 |
| CN110032667A (zh) * | 2019-04-17 | 2019-07-19 | 成都市审计局 | 一种用于审计平台的数据资产管理方法 |
| CN110489119B (zh) * | 2019-06-26 | 2022-04-12 | 中电万维信息技术有限责任公司 | 基于图数据库显示查询结果的方法、装置及存储介质 |
| CN110688422B (zh) * | 2019-08-19 | 2022-03-25 | 浙江中控信息产业股份有限公司 | 利用实迹运行图实现列车载客量分析的方法 |
| CN111221897A (zh) * | 2019-11-18 | 2020-06-02 | 上海维谛信息科技有限公司 | 一种可视化视图展示方法及装置 |
| CN110913277A (zh) * | 2019-11-29 | 2020-03-24 | 百度在线网络技术（北京）有限公司 | 一种视频播放方法、装置、电子设备及存储介质 |
| CN110912750B (zh) * | 2019-11-29 | 2023-03-21 | 上海维谛信息科技有限公司 | 基于web的数据采集管理方法及装置 |
| CN113051447A (zh) * | 2019-12-27 | 2021-06-29 | 新奥数能科技有限公司 | 一种能源数据可视化的展示方法及装置 |
| CN111274781A (zh) * | 2020-01-21 | 2020-06-12 | 北京三快在线科技有限公司 | 表格显示方法、装置、存储介质及电子设备 |
| CN113342327A (zh) * | 2020-03-02 | 2021-09-03 | 中国科学院沈阳自动化研究所 | 一种生成可视化工业组态交互图形的方法 |
| CN111522565B (zh) * | 2020-04-21 | 2022-02-01 | 北京邮电大学 | 基于组件化的实时更新数据可视化大屏方法及系统 |
| CN111708522B (zh) * | 2020-06-23 | 2023-01-31 | 西安雷风电子科技有限公司 | 一种视频播放组件开发方法及装置 |
| CN113051507B (zh) * | 2021-03-29 | 2023-11-21 | 北京智慧星光信息技术有限公司 | 基于json数据构建双向绑定的web页面前端展示方法和系统 |
| CN114385302B (zh) * | 2022-01-14 | 2023-08-15 | 华戎信息产业有限公司 | 一种基于可视化引擎的屏幕效果生成方法和系统 |
| CN114528811B (zh) * | 2022-01-21 | 2022-09-02 | 北京麦克斯泰科技有限公司 | 文章内容抽取方法、装置、设备及存储介质 |
| CN114461721B (zh) * | 2022-02-09 | 2023-06-27 | 广东省洛仑兹技术股份有限公司 | 数据处理展示方法、装置、设备及存储介质 |
| CN114564534B (zh) * | 2022-03-01 | 2023-09-29 | 山东浪潮新基建科技有限公司 | 基于场景的可视化配置平台及实现方法 |
Family Cites Families (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102467375B (zh) * | 2010-11-09 | 2015-06-10 | 金蝶软件（中国）有限公司 | 一种生成客户端界面的方法及装置 |
| US20130346382A1 (en) * | 2012-06-22 | 2013-12-26 | Microsoft Corporation | Widget platform exposed for diverse ecosystems |
| CN104346149A (zh) * | 2013-07-30 | 2015-02-11 | 商业对象软件有限公司 | 用于数据可视化的描述性框架 |
| CN103488479A (zh) * | 2013-09-04 | 2014-01-01 | 用友软件股份有限公司 | 客户端界面动态生成装置和客户端界面动态生成方法 |
| CN104090767A (zh) * | 2014-07-18 | 2014-10-08 | 上海斐讯数据通信技术有限公司 | 一种参数化的用户界面开发工具及方法 |
| CN105512139B (zh) * | 2014-09-26 | 2019-11-05 | 阿里巴巴集团控股有限公司 | 数据可视化的实现方法及装置 |
| CN105589909A (zh) * | 2014-12-31 | 2016-05-18 | 中国银联股份有限公司 | 数据可视化实现系统及方法 |
| CN104615431A (zh) * | 2015-02-05 | 2015-05-13 | 浪潮集团有限公司 | 一种Web应用的实现方法和装置 |
| US20170185609A1 (en) * | 2015-12-28 | 2017-06-29 | International Business Machines Corporation | Universal adaptor for rapid development of web-based data visualizations |
| CN107122185B (zh) * | 2017-04-21 | 2020-08-14 | 国网福建省电力有限公司 | 一种针对配电网参数类信息可视化展现系统 |
-
2017
- 2017-12-28 CN CN201711455191.0A patent/CN108153886B/zh active Active
Also Published As
| Publication number | Publication date |
|---|---|
| CN108153886A (zh) | 2018-06-12 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN108153886B (zh) | 实时数据在web应用中的自定义可视化展示方法 | |
| CN107544806B (zh) | 可视化表单绘制方法 | |
| CN103092612B (zh) | 实现安卓操作系统3d桌面贴图的方法及电子装置 | |
| CN102135873B (zh) | 一种创建用户界面的方法和装置 | |
| CN101566949B (zh) | 一种展示控件的装置及方法 | |
| CN105069118A (zh) | 一种基于gis配置的应用场景管理方法及系统 | |
| CN111832274A (zh) | 智能教材中的富媒体编辑方法、生成方法及装置和系统 | |
| CN105068815A (zh) | 页面编辑器交互装置和方法 | |
| CN104216691A (zh) | 一种创建应用的方法及装置 | |
| CN103020237B (zh) | 一种网页更新方法和装置 | |
| CN109725986B (zh) | 一种图形化和容器化的虚拟网络环境构建及批量部署方法 | |
| CN102662921A (zh) | 一种文档处理方法、装置和编辑器 | |
| CN105373520A (zh) | 设置控件样式属性的方法和装置 | |
| CN112364496B (zh) | 基于html5和vue技术的航电仿真面板生成系统 | |
| CN101114936A (zh) | 拓扑图显示方法、系统及装置 | |
| CN109190196B (zh) | 一种web前端绘制电气接线图的方法 | |
| CN109445891A (zh) | 画面组态及展示方法、装置、计算机可读存储介质 | |
| CN114564199A (zh) | 一种生成使用页面的方法、装置、设备及可读存储介质 | |
| CN101236558B (zh) | 一种基于web页的模拟IM客户端界面的方法和装置 | |
| CN107656908A (zh) | 占位符的实现方法和系统 | |
| CN116431145A (zh) | 一种生成数据可视化页面的系统及方法 | |
| CN113703743B (zh) | 配置页面的方法和装置、渲染页面方法、客户端及服务器 | |
| CN109189512B (zh) | 一种数据图形化编辑界面方法 | |
| JP2013200698A (ja) | テンプレート処理プログラム、テンプレート処理方法、及び印字ラベル作成装置 | |
| KR100974915B1 (ko) | 하이라키 구조의 그래픽 리소스의 가공 방법 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant | ||
| EE01 | Entry into force of recordation of patent licensing contract |
Application publication date: 20180612 Assignee: CHINA TECHNOLOGY EXCHANGE Co.,Ltd. Assignor: BEIJING E-TECHSTAR Co.,Ltd. Contract record no.: X2023110000036 Denomination of invention: A user-defined visual presentation method for real-time data in web applications Granted publication date: 20210202 License type: Exclusive License Record date: 20230317 |
|
| EE01 | Entry into force of recordation of patent licensing contract | ||
| PE01 | Entry into force of the registration of the contract for pledge of patent right | ||
| PE01 | Entry into force of the registration of the contract for pledge of patent right |
Denomination of invention: Customized visualization display method for real-time data in web applications Effective date of registration: 20230323 Granted publication date: 20210202 Pledgee: CHINA TECHNOLOGY EXCHANGE Co.,Ltd. Pledgor: BEIJING E-TECHSTAR Co.,Ltd. Registration number: Y2023110000113 |
|
| EC01 | Cancellation of recordation of patent licensing contract | ||
| EC01 | Cancellation of recordation of patent licensing contract |
Assignee: CHINA TECHNOLOGY EXCHANGE Co.,Ltd. Assignor: BEIJING E-TECHSTAR Co.,Ltd. Contract record no.: X2023110000036 Date of cancellation: 20240913 |
|
| PC01 | Cancellation of the registration of the contract for pledge of patent right | ||
| PC01 | Cancellation of the registration of the contract for pledge of patent right |
Granted publication date: 20210202 Pledgee: CHINA TECHNOLOGY EXCHANGE Co.,Ltd. Pledgor: BEIJING E-TECHSTAR Co.,Ltd. Registration number: Y2023110000113 |