CN105528218B - 数据图表级联方法及数据图表级联系统 - Google Patents

Abstract

一种数据图表级联方法及数据图表级联系统，所述数据图表级联方法，包括：Web页面加载有级联客户端，级联客户端监听已注册图表的序列点的点击事件，从所述点击事件的信息中获取图表的标识和所点击的序列点对应的分类值；级联客户端根据所述图表的标识查找对应的子图表标识；级联客户端向级联服务器发出序列数据请求；级联服务器向级联客户端发送第一响应信息，所述第一响应信息包括子图表序列数据列表；级联客户端根据子图表标识和子图表序列数据重新渲染Web页面中的子图表。不需要前端开发人员事先编程级联关系，简化了Web页面编程，能够方便的处理数据图表的级联关系，提高了开发效率，保证了系统的稳定性。

Description

数据图表级联方法及数据图表级联系统

【技术领域】

本发明涉及数据图表技术，特别涉及一种数据图表级联方法及数据图表级联系统。

【背景技术】

为了能够生动优美的将数据图表展现在Web页面上，多种数据图表组件应运而生。其中包括基于Flash技术的FusionCharts和AnyChart；也包括使用Javascript技术实现的Highcharts和ECharts。这些数据图表组件都提供了后台数据选项，包括X轴分类、Y轴标题、序列数据、图表类型等，用于设置数据图表渲染在Web页面上的外观以及展现的给用户的内容数据。序列数据是若干个序列列表，每个序列列表包含若干个序列点，每个序列点是一个由分类值和序列值组成的二元对如，(2014年，256)和(1月，5000)。

Web页面上有时需要展现若干个有级联关系的数据图表。假设某Web页面上展现了两个数据图表，名称分别为数据图表1和数据图表2；数据图表1展现了商品A在各个年度的销售额；数据图表2展现商品A在各个省份的销售额；用户希望在点击数据图表1的某个序列点(某年度的销售额)时，数据图表2能够展示出该序列点对应的分类值(某年度)的条件下商品A在各个省份的销售额。

在上述例子中，数据图表1和数据图表2构成了级联关系，在Web页面中若干个有级联关系的数据图表方便了用户更好的观察数据并进行决策。这里数据图表2的序列数据依赖于用户选择了数据图表1中点击的序列点对应的分类值。为了方便描述，这里将依赖于其他数据图表的数据图表称之为子图表，将子数据图表依赖的数据图表称之为父图表，将数据图表简称为图表，将序列点对应的分类值简称为分类值。

在Web页面上设置图表的级联关系，通常需要借助数据图表组件的事件处理机制，当用户在Web页面上点击父图表的序列点时，在父图表序列点的点击事件处理方法中根据对应分类值刷新子图表的序列数据并重新渲染子图表。

如果Web页面中需要展现的由级联关系的图表较多，那么前端开发人员的工作量就比较大；再者，刷新子图表的序列数据的过程往往是非常复杂的，经常需要通过SQL或者MDX之类的查询语言向数据源发起新的查询，这需要前端工程师掌握一定的数据建模与分析的知识，这通常是不现实和低效的开发方式，且会增加程序出错的可能性。

【发明内容】

本发明解决的问题是提供了一种数据图表订阅方法及数据图表订阅系统，便于在Web页面中快速简洁地新增和修改数据图表。

为解决上述问题，本发明实施例提供了一种数据图表级联方法，包括：

Web页面加载有级联客户端，级联客户端监听已注册图表的序列点的点击事件，从所述点击事件的信息中获取图表的标识和所点击的序列点对应的分类值；

级联客户端根据所述图表的标识查找对应的子图表标识；

级联客户端向级联服务器发出序列数据请求；

级联服务器向级联客户端发送第一响应信息，所述第一响应信息包括子图表序列数据列表；

级联客户端根据子图表标识和子图表序列数据重新渲染Web页面中的子图表。

可选的，还包括：

