CN110110174A

CN110110174A - 数据可视化页面的生成、监听及展示方法、浏览器及服务器

Info

Publication number: CN110110174A
Application number: CN201711352970.8A
Authority: CN
Inventors: 叶飞
Original assignee: Alibaba Group Holding Ltd
Current assignee: Alibaba Group Holding Ltd
Priority date: 2017-12-15
Filing date: 2017-12-15
Publication date: 2019-08-09
Anticipated expiration: 2037-12-15
Also published as: CN110110174B

Abstract

本申请实施例提供了一种数据可视化页面的生成、监听及展示方法、浏览器及服务器，其中所述方法包括：展现可视化页面，所述可视化页面中包括多个可视化对象，所述可视化对象具有关联的事件参数，所述事件参数用于对页面中的对应事件进行监听；当监听到事件被触发时，确定监听所述事件的一个或多个目标可视化对象；所述目标可视化对象根据所述触发的事件对应的事件参数，从服务器侧的数据源中获取对应的目标数据；将所述目标数据填充在对应的目标可视化对象中。本申请实现可视化对象与后台数据源的功能性交互，一个事件触发可以联动一个或多个目标可视化对象，实现组件与组件，组件与组件容器之间复杂协作的参数传递机制，拓展了数据可视化场景。

Description

数据可视化页面的生成、监听及展示方法、浏览器及服务器

技术领域

本申请涉及页面处理技术领域，特别是涉及一种数据可视化页面的展示方法、一种数据可视化页面的生成方法、一种基于可视化页面的数据监听方法、一种数据可视化页面的展示浏览器、一种数据可视化页面的生成服务器、一种基于可视化页面的数据监听装置、一种装置以及机器可读介质。

背景技术

大数据时代的数据洪泛带来的是信息过载，而数据可视化是一种简单有效的信息表达形式，但是如何低成本、简单、快速地构建场景相关的数据报表同样是一件极大的挑战。为了能实现以低成本、高效率地响应快速变化的数据场景需求，可以通过重用可视化组件，以及提供简单的组件拼装机制的技术方案可以很好地解决这种问题。

通过拼装可视化组件的方式来开发数据页面，确实能快速低成本搭建可视化数据产品，但这种拼装同时带来数据页面本身功能的弱化：可视化页面模块本质上独立的，模块是通过配置信息简单地组建在一起，模块与模块之间缺乏某种内在的强关联，以及缺少这种强关联的前端表达方式，这些就导致搭建出的数据可视化页面缺少灵活可扩展的数据交互特征，这一交互特性严重限制了上述通过组件拼装快速构建数据可视化页面这类方案的数据可视化使用场景。

发明内容

鉴于上述问题，提出了本申请实施例以便提供一种克服上述问题或者至少部分地解决上述问题的一种数据可视化页面的展示方法、一种数据可视化页面的生成方法、一种基于可视化页面的数据监听方法和相应的一种数据可视化页面的展示浏览器、一种数据可视化页面的生成服务器、一种基于可视化页面的数据监听装置、一种装置以及机器可读介质。

为了解决上述问题，本申请实施例公开了一种数据可视化页面的展示方法，所述方法包括：

展现可视化页面，所述可视化页面中包括多个可视化对象，所述可视化对象具有关联的事件参数，所述事件参数用于对页面中的对应事件进行监听；

当监听到事件被触发时，确定监听所述事件的一个或多个目标可视化对象；

所述目标可视化对象根据所述触发的事件对应的事件参数，从服务器侧的数据源中获取对应的目标数据；

将所述目标数据填充在对应的目标可视化对象中。

优选地，在所述将所述目标数据填充在对应的目标可视化对象中的步骤之后，还包括：

基于所述目标数据触发属于同一可视化对象内的其他事件，继续执行所述当监听到事件被触发时，确定监听所述事件的一个或多个目标可视化对象的步骤。

优选地，所述事件参数包括事件标识以及对应的事件值；所述当监听到事件被触发时，确定监听所述事件的一个或多个目标可视化对象的步骤包括：

当监听到指定可视化对象的事件值发生变化时，确定所述事件值对应的事件标识；

所述指定可视化对象将所述事件标识以及对应的变化后的事件值，传播至同一传播范围内的，监听了所述事件标识的目标可视化对象中。

优选地，所述目标可视化对象根据所述触发的事件对应的事件参数，从服务器侧的数据源中获取对应的目标数据的步骤包括：

所述目标可视化对象基于所述事件标识以及对应的变化后的事件值，生成数据获取请求；

将所述数据获取请求发送至服务器中；

接收所述服务器基于所述数据获取请求返回的，从数据源中获取的目标数据。

优选地，所述可视化对象包括布局组件以及模块组件，若当前组件为布局组件，则与其属于同一传播范围的组件包括：

所述布局组件嵌套的模块组件；以及

与所述布局组件属于同一布局组件的其他布局组件，以及，所述其他布局组件嵌套的模块组件；

若当前组件为模块组件，则与其属于同一传播范围的组件包括：

与所述模块组件属于同一布局组件的其他模块组件。

优选地，所述事件参数包括如下类型的一种或结合：

在整个页面都有效的全局级类型；

在布局组件内有效的布局级类型；

在模块组件内有效的模块级类型；

时间相关的类型；

业务相关的类型；

自定义的其他类型。

本申请实施例还公开了一种数据可视化页面的生成方法，所述方法包括：

在可视化页面的配置过程中，为页面中的可视化对象添加事件参数；

在可视化页面渲染时，将所述事件参数注册到页面，以监听对应的事件。

优选地，所述方法还包括：

接收浏览器中的可视化对象发送的数据获取请求，所述数据获取请求包括事件参数；

基于所述事件参数，从数据源中获取对应的目标数据；