Web页面中加载级联客户端；

Web页面向级联客户端发出图表注册请求；

级联客户端将所述图表注册请求包含的要注册的图表的标识加入已注册图表列表；

级联客户端向级联服务器发出级联关系下载请求，所述请求中包括所述已注册图表的列表；

级联客户端接收级联服务器的第二响应信息，所述第二响应信息中包括图表级联关系的描述信息；

级联客户端根据所述描述信息构建级联关系映射表，所述映射表中保存了图表和对应的子图表列表的对应关系。

可选的，级联客户端接收第二响应信息的具体步骤包括：

级联服务器接收级联关系下载请求，提取请求中的已注册图表的列表；

级联服务器根据已注册图表的标识在级联数据库中查询已注册图表对应的级联关系；所述级联关系描述了每个已注册图表和子图表的对应关系；

级联服务器向级联客户端发送第二响应信息，所述第二响应信息包括所述图表级联关系的描述信息。

可选的，级联服务器发送第一响应信息具体包括：

级联服务器接收级联客户端发出的序列数据请求；

从所述序列数据请求中提取图表的标识和分类值；

根据所述图表的标识和分类值在级联数据库中获得每个子图表的序列数据；

将所述每个子图表的标识和序列数据组合起来，并作为第一响应信息返回给级联客户端。

可选的，生成每个子图表的序列数据具体包括：

从所述序列数据请求中提取子图表列表，在级联数据库中查询所述列表中每个子图表所对应的查询语句；

将每个子图表的查询语句和所述过滤条件组合起来并在级联数据库中执行组合后的查询语句，生成每个子图表的序列数据。

本发明实施例还提供了一种数据图表级联系统，包括：级联客户端、级联服务器和级联数据库；

所述级联客户端，用于监听已注册图表的分类值选择事件，向级联服务器请求子图表的序列数据并重新渲染子图表；

所述级联服务器，用于接收级联客户端发出的序列数据请求，向级联数据库获取子图表序列数据列表，并将获得子图表标识和子图表序列数据给级联客户端；

所述级联数据库，用于保存子图表序列数据列表；

所述级联客户端还包括：接收的Web页面的图表注册请求，维护已注册图表的列表，向级联服务器发出级联关系下载请求；

第一接收单元，用于接收Web页面发出的图表注册请求，或者用于监听图表分类值选择事件，即监听图表序列点的点击事件；

第一发送单元，用于向级联服务器发送依赖关系下载请求和序列数据请求；

数据单元，建立有级联关系映射表，记录级联服务器返回的级联关系描述信息；

渲染单元，根据子图表标识和子图表的序列数据重新渲染子图表；

所述级联服务器还包括：接收级联客户端的级联关系下载请求，在级联数据库中查找图表级联关系的描述信息并返回给级联客户端。

可选的，所述级联客户端加载在Web页面中。

可选的，所述级联服务器，包括：

第二接收单元，用于接收级联客户端的依赖关系下载请求和序列数据请求；

查询单元，用于向级联数据库查询图表级联关系的描述信息、图表的查询语句和过滤条件；

第二发送单元，用于向级联客户端发送图表级联关系的描述信息、子图表标识和子图表序列数据。

与现有技术相比，本技术方案具有以下优点：

本发明在Web页面上加载有级联客户端，级联客户端监听已注册图表的序列点的点击事件，从所述点击事件的信息中获取图表的标识和所点击的序列点对应的分类值；级联客户端根据所述图表的标识查找对应的子图表标识，并从级联服务器获取子图表序列数据，级联客户端根据子图表标识和子图表序列数据重新渲染Web页面中的子图表，不需要前端开发人员事先编程级联关系，简化了Web页面编程，能够方便的处理数据图表的级联关系，提高了开发效率，保证了系统的稳定性。

【附图说明】

图1是本申请实施例的数据图表级联方法的应用系统架构图；