将所述目标数据返回对应的可视化对象中。

优选地，所述事件参数包括事件标识以及对应的事件值。

优选地，所述事件参数包括如下类型的一种或结合：

在整个页面都有效的全局级类型；

在布局组件内有效的布局级类型；

在模块组件内有效的模块级类型；

时间相关的类型；

业务相关的类型；

自定义的其他类型。

优选地，所述可视化对象包括布局组件以及模块组件，在所述在可视化页面渲染时，将所述事件参数注册到页面，以监听对应的事件的步骤之前，所述方法还包括：

设定所述布局组件和/或所述模块组件的传播范围。

优选地，所述设定所述布局组件和/或所述模块组件的传播范围的步骤包括：

若当前组件为布局组件，则与其属于同一传播范围的组件包括：

所述布局组件嵌套的模块组件；以及与所述布局组件属于同一布局组件的其他布局组件，以及，所述其他布局组件嵌套的模块组件；

与所述模块组件属于同一布局组件的其他模块组件。

本申请实施例还公开了一种基于可视化页面的数据监听方法，所述可视化页面包括多个可视化对象，所述可视化对象具有关联的事件参数，所述事件参数用于对页面中的对应事件进行监听；

所述方法包括：

当可视化页面中被监听的事件被触发时，确定监听所述事件的目标可视化对象；

确定所述事件的事件参数；

所述目标可视化对象根据所述事件参数，从服务器侧的数据源中获取对应的目标数据。

本申请实施例还公开了一种数据可视化页面的展示浏览器，所述浏览器包括：

页面展现模块，用于展现可视化页面，所述可视化页面中包括多个可视化对象，所述可视化对象具有关联的事件参数，所述事件参数用于对页面中的对应事件进行监听；

可视化对象确定模块，用于当监听到事件被触发时，确定监听所述事件的一个或多个目标可视化对象；

目标数据获取模块，用于通过所述目标可视化对象根据所述触发的事件对应的事件参数，从服务器侧的数据源中获取对应的目标数据；

填充模块，用于将所述目标数据填充在对应的目标可视化对象中。

本申请实施例还公开了一种数据可视化页面的生成服务器，所述服务器包括：

事件参数添加模块，用于在可视化页面的配置过程中，为页面中的可视化对象添加事件参数；

事件参数注册模块，用于在可视化页面渲染时，将所述事件参数注册到页面，以监听对应的事件。

本申请实施例还公开了一种基于可视化页面的数据监听装置，所述可视化页面包括多个可视化对象，所述可视化对象具有关联的事件参数，所述事件参数用于对页面中的对应事件进行监听；

所述装置包括：

可视化对象确定模块，用于当可视化页面中被监听的事件被触发时，确定监听所述事件的目标可视化对象；

事件参数确定模块，用于确定所述事件的事件参数；

交互模块，用于通过所述目标可视化对象根据所述事件参数，从服务器侧的数据源中获取对应的目标数据。

本申请实施例还公开了一种装置，包括：

一个或多个处理器；和

其上存储有指令的一个或多个机器可读介质，当由所述一个或多个处理器执行时，使得所述装置执行上述的一种数据可视化页面的展示方法，和/或，一种数据可视化页面的生成方法，和/或，一种基于可视化页面的数据监听方法。

本申请实施例还公开了一个或多个机器可读介质，其上存储有指令，当由一个或多个处理器执行时，使得装置执行上述的一种数据可视化页面的展示方法，和/或，一种数据可视化页面的生成方法，和/或，一种基于可视化页面的数据监听方法。

本申请实施例包括以下优点：

在本申请实施例中，通过对可视化页面中的可视化对象添加事件参数，当监听到事件被触发时，确定监听该事件的一个或多个目标可视化对象，由该目标可视化对象根据所述触发的事件对应的事件参数，从数据源中获取对应的目标数据进行填充，实现可视化对象与后台数据源的复杂功能性交互，一个事件触发可以联动一个或多个目标可视化对象，实现组件与组件，组件与组件容器之间复杂协作的参数传递机制，拓展了各式各样的数据可视化场景。

附图说明

图1是本申请的一种数据可视化页面的展示方法实施例的步骤流程图；

图2是本申请的可视化页面示意图；

图3是本申请的事件参数类型划分示意图；

图4是本申请的传播范围示意图；

图5是本申请的组件结构设计示意图；

图6是本申请的一种数据可视化页面的展示方法另一实施例的步骤流程图；

图7是本申请的一种数据可视化页面的生成方法实施例的步骤流程图；

图8是本申请的页面配置示意图；

图9是本申请的一种基于可视化页面的数据监听方法实施例的步骤流程图；

图10是本申请的一种数据可视化页面的展示浏览器实施例的结构框图；

图11是本申请的一种数据可视化页面的生成服务器实施例的结构框图；

图12是本申请的一种基于可视化页面的数据监听装置实施例的结构框图；

图13是本申请的一种系统实施例的结构示意图。

具体实施方式

为使本申请的上述目的、特征和优点能够更加明显易懂，下面结合附图和具体实施方式对本申请作进一步详细的说明。

本申请实施例能够解决的技术问题是在数据可视化工程领域下，通过可视化组价复用，动态拼装可视化数据页面的情况下，遇到的页面与后台数据源缺乏灵活的和易于扩展的数据交互的问题，极大地扩大了数据可视化场景。

本申请实施例提供了一种基于数据可视化的交互参数透传机制，涉及到一套完整的交互参数体系，该交互参数体系可以包括多种事件类型支持、事件传播范围控制以及前端事件联动规则定义等机制。

(1)多种事件类型支持

交互参数体系需要支持的事件参数的划分。按作用域需要支持三类作用范围：页面全局，子报表(布局级)，模块级。从约定类型上看分成固定不变的参数事件和自定义的动态参数。固定参数又分成时间类和业务相关类，自定义动态参数事件可以包括搜索框参数、下拉枚举参数、级联下拉参数等。交互参数体系需要在它们的作用域属性和类别属性上进行笛卡尔积上的支持。

这种在交互参数事件上的完备支持，对参数时间职责属性合理的划分，同时由于属性维度上的组合，就衍生出庞大的事件参数集合。

(2)事件传播范围控制

为了支持组件之间的联动问题，前端定义了一套事件机制，事件的具体实现是通过每个组件附加一组参数：

args：{k1:v1；k2:v2...kn,vn}；

其中，kn表示某个监听的事件标示，同时根据组件嵌套的关系，定义了事件的传播范围。某个事件标示kn对于的值vn改变时，在其嵌套和同级范围内将相同的kn对应的vn重置。

同时后台提供一套事件传播的控制机制，来控制事件传播范围。

在组件渲染过程中，由于layout的容器属性会递归渲染它包含的其他组件，在递归渲染过程中添加了对自定义事件的逻辑控制：一方面控制已有的自定义事件是否在嵌套渲染过程中透传给下面的组件节点，另一面允许添加额外的需要传递的事件参数。

(3)前端事件联动规则定义

服务端在页面渲染过程中，完成了对多种参数事件类型的支持，同时完成了对事件监听范围的传播的控制。在前端页面上就需要一套事件联动的规则定义来支持页面事件与数据源的互动关系。

在建立组件间的关系，实现一些组件的联动效果的时候，采用数据来作为连接组件的方式，一是组件是一些数据的表示；二是组件的变化用数据的变化来表示。通过以上两点，表示的数据有一定交集的组件认为是有关联的，当一个组件的状态变化的时候，那其所表现的数据也一定会有变化，这时，和它表现相同数据的其他组件也相应有所变化。

在实际的使用过程中，可能并不希望数据的变化影响的范围是全局的，就类似变量的作用域，希望数据的变化是局部的。所以可以设置作用域dataLayout，其作用就是数据的变动，只在dataLayout内有效，在dataLayout之外，即使关联了相同的数据，也不会变更。

在本申请实施例中，多种事件类型支持和事件传播范围控制是通过服务器完成的，事件联动规则定义是前端约定的一套页面事件的联动规则，这套规则根据服务端透出到页面的事件情况进行作用。所以由前端和后台的配合以及三项的支持：多种事件类型支持、事件传播范围控制以及前端事件联动规则定义来支撑了这套基于数据可视化组件的交互参数透传机制。

本申请实施例涉及浏览器与服务器的交互，以下分别从两侧进行具体说明：

参考图1，示出了本申请的一种数据可视化页面的展示方法实施例的步骤流程图，本申请实施例从浏览器侧进行说明，可以包括如下步骤：

步骤101，展现可视化页面，所述可视化页面中包括多个可视化对象，所述可视化对象具有关联的事件参数，所述事件参数用于对页面中的对应事件进行监听；

具体的，一个可视化页面可以包括多个可视化对象，可视化对象可以为可视化组件，可视化组件是一类将数据通过图形图像形式表达的，可以被重复使用的具有单独功能的程序对象单元。

在具体实现中，可以通过独立的可视化对象来进行数据的可视化，可视化对象可以从数据源中获取数据，并将数据绘制成相应的可视化形式，如表格、曲线图、折线图、饼图、柱状图、仪表盘等。

可视化对象可以为可视化组件的实例化，可视化对象可以包括如下特点：

(1)可视化对象支持多数据源，可以将来自不同数据源的数据在一个对象中绘制成曲线进行对比，其中，数据源是指用户需要展示的数据，一般来说是其业务过程中产生并存储的数据；

(2)可视化对象支持“下钻”(drii down)功能，对于一个数据点，指定一个下级的可视化对象，它接收上级可视化对象的一个数据并获取该数据的更详细数据集，并将其显示给用户；

(3)下级可视化对象可以是页面中的一个可视化对象，也可以是页面中以鼠标悬停时出现的一个可视化对象；

(4)可视化对象包括一些基本的属性，如唯一标识、类型、数据来源、显示方式等，可视化对象还可以实现一些基本的管理接口，如对象的创建/销毁，对象状态数据的加载和读取。

在本申请实施例中，可视化对象可以包括布局组件layout以及模块组件model，其中，layout组件可以作为一种组件容器，嵌套model组件和layout组件，其中，组件容器代表一组数据可视化组件的集合，它的特别之处在于不但可以嵌套数据组件，还可以嵌套组件容器，这种递归嵌套机制很好地扩展了可视化组件组合的灵活性，能实现复杂的页面结构效果。

例如，如图2的可视化页面示意图所示，该可视化页面可以包括layout组件、model组件以及select组件，layout组件可以嵌套layout组件、model组件以及select组件。

在本申请实施例中，可视化对象具有关联的事件参数args，该事件参数可以用于对页面中的对应事件event进行监听。

具体的，事件参数是一类用于用户界面的可视化组件之间相互协作的参数。在后台配置流程中，可以对model组件或者layout组件添加特定的事件参数，然后在页面渲染初始化加载的时候，这些事件参数被注册到页面上，监听前端事件。

作为本申请实施例的一种示例，事件参数可以包括事件标识以及对应的事件值，在一种实施方式中，该事件标识以及对应的事件值可以以键值对的形式存储，作为一种示例，事件参数可以表示为：

args：{k1:v1；k2:v2...kn,vn}；

其中，kn表示某个监听的事件标识，vn表示事件值。

例如，若事件参数为：big_group:手机，则“big_group”为监听的事件，即某个大组，“手机”为对应的事件值。