图2是本申请实施例的数据图表级联方法的一个典型的应用场景；

图3是本申请实施例的数据图表级联方法中级联客户端加载和图表注册过程的流程图；

图4是本申请实施例的数据图表级联方法中级联服务器响应图表注册请求的流程图；

图5是本申请实施例的数据图表级联方法中级联客户端响应图表分类值选择事件的流程图；

图6是本申请的实施例的数据图表级联方法中级联服务器响应序列数据请求的流程图；

图7是本申请实施例的数据图表级联装置的级联客户端的装置示意图；

图8是本申请实施例的数据图表级联装置的级联服务器的装置示意图。

【具体实施方式】

下面结合附图，通过具体实施例，对本申请的技术方案进行清楚、完整的描述。

本申请所述的数据图表级联方法的应用系统如图1所示。该应用系统中包括浏览器101、Web页面102、级联客户端103、级联服务器104、级联数据库105。

图2示出了本申请实施例中所述数据图表级联方法的典型应用场景：在一个Web页面中，包含父图表201和子图表202。父图表201的标识为chart1，子图表的标识为chart2。父图表201展现了商品A在各个年度的销售额，子图表202展现了商品A在对应年度的各个省份的销售额，用户在父图表201中点击了2014年度的销售额，希望能够在子图表202中展示出2014年度商品A在各个省份的销售额。

本申请的实施例提供了一种数据图表级联方法，如图3所示，主要步骤如下：

步骤301、Web页面102加载级联客户端103；所述级联客户端103是一个浏览器组件，加载之后将会在浏览器端101被调用执行。

级联客户端103可以位于本地文件系统，也可以是位于远程服务器(如CDN)；Web页面102可以采用引入一个script标签，并将该script标签的src属性设置为级联客户端103的具体位置的方式来加载级联客户端103；在本实施例中的级联客户端103为存放在浏览器本地文件系统的js组件，具体引用方式如下：

<script src＝"js/cascade.js"></script>

需要明白，js组件只是实现级联客户端组件的一种技术手段而非限制性要求；完全可以使用其他浏览器脚本技术(如CoffeeScript、Dart、Typescript等)实现级联客户端组件。

步骤302、Web页面102向级联客户端103发出图表注册请求，所述图表注册请求中包括Web页面102中要注册的图表的标识；注册的目的在于告知级联客户端103监听已注册图表的序列点的点击事件。

具体地，可以在级联客户端定义一个方法来接收图表注册请求，具体内容如下：

Cascade.register(chartList)

其中Cascade.register为方法名；chartList为方法参数，Web页面102向chartList中传入要注册的图表列表，列表中包含父图表的标识chart1和子图表的标识chart2，具体内容如下：

[‘chart1’,‘chart2’]

需要明白，以上只是接收图表注册请求的中具体方式，而非限制性要求。

步骤303、级联客户端103将所述图表注册请求中包含的要注册的图表的标识加入已注册图表列表。

具体地，已注册图表列表可以置于级联客户端的数据单元。

步骤304、级联客户端103向级联服务器104发出级联关系下载请求；所述请求中包括所述已注册图表的列表。

具体地，可以使用AJAX异步模式发送级联关系下载请求，所述级联关系下载请求中包含级联服务器的url和已注册图表列表[‘chart1’,‘chart2’]。

需要明白，AJAX只是发送级联关系下载请求的一种技术手段而非硬性要求。

步骤305、级联客户端104接收级联服务器104的第二响应信息；所述第二响应信息中包括图表级联关系的描述信息。

具体地，所述第二响应信息可以用JSON文本形式进行组织，具体内容如下：

需要明白，JSON文本只是表示所述第二响应信息的一种形式，在实际应用中，完全可以采用XML等其他方式进行表示。

步骤306、级联客户端根据所述第二描述信息构建级联关系映射表；所述映射表中保存了父图表和父图表对应的子图表列表的对应关系。