在本申请实施例中，为了支持更多的交互场景，支持搭建结构复杂的页面，可以在后台设置该事件参数为多种事件类型支持的参数，具体的，该事件参数可以包括如下类型的一种或结合：在整个页面都有效的全局级类型；在布局组件内有效的布局级类型；在模块组件内有效的模块级类型；时间相关的类型；业务相关的类型；自定义的其他类型。

具体的，参照图3的事件参数类型划分示意图，该示意图示出的是事件参数的类型划分。按作用域属性划分，事件参数至少可以支持三类作用范围：页面全局(全局级类型)，子报表(布局级类型)，模块级类型，其中，全局级类型为url中的参数对整个页面生效；布局级类型为对该布局对应的子报表生效；模块级类型是指对当前模块组件生效。

按类别属性划分，可以分成固定不变的固定事件参数和自定义的动态事件参数。

固定事件参数可以包括时间相关的类型和业务相关的类型。

作为一种示例，时间相关的类型对应的事件标识可以包括：当前时间、开始时间、结束时间、月、周、日等；业务相关的类型对应的事件标识可以包括：活动id、站点id、维度id等。

动态事件参数可以包括搜索框参数、下拉枚举参数、级联下拉参数等。

在实际中，上述不同类型的事件参数可以在其作用域属性和类别属性上进行笛卡尔积上的支持，从而衍生出庞大的事件参数集合。

步骤102，当监听到事件被触发时，确定监听所述事件的一个或多个目标可视化对象；

在本申请实施例中，可以在后台定义事件联动机制来支持页面事件与数据源的互动关系，当监听某个事件被触发时，可以确定监听该事件的一个或多个可视化对象，作为目标可视化对象。

在本申请实施例的一种优选实施例中，步骤102可以包括如下子步骤：

子步骤S11，当监听到指定可视化对象的事件值发生变化时，确定所述事件值对应的事件标识；

在具体实现中，当用户在可视化页面中执行操作或者页面中的数据发生变化时，事件参数中的事件值value相应发生变化，根据键值对的关系，可以确定该发生变化的value对应的事件标识。而该键值对又是注册在某个组件中的，根据该键值对，可以确定对应的可视化对象，即指定可视化对象。

例如，在图2中，假设最上面的左边的下拉筛选框select组件内的值是行业大组，此时选中的是女装行业，当变更为手机行业时，监听到该组件事件的事件值发生变化(由女装变更为手机)，则根据该变化的事件值，联动对应的事件标识为big_group，此时的事件参数为：“big_group：手机”。

子步骤S12，所述指定可视化对象将所述事件标识以及对应的变化后的事件值，传播至同一传播范围内的，监听了所述事件标识的目标可视化对象中。

在本申请实施例中，为了支持组件之间的联动问题，还设置了一套事件传播范围控制机制，该机制根据组件嵌套的关系，定义了事件的传播范围，将组件的嵌套组件和同级组件作为同一传播范围。

具体的，若当前组件为布局组件，则与其属于同一传播范围的组件可以包括：所述布局组件嵌套的模块组件；以及与所述布局组件属于同一布局组件的其他布局组件，以及，所述其他布局组件嵌套的模块组件。

若当前组件为模块组件，则与其属于同一传播范围的组件可以包括：与所述模块组件属于同一布局组件的其他模块组件。

例如，如图4的传播范围示意图所示，若layoutB的事件kn变化，它的传播范围是layoutB、model1、model2、model3、layoutC(layoutB与layoutC同属于layoutA，因此layoutB与layoutC属于同一层级)、layoutD、layoutD下的两个model组成的范围。

若layoutD的事件kn变化，它的传播范围是layoutD与layoutD下的两个model组成的范围。

若model1的事件kn变化，它的传播范围是model1、model2与model3组成的范围。

同时服务器侧还提供一套事件传播的控制机制来控制事件传播范围。如图5的组件结构设计示意图所示，layout组件作为一种容器，可以嵌套model组件和layout组件。

在组件渲染过程中，由于layout的容器属性会递归渲染它包含的其他组件，本申请实施例在递归渲染过程中添加了对自定义事件的逻辑控制：一方面控制已有的自定义事件是否在嵌套渲染过程中透传给下面的组件节点，另一面允许添加额外的需要传递的事件参数。

在子步骤S12中，当指定可视化对象确定了触发的事件标识以后，可以将该事件标识以及对应的变化后的事件值，传播至同一传播范围内的，监听了该事件标识的目标可视化对象中。

例如，在图2中，若选择最上面的左边的下拉筛选框select组件，该组件为全局级layout下的组件，则与其属于同一传播范围的目标可视化对象可以包括该layout内部的所有监听了big_group事件的组件，如，下层级的layout组件及其嵌套的model组件，下层级的model组件等。在图2中，最上面的左边的下拉筛选框select组件可以将事件参数“big_group：手机”传播至同一传播范围内的所有监听了big_group事件的组件中。

步骤103，所述目标可视化对象根据所述触发的事件对应的事件参数，从服务器侧的数据源中获取对应的目标数据。

目标可视化对象监听到事件参数以后，可以根据该事件参数从数据源中获取目标数据。

在本申请实施例的一种优选实施例中，步骤103可以包括如下子步骤：

子步骤S21，所述目标可视化对象基于所述事件标识以及对应的变化后的事件值，生成数据获取请求；

子步骤S22，将所述数据获取请求发送至服务器中；

子步骤S23，接收所述服务器基于所述数据获取请求返回的，从数据源中获取的目标数据。

具体的，目标可视化对象获得事件标识以及对应的变化后的事件值以后，可以基于该事件标识以及对应的变化后的事件值生成数据获取请求，则该数据获取请求可以包括组件标识、事件标识以及对应的变化后的事件值等。