具体地，级联关系映射表保存在级联客户端的数据单元，可以用js对象的形式表示，如下:

需要明白，js对象只是存储级联关系映射表的一种技术手段而非硬性要求；

进一步地，本申请提供的数据图表级联方法中，获取第二响应信息的具体方法还包括，请参考图4：

步骤401、级联服务器接收级联关系下载请求，提取请求中的已注册图表列表；

步骤402、级联服务器根据已注册图表的标识在级联数据库中查询已注册图表对应的级联关系；所述级联关系描述了每个已注册图表和子图表的对应关系；

具体地，级联数据库维护了一张级联关系表，字段定义如下：

字段名	字段类型	字段解释
			uuid	字符串	图表唯一性标识
child_uuid	字符串	子图表唯一性标识

根据每个已注册图表的标识在级联关系表中可以查到对应的所有子图表的标识，比如对于图表chart1，查询到了子图表chart2、chart3、chart4；

在级联关系表中查询所有已注册图表对应的包含在所述已注册图表列表中的子图表，根据查询结果，以JSON文本的形式构建图表级联关系的描述信息；

步骤403、向级联客户端发送第二响应信息，所述第二响应信息包括所述图表级联关系的描述信息。

为了能够响应用户对图表序列点的点击事件(如鼠标点击、触摸屏按下等)，基于上述级联客户端、级联服务器的设置，本发明实施例提供的数据图表级联方法，包括：

步骤501、级联客户端监听已注册图表序列点的点击事件，从所述事件的信息中获取所述图表的标识和所述序列点对应的分类值；

步骤502、级联客户端在级联关系映射表中根据所述图表的标识查找对应的子图表列表；

步骤503、级联客户端向级联服务器发出序列数据请求；所述序列数据请求中包括图表的标识、分类值和对应的子图表列表；

具体地，可以使用AJAX异步模式发送序列数据请求，所述请求中包括级联服务器的url；

步骤504、级联客户端接收级联服务器的第一响应信息，所述第一响应信息包括子图表序列数据列表；所述子图表序列数据列表包含了每个子图表的标识和子序列数据；

具体地、可以用JSON文本的形式组织所述响应信息，具体内容如下：

步骤505、级联客户端根据子图表标识和子图表的序列数据重新渲染子图表；

具体地，可以采用Highcharts技术渲染图表；级联客户端根据子图表标识在Web页面上定位chart2图表对应的Highcharts对象，调用Highcharts的remove方法删除chart2图表的当前序列数据，再调用addSeries方法将所述子图表的序列数据添加到chart2图表，Highcharts会自动渲染更新序列数据之后的子图表chart2；

需要明白，Highcharts只是一种Web图表渲染技术，而非实现子图表重新渲染的唯一手段。

进一步地，请参考图6，为了能够响应级联客户端发出的序列数据请求，本申请提供的数据图表级联方法，级联服务器发送第一响应信息的具体步骤还包括：

步骤601、级联服务器接收级联客户端发出的序列数据请求；从所述序列数据请求中提取图表的标识和分类值；

步骤602、根据所述图表的标识和分类值在级联数据库中查找对应的过滤条件；

具体地，级联数据库维护了一张过滤条件表，字段定义如下：

字段名	字段类型	字段解释
			uuid	字符串	图表唯一性标识
category	字符串	图表分类值
			filter	字符串	过滤条件

在本实施例中，使用MDX语法描述过滤条件，图表chart2和分类值2014年对应的过滤条件的具体内容如下：

[时间].[年份].[2014年]

步骤603、从所述序列数据请求中提取子图表列表，在级联数据库中查询所述列表中每个子图表所对应的查询语句；

具体地，级联数据库维护了一张查询语句表，描述了字段定义如下：

字段名	字段类型	字段解释
			uuid	字符串	图表唯一性标识
category	字符串	图表分类值
			query	字符串	查询语句