生成数据获取请求以后，目标可视化组件可以将该数据获取请求发送至后台服务器，服务器接收到该数据获取请求以后，根据该事件标识以及对应的变化后的事件值从数据源中获取对应的目标数据，并将该目标数据返回对应的目标可视化对象中。

例如，在图2中，所有在select组件所在的layout内监听了big_group事件的组件，可以根据“big_group:手机”去后台数据源获取对应的目标数据。

步骤104，将所述目标数据填充在对应的目标可视化对象中。

当目标可视化对象获得目标数据以后，可以将该目标数据填充在对应的目标可视化对象中，以实现可视化显示。

参考图6，示出了本申请的一种数据可视化页面的展示方法另一实施例的步骤流程图，可以包括如下步骤：

步骤601，展现可视化页面，所述可视化页面中包括多个可视化对象，所述可视化对象具有关联的事件参数，所述事件参数用于对页面中的对应事件进行监听；

在本申请实施例中，可视化对象可以包括布局组件layout以及模块组件model，其中，layout组件可以作为一种组件容器，嵌套model组件和layout组件。

可视化对象具有关联的事件参数args，该事件参数可以用于对页面中的对应事件event进行监听。

args：{k1:v1；k2:v2...kn,vn}；

其中，kn表示某个监听的事件标识，vn表示事件值。

步骤602，当监听到事件被触发时，确定监听所述事件的一个或多个目标可视化对象；

在本申请实施例中，可以定义事件联动机制来支持页面事件与数据源的互动关系，当监听某个事件被触发时，可以确定监听该事件的一个或多个可视化对象，作为目标可视化对象。

在本申请实施例的一种优选实施例中，步骤602可以包括如下子步骤：

当监听到指定可视化对象的事件值发生变化时，确定所述事件值对应的事件标识；所述指定可视化对象将所述事件标识以及对应的变化后的事件值，传播至同一传播范围内的，监听了所述事件标识的目标可视化对象中。

步骤603，所述目标可视化对象根据所述触发的事件对应的事件参数，从服务器侧的数据源中获取对应的目标数据；

在本申请实施例的一种优选实施例中，步骤603可以包括如下子步骤：

所述目标可视化对象基于所述事件标识以及对应的变化后的事件值，生成数据获取请求；将所述数据获取请求发送至服务器中；接收所述服务器基于所述数据获取请求返回的，从数据源中获取的目标数据。

步骤604，将所述目标数据填充在对应的目标可视化对象中；

步骤605，基于所述目标数据触发属于同一可视化对象内的其他事件，继续执行步骤602。

在本申请实施例中，当目标数据填充在目标可视化对象以后，目标可视化对象中的数据发生变化，可以进一步联动该目标可视化对象的其他事件，其他事件根据变更的事件值以及事件标识，向数据源获取目标数据进行填充。

例如，在图2中，假设最上面的左边的下拉筛选框select组件内的值是行业大组，此时选中的是女装行业，当变更为手机行业时，监听到该组件事件的事件值发生变化(由女装变更为手机)，则根据该变化的事件值，联动对应的事件标识为big_group，此时的事件参数为：“big_group：手机”。select组件传播事件参数“big_group：手机”，此时在该layout内部的所有监听了“big_group”事件的组件，可以根据“big_group：手机”去后台数据源中获取对应的目标数据来填充组件，同时，对于内层的select组件，如果也监听了“big_group”事件，根据目标数据更新自己的下拉值，假设为“手机配件”，该下拉值更新联动触发对应的的事件标识，假设为“small_group”，则更新的事件参数为“small_group:手机配件”，这时也会触发它的内层模块监听了“small_group”的组件发出数据请求，携带参数“small_group:手机配件”。

又如，可视化页面中某个layout组件为时间组件，其事件参数为{date：2017-9}，嵌套的model组件“活动列表”的事件参数为{date：2017-9；activityid：“”}；嵌套的layout组件“活动详情”的事件参数为{activityid：“”}。若时间组件的date的vn发生变化，由于model组件“活动列表”中监听了“date”，则model组件“活动列表”会发出包含date以及变化后的值的数据请求，返回的数据可以使model组件“活动列表”中的“activityid”的值发生变化，触发layout组件“活动详情”发出包括“activityid”以及变化后的值的数据请求。

在本申请实施例中，目标数据填充在对应的目标可视化对象以后，可以触发属于同一可视化对象内的其他事件，这样可以触发监听在该事件的数据源发生相应的变更，修改对应的事件参数，并向后台数据源发出请求，获得对应的目标数据进行填充，解决模块组件之间数据依赖的问题，提高模块组件之间的依赖性。

参考图7，示出了本申请的一种数据可视化页面的生成方法实施例的步骤流程图，本申请实施例可以应用于服务器侧，具体可以包括如下步骤：

步骤701，在可视化页面的配置过程中，为页面中的可视化对象添加事件参数；

参考图8所示的页面配置示意图，在页面配置流程中，经过选择布局组件以及选择模块组件步骤后，进入配置样式的步骤，在该步骤中，可以进行基本配置、样式配置、时间配置、以及事件参数等其他配置，配置完成以后，可以发布该页面。

在本申请实施例中，所述事件参数包括事件标识以及对应的事件值。

在本申请实施例中，所述事件参数可以包括如下类型的一种或结合：

在整个页面都有效的全局级类型；

在布局组件内有效的布局级类型；

在模块组件内有效的模块级类型；

时间相关的类型；

业务相关的类型；

自定义的其他类型。

步骤702，在可视化页面渲染时，将所述事件参数注册到页面，以监听对应的事件。

在本申请实施例的一种优选实施例中，还可以包括如下步骤：

接收浏览器中的可视化对象发送的数据获取请求，所述数据获取请求包括事件参数；基于所述事件参数，从数据源中获取对应的目标数据；将所述目标数据返回对应的可视化对象中。

在本申请实施例的一种优选实施例中，所述可视化对象包括布局组件以及模块组件，在步骤702之前，还可以包括如下步骤：

设定所述布局组件和/或所述模块组件的传播范围。

在本申请实施例的一种优选实施例中，所述设定所述布局组件和/或所述模块组件的传播范围的步骤包括：

若当前组件为布局组件，则与其属于同一传播范围的组件可以包括：

若当前组件为模块组件，则与其属于同一传播范围的组件可以包括：

与所述模块组件属于同一布局组件的其他模块组件。

对于图7的方法实施例而言，由于其与上述图1-图6的方法实施例基本相似，所以描述的比较简单，相关之处参见上述图1-图6的方法实施例的部分说明即可。

参考图9，示出了本申请的一种基于可视化页面的数据监听方法实施例的步骤流程图，本申请实施例中的可视化页面可以包括多个可视化对象，每个可视化对象具有关联的事件参数，该事件参数用于对页面中的对应事件进行监听；

本申请实施例可以应用于浏览器侧，具体可以包括如下步骤：

步骤901，当可视化页面中被监听的事件被触发时，确定监听所述事件的目标可视化对象；

步骤902，确定所述事件的事件参数；

步骤903，所述目标可视化对象根据所述事件参数，从服务器侧的数据源中获取对应的目标数据。

在本申请实施例的一种优选实施例中，在步骤903之后，还可以包括如下步骤：

基于所述目标数据触发属于同一可视化对象内的其他事件。

当其他事件被触发后，可以继续按照步骤901-903方式获取该其他事件的目标数据，以实现事件联动机制。

在本申请实施例的一种优选实施例中，所述事件参数包括事件标识以及对应的事件值；步骤901进一步可以包括如下子步骤：

在本申请实施例的一种优选实施例中，步骤903可以包括如下子步骤：

将所述数据获取请求发送至服务器中；

在本申请实施例的一种优选实施例中，所述可视化对象包括布局组件以及模块组件，若当前组件为布局组件，则与其属于同一传播范围的组件包括：

所述布局组件嵌套的模块组件；以及

与所述模块组件属于同一布局组件的其他模块组件。

在本申请实施例的一种优选实施例中，所述事件参数包括如下类型的一种或结合：

在整个页面都有效的全局级类型；

在布局组件内有效的布局级类型；

在模块组件内有效的模块级类型；

时间相关的类型；

业务相关的类型；

自定义的其他类型。

对于图9的方法实施例而言，由于其与上述图1-图7的方法实施例基本相似，所以描述的比较简单，相关之处参见上述图1-图7的方法实施例的部分说明即可。

需要说明的是，对于方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本申请实施例并不受所描述的动作顺序的限制，因为依据本申请实施例，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作并不一定是本申请实施例所必须的。

参照图10，示出了本申请的一种数据可视化页面的展示浏览器实施例的结构框图，所述系统具体可以包括如下模块：

页面展现模块1001，用于展现可视化页面，所述可视化页面中包括多个可视化对象，所述可视化对象具有关联的事件参数，所述事件参数用于对页面中的对应事件进行监听；

目标可视化对象确定模块1002，用于当监听到事件被触发时，确定监听所述事件的一个或多个目标可视化对象；

目标数据获取模块1003，用于通过所述目标可视化对象根据所述触发的事件对应的事件参数，从服务器侧的数据源中获取对应的目标数据；

填充模块1004，用于将所述目标数据填充在对应的目标可视化对象中。

在本申请实施例的一种优选实施例中，所述浏览器还包括：

事件触发模块，用于基于所述目标数据触发属于同一可视化对象内的其他事件，继续调用联动模块。

在本申请实施例的一种优选实施例中，所述事件参数包括事件标识以及对应的事件值；所述联动模块1002可以包括：

事件标识确定子模块，用于当监听到指定可视化对象的事件值发生变化时，确定所述事件值对应的事件标识；

事件参数传播子模块，用于所述指定可视化对象将所述事件标识以及对应的变化后的事件值，传播至同一传播范围内的，监听了所述事件标识的目标可视化对象中。

在本申请实施例的一种优选实施例中，所述目标数据获取模块1003可以包括：

数据获取请求生成子模块，用于所述目标可视化对象基于所述事件标识以及对应的变化后的事件值，生成数据获取请求；

数据获取请求发送子模块，用于将所述数据获取请求发送至服务器中；

目标数据接收子模块，用于接收所述服务器基于所述数据获取请求返回的，从数据源中获取的目标数据。

在本申请实施例的一种优选实施例中，所述可视化对象包括布局组件以及模块组件，若当前组件为布局组件，则与其属于同一传播范围的组件可以包括：

所述布局组件嵌套的模块组件；以及

与所述模块组件属于同一布局组件的其他模块组件。

在整个页面都有效的全局级类型；

在布局组件内有效的布局级类型；

在模块组件内有效的模块级类型；

时间相关的类型；

业务相关的类型；

自定义的其他类型。

对于浏览器实施例而言，由于其与上述方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

参照图11，示出了本申请的一种数据可视化页面的生成服务器实施例的结构框图，所述系统具体可以包括如下模块：

事件参数添加模块1101，用于在可视化页面的配置过程中，为页面中的可视化对象添加事件参数；

事件参数注册模块1102，用于在可视化页面渲染时，将所述事件参数注册到页面，以监听对应的事件。

在本申请实施例的一种优选实施例中，所述服务器还包括：