需要明白，上述级联关系表、查询语句表和过滤条件表的定义只是级联数据库中对于级联关系、查询语句、过滤条件的一种数据组织方式而非限制性定义；所述级联关系、查询语句、过滤条件数据可以由系统管理员以直接操作数据库的方式进行新增、删除和修改，也可以在应用系统中提供一个界面方便用户维护。

在实施例中，使用MDX语法描述查询语句，图表chart2的查询语句如下：

需要明白，MDX语法只是描述过滤条件和查询语句的一种技术手段而非限制性要求；

步骤604、将每个子图表的查询语句和所述过滤条件组合起来并在级联数据库中执行组合后的查询语句，生成每个子图表的序列数据；

具体地，对于子图表chart2，组合后的查询语句内容如下：

需要明白，MDX语法只是描述过滤条件的一种技术手段而非限制性要求；

步骤605、将所述每个子图表的标识和序列数据组合起来，并作为第一响应信息返回给级联客户端；

具体地，可以用JSON文本的形式组织所述响应信息。

相应地，本申请提供了一种数据图表级联系统，请参考图1，包括：

级联客户端103，以浏览器组件的形式被加载到Web页面102，用于接收的Web页面102的图表注册请求，维护已注册图表的列表，向级联服务器104发出级联关系下载请求；级联客户端103还用于监听已注册图表的序列点的点击事件，向级联服务器104请求子图表的序列数据并重新渲染子图表；

级联服务器104，用于接收级联客户端103的级联关系下载请求，在级联数据库中查找图表级联关系的第二描述信息并返回给级联客户端103；级联服务器104还用于接收级联客户端103发出的序列数据请求，子图表标识和子图表序列数据给级联客户端103；

级联数据库105，用于保存包括子图表序列数据在内的图表的级联关系、查询语句、过滤条件等。

进一步地，所述级联客户端装置，包括：

第一接收单元701，用于接收Web页面102发出的图表注册请求；也用于监听图表序列点的点击事件；

第一发送单元702，用于向级联服务器104发送依赖关系下载请求和序列数据请求；

数据单元703，建立有级联关系映射表，记录级联服务器返回的级联关系描述信息；

渲染单元704，根据子图表标识和子图表的序列数据重新渲染子图表。

进一步地，所述级联服务器，包括：

第二接收单元801，用于接收级联客户端103的依赖关系下载请求和序列数据请求；

查询单元802，用于级联数据库105中查询图表级联关系的描述信息、图表的查询语句和过滤条件；

第二发送单元803，用于级联客户端103发送图表级联关系的描述信息、子图表标识和子图表序列数据。

采用本申请提出的数据图表级联方法及装置，前端开发人员只需要将级联客户端加载到当前Web页面，并把页面中的数据图表注册到级联客户端，级联客户端会自动处理图表级联关系，当父图表的某个序列点被用户点击时会自动触发页面中子图表数据的刷新和重新渲染，整个过程不需要更多的人工编程干预。所述方法及装置大大提高了开发效率，保证了系统的稳定性。

专业人员应该还可以进一步意识到，结合本申请所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本申请的范围。

结合本申请中所公开的实施例描述的方法或算法的步骤可以用硬件、处理器执行的软件模块、或者二者的结合来实施。软件模块可以置于随机存储器RAM、内存、只读存储器ROM、电可编程ROM、电可擦除可编程ROM、寄存器、硬盘、可移动磁盘、CD-ROM、或技术领域内所公知的任意其它形式的存储介质中。

以上所述的具体实施方式，对本申请的目的、技术方案和有益效果进行了进一步详细说明，所应理解的是，以上所述仅为本申请的具体实施方式而已，并不用于限定本申请的保护范围，凡在本申请的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。

Claims (8)

1.一种数据图表级联方法，其特征在于，包括：

Web页面加载有级联客户端，级联客户端监听已注册图表的序列点的点击事件，从所述点击事件的信息中获取图表的标识和所点击的序列点对应的分类值；