数据获取请求接收模块，用于接收浏览器中的可视化对象发送的数据获取请求，所述数据获取请求包括事件参数；

目标数据获取模块，用于基于所述事件参数，从数据源中获取对应的目标数据；

目标数据返回模块，用于将所述目标数据返回对应的可视化对象中。

在本申请实施例的一种优选实施例中，所述事件参数包括事件标识以及对应的事件值。

在整个页面都有效的全局级类型；

在布局组件内有效的布局级类型；

在模块组件内有效的模块级类型；

时间相关的类型；

业务相关的类型；

自定义的其他类型。

在本申请实施例的一种优选实施例中，所述可视化对象包括布局组件以及模块组件，所述服务器还包括：

传播范围设定模块，用于设定所述布局组件和/或所述模块组件的传播范围。

在本申请实施例的一种优选实施例中，所述传播范围设定模块还用于：

与所述模块组件属于同一布局组件的其他模块组件。

对于服务器实施例而言，由于其与上述方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

参照图12，示出了本申请的一种基于可视化页面的数据监听装置实施例的结构框图，所述可视化页面包括多个可视化对象，所述可视化对象具有关联的事件参数，所述事件参数用于对页面中的对应事件进行监听；

所述装置具体可以包括如下模块：

可视化对象确定模块1201，用于当可视化页面中被监听的事件被触发时，确定监听所述事件的目标可视化对象；

事件参数确定模块1202，用于确定所述事件的事件参数；

交互模块1203，用于通过所述目标可视化对象根据所述事件参数，从服务器侧的数据源中获取对应的目标数据。

对于装置实施例而言，由于其与上述方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

本公开的实施例可被实现为使用任意适当的硬件，固件，软件，或及其任意组合进行想要的配置的系统。图13示意性地示出了可被用于实现本公开中所述的各个实施例的示例性系统(或装置)1300。

对于一个实施例，图13示出了示例性系统1300，该系统具有一个或多个处理器1302、被耦合到(一个或多个)处理器1302中的至少一个的系统控制模块(芯片组)1304、被耦合到系统控制模块1304的系统存储器1306、被耦合到系统控制模块1304的非易失性存储器(NVM)/存储设备1308、被耦合到系统控制模块1304的一个或多个输入/输出设备1310，以及被耦合到系统控制模块1306的网络接口1312。

处理器1302可包括一个或多个单核或多核处理器，处理器1302可包括通用处理器或专用处理器(例如图形处理器、应用处理器、基频处理器等)的任意组合。在一些实施例中，系统1300能够作为本申请实施例中所述的数据平台。

在一些实施例中，系统1300可包括具有指令的一个或多个计算机可读介质(例如，系统存储器1306或NVM/存储设备1308)以及与该一个或多个计算机可读介质相合并被配置为执行指令以实现模块从而执行本公开中所述的动作的一个或多个处理器1302。

对于一个实施例，系统控制模块1304可包括任意适当的接口控制器，以向(一个或多个)处理器1302中的至少一个和/或与系统控制模块1304通信的任意适当的设备或组件提供任意适当的接口。

系统控制模块1304可包括存储器控制器模块，以向系统存储器1306提供接口。存储器控制器模块可以是硬件模块、软件模块和/或固件模块。

系统存储器1306可被用于例如为系统1300加载和存储数据和/或指令。对于一个实施例，系统存储器1306可包括任意适当的易失性存储器，例如，适当的DRAM。在一些实施例中，系统存储器1306可包括双倍数据速率类型四同步动态随机存取存储器(DDR11SDRAM)。

对于一个实施例，系统控制模块1304可包括一个或多个输入/输出控制器，以向NVM/存储设备1308及(一个或多个)输入/输出设备1310提供接口。

例如，NVM/存储设备1308可被用于存储数据和/或指令。NVM/存储设备1308可包括任意适当的非易失性存储器(例如，闪存)和/或可包括任意适当的(一个或多个)非易失性存储设备(例如，一个或多个硬盘驱动器(HDD)、一个或多个光盘(CD)驱动器和/或一个或多个数字通用光盘(DVD)驱动器)。

NVM/存储设备1308可包括在物理上作为系统1300被安装在其上的设备的一部分的存储资源，或者其可被该设备访问而不必作为该设备的一部分。例如，NVM/存储设备1308可通过网络经由(一个或多个)输入/输出设备1310进行访问。

(一个或多个)输入/输出设备1310可为系统1300提供接口以与任意其他适当的设备通信，输入/输出设备1310可以包括通信组件、音频组件、传感器组件等。网络接口1312可为系统1300提供接口以通过一个或多个网络通信，系统1300可根据一个或多个无线网络标准和/或协议中的任意标准和/或协议来与无线网络的一个或多个组件进行无线通信，例如接入基于通信标准的无线网络，如WiFi，2G或3G，或它们的组合进行无线通信。

对于一个实施例，(一个或多个)处理器1302中的至少一个可与系统控制模块1304的一个或多个控制器(例如，存储器控制器模块)的逻辑封装在一起。对于一个实施例，(一个或多个)处理器1302中的至少一个可与系统控制模块1304的一个或多个控制器的逻辑封装在一起以形成系统级封装(SiP)。对于一个实施例，(一个或多个)处理器1302中的至少一个可与系统控制模块1304的一个或多个控制器的逻辑集成在同一模具上。对于一个实施例，(一个或多个)处理器1302中的至少一个可与系统控制模块1304的一个或多个控制器的逻辑集成在同一模具上以形成片上系统(SoC)。

在各个实施例中，系统1300可以但不限于是：浏览器、工作站、台式计算设备或移动计算设备(例如，膝上型计算设备、手持计算设备、平板电脑、上网本等)。在各个实施例中，系统1300可具有更多或更少的组件和/或不同的架构。例如，在一些实施例中，系统1300包括一个或多个摄像机、键盘、液晶显示器(LCD)屏幕(包括触屏显示器)、非易失性存储器端口、多个天线、图形芯片、专用集成电路(ASIC)和扬声器。