级联客户端根据所述图表的标识查找对应的子图表标识；

级联客户端向级联服务器发出序列数据请求；

级联服务器向级联客户端发送第一响应信息，所述第一响应信息包括子图表序列数据列表；

级联客户端根据子图表标识和子图表序列数据重新渲染Web页面中的子图表。

2.如权利要求1所述的数据图表级联方法，其特征在于，还包括：

Web页面中加载级联客户端；

Web页面向级联客户端发出图表注册请求；

级联客户端将所述图表注册请求包含的要注册的图表的标识加入已注册图表列表；

级联客户端向级联服务器发出级联关系下载请求，所述请求中包括所述已注册图表的列表；

级联客户端接收级联服务器的第二响应信息，所述第二响应信息中包括图表级联关系的描述信息；

级联客户端根据所述描述信息构建级联关系映射表，所述映射表中保存了图表和对应的子图表列表的对应关系。

3.根据权利要求2所述的数据图表级联方法，其特征在于，级联客户端接收第二响应信息的具体步骤包括：

级联服务器接收级联关系下载请求，提取请求中的已注册图表的列表；

级联服务器根据已注册图表的标识在级联数据库中查询已注册图表对应的级联关系；所述级联关系描述了每个已注册图表和子图表的对应关系；

级联服务器向级联客户端发送第二响应信息，所述第二响应信息包括所述图表级联关系的描述信息。

4.根据权利要求1所述的数据图表级联方法，其特征在于，级联服务器发送第一响应信息具体包括：

级联服务器接收级联客户端发出的序列数据请求；

从所述序列数据请求中提取图表的标识和分类值；

根据所述图表的标识和分类值在级联数据库中获得每个子图表的序列数据；

将所述每个子图表的标识和序列数据组合起来，并作为第一响应信息返回给级联客户端。

5.根据权利要求4所述的数据图表级联方法，其特征在于，生成每个子图表的序列数据具体包括：

从所述序列数据请求中提取子图表列表，在级联数据库中查询所述列表中每个子图表所对应的查询语句；

将每个子图表的查询语句和过滤条件组合起来并在级联数据库中执行组合后的查询语句，生成每个子图表的序列数据。

6.一种数据图表级联系统，其特征在于，包括：级联客户端、级联服务器和级联数据库；

所述级联客户端，用于监听已注册图表的分类值选择事件，向级联服务器请求子图表的序列数据并重新渲染子图表；

所述级联服务器，用于接收级联客户端发出的序列数据请求，向级联数据库获取子图表序列数据列表，并将获得子图表标识和子图表序列数据给级联客户端；

所述级联数据库，用于保存子图表序列数据列表；

所述级联客户端还包括：接收的Web页面的图表注册请求，维护已注册图表的列表，向级联服务器发出级联关系下载请求；

第一接收单元，用于接收Web页面发出的图表注册请求，或者用于监听图表分类值选择事件，即监听图表序列点的点击事件；

第一发送单元，用于向级联服务器发送依赖关系下载请求和序列数据请求；

数据单元，建立有级联关系映射表，记录级联服务器返回的级联关系描述信息；

渲染单元，根据子图表标识和子图表的序列数据重新渲染子图表；

所述级联服务器还包括：接收级联客户端的级联关系下载请求，在级联数据库中查找图表级联关系的描述信息并返回给级联客户端。

7.根据权利要求6所述的数据图表级联系统，其特征在于，所述级联客户端加载在Web页面中。

8.根据权利要求6所述的数据图表级联系统，其特征在于，所述级联服务器，包括：

第二接收单元，用于接收级联客户端的依赖关系下载请求和序列数据请求；

查询单元，用于向级联数据库查询图表级联关系的描述信息、图表的查询语句和过滤条件；

第二发送单元，用于向级联客户端发送图表级联关系的描述信息、子图表标识和子图表序列数据。