其中，如果显示器包括触摸面板，显示屏可以被实现为触屏显示器，以接收来自用户的输入信号。触摸面板包括一个或多个触摸传感器以感测触摸、滑动和触摸面板上的手势。所述触摸传感器可以不仅感测触摸或滑动动作的边界，而且还检测与所述触摸或滑动操作相关的持续时间和压力。

本申请实施例还提供了一种非易失性可读存储介质，该存储介质中存储有一个或多个模块(programs)，该一个或多个模块被应用在终端设备时，可以使得该终端设备执行本申请实施例中上述方法各个步骤的指令(instructions)。

在一个示例中提供了一种装置，包括：一个或多个处理器；和，其上存储的有指令的一个或多个机器可读介质，当由所述一个或多个处理器执行时，使得所述装置执行如本申请实施例中的上述方法各个步骤的指令(instructions)。

本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。

本领域内的技术人员应明白，本申请实施例的实施例可提供为客户端、装置、或计算机程序产品。因此，本申请实施例可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请实施例可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本申请实施例是参照根据本申请实施例的客户端、终端设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理终端设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理终端设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理终端设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理终端设备上，使得在计算机或其他可编程终端设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程终端设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

尽管已描述了本申请实施例的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例做出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本申请实施例范围的所有变更和修改。

最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、客户端、物品或者终端设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、客户端、物品或者终端设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、客户端、物品或者终端设备中还存在另外的相同要素。

以上对本申请所提供的一种数据可视化页面的生成、监听及展示方法、浏览器及服务器进行了详细介绍，本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的客户端及其核心思想；同时，对于本领域的一般技术人员，依据本申请的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本申请的限制。

Claims

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

将所述目标数据填充在对应的目标可视化对象中。

2.根据权利要求1所述的方法，其特征在于，在所述将所述目标数据填充在对应的目标可视化对象中的步骤之后，还包括：

3.根据权利要求1或2所述的方法，其特征在于，所述事件参数包括事件标识以及对应的事件值；所述当监听到事件被触发时，确定监听所述事件的一个或多个目标可视化对象的步骤包括：

4.根据权利要求3所述的方法，其特征在于，所述目标可视化对象根据所述触发的事件对应的事件参数，从服务器侧的数据源中获取对应的目标数据的步骤包括：

将所述数据获取请求发送至服务器中；

5.根据权利要求3所述的方法，其特征在于，所述可视化对象包括布局组件以及模块组件，若当前组件为布局组件，则与其属于同一传播范围的组件包括：

所述布局组件嵌套的模块组件；以及

与所述模块组件属于同一布局组件的其他模块组件。

6.根据权利要求1所述的方法，其特征在于，所述事件参数包括如下类型的一种或结合：

在整个页面都有效的全局级类型；

在布局组件内有效的布局级类型；

在模块组件内有效的模块级类型；

时间相关的类型；

业务相关的类型；

自定义的其他类型。

7.一种数据可视化页面的生成方法，其特征在于，所述方法包括：

8.根据权利要求7所述的方法，其特征在于，还包括：

基于所述事件参数，从数据源中获取对应的目标数据；

将所述目标数据返回对应的可视化对象中。

9.根据权利要求7或8所述的方法，其特征在于，所述事件参数包括事件标识以及对应的事件值。

10.根据权利要求7所述的方法，其特征在于，所述事件参数包括如下类型的一种或结合：

在整个页面都有效的全局级类型；

在布局组件内有效的布局级类型；

在模块组件内有效的模块级类型；

时间相关的类型；

业务相关的类型；

自定义的其他类型。

11.根据权利要求7或10所述的方法，其特征在于，所述可视化对象包括布局组件以及模块组件，在所述在可视化页面渲染时，将所述事件参数注册到页面，以监听对应的事件的步骤之前，所述方法还包括：

设定所述布局组件和/或所述模块组件的传播范围。

12.根据权利要求11所述的方法，其特征在于，所述设定所述布局组件和/或所述模块组件的传播范围的步骤包括：

与所述模块组件属于同一布局组件的其他模块组件。

13.一种基于可视化页面的数据监听方法，其特征在于，所述可视化页面包括多个可视化对象，所述可视化对象具有关联的事件参数，所述事件参数用于对页面中的对应事件进行监听；

所述方法包括：

确定所述事件的事件参数；

14.一种数据可视化页面的展示浏览器，其特征在于，所述浏览器包括：

15.一种数据可视化页面的生成服务器，其特征在于，所述服务器包括：

16.一种基于可视化页面的数据监听装置，其特征在于，所述可视化页面包括多个可视化对象，所述可视化对象具有关联的事件参数，所述事件参数用于对页面中的对应事件进行监听；

所述装置包括：

事件参数确定模块，用于确定所述事件的事件参数；

17.一种装置，其特征在于，包括：

一个或多个处理器；和

其上存储有指令的一个或多个机器可读介质，当由所述一个或多个处理器执行时，使得所述装置执行如权利要求1-6一个或多个的一种数据可视化页面的展示方法，和/或，权利要求7-12一个或多个的一种数据可视化页面的生成方法，和/或，权利要求13的一种基于可视化页面的数据监听方法。

18.一个或多个机器可读介质，其上存储有指令，当由一个或多个处理器执行时，使得装置执行如权利要求1-6一个或多个的一种数据可视化页面的展示方法，和/或，权利要求7-12一个或多个的一种数据可视化页面的生成方法，和/或，权利要求13的一种基于可视化页面的数据监听方法。