数据图表级联方法及数据图表级联系统的制作方法_2

文档序号:9765821阅读:来源:国知局
014年度的销售额,希望能够在子图表202中展示出 2014年度商品A在各个省份的销售额。
[0062] 本申请的实施例提供了一种数据图表级联方法,如图3所示,主要步骤如下:
[0063] 步骤301、Web页面102加载级联客户端103;所述级联客户端103是一个浏览器组 件,加载之后将会在浏览器端101被调用执行。
[0064] 级联客户端103可W位于本地文件系统,也可W是位于远程服务器(如CDN);Web页 面102可W采用引入一个script标签,并将该script标签的src属性设置为级联客户端103 的具体位置的方式来加载级联客户端103;在本实施例中的级联客户端103为存放在浏览器 本地文件系统的js组件,具体引用方式如下:
[0065] <script src = " js/cascade. js"X/script〉
[0066] 需要明白,js组件只是实现级联客户端组件的一种技术手段而非限制性要求;完 全可W使用其他浏览器脚本技术(如CoffeeScript ,Dart ,Typescript等)实现级联客户端 组件。
[0067] 步骤302、Web页面102向级联客户端103发出图表注册请求,所述图表注册请求中 包括Web页面102中要注册的图表的标识;注册的目的在于告知级联客户端103监听已注册 图表的序列点的点击事件。
[0068] 具体地,可W在级联客户端定义一个方法来接收图表注册请求,具体内容如下:
[0069] Cascade.register(chartList)
[0070] 其中Cascade.register为方法名;cha;rtList为方法参数,Web页面102向 chadList中传入要注册的图表列表,列表中包含父图表的标识chart 1和子图表的标识 chad2,具体内容如下:
[0071] ['chartl ','cha;rt2']
[0072] 需要明白,W上只是接收图表注册请求的中具体方式,而非限制性要求。
[0073] 步骤303、级联客户端103将所述图表注册请求中包含的要注册的图表的标识加入 已注册图表列表。
[0074] 具体地,已注册图表列表可W置于级联客户端的数据单元。
[0075] 步骤304、级联客户端103向级联服务器104发出级联关系下载请求;所述请求中包 括所述已注册图表的列表。
[0076] 具体地,可W使用AJAX异步模式发送级联关系下载请求,所述级联关系下载请求 中包含级联服务器的url和已注册图表列表['chartr,'chad2']。
[OOW]需要明白,AJAX只是发送级联关系下载请求的一种技术手段而非硬性要求。
[0078] 步骤305、级联客户端104接收级联服务器104的第二响应信息;所述第二响应信息 中包括图表级联关系的描述信息。
[0079] 具体地,所述第二响应信息可W用JSON文本形式进行组织,具体内容如下:
[0080] ; 蚀站tr:[蚀泌'2']
[0081] ] ]
[0082] 需要明白,JSON文本只是表示所述第二响应信息的一种形式,在实际应用中,完全 可W采用XML等其他方式进行表示。
[0083] 步骤306、级联客户端根据所述第二描述信息构建级联关系映射表;所述映射表中 保存了父图表和父图表对应的子图表列表的对应关系。
[0084] 具体地,级联关系映射表保存在级联客户端的数据单元,可W用js对象的形式表 示,如下:
[ {
[0085] chart! ; ['chart2'] }
[0086] 需要明白,js对象只是存储级联关系映射表的一种技术手段而非硬性要求;
[0087] 进一步地,本申请提供的数据图表级联方法中,获取第二响应信息的具体方法还 包括,请参考图4:
[0088] 步骤401、级联服务器接收级联关系下载请求,提取请求中的已注册图表列表;
[0089] 步骤402、级联服务器根据已注册图表的标识在级联数据库中查询已注册图表对 应的级联关系;所述级联关系描述了每个已注册图表和子图表的对应关系;
[0090] 具体地,级联数据库维护了一张级联关系表,字段定义如下:
[0093] 根据每个已注册图表的标识在级联关系表中可W查到对应的所有子图表的标识, 比如对于图表chart 1,查询到了子图表charts、cha;rt3、cha;rt4;
[0094] 在级联关系表中查询所有已注册图表对应的包含在所述已注册图表列表中的子 图表,根据查询结果,WJSON文本的形式构建图表级联关系的描述信息;
[0095] 步骤403、向级联客户端发送第二响应信息,所述第二响应信息包括所述图表级联 关系的描述信息。
[0096] 为了能够响应用户对图表序列点的点击事件(如鼠标点击、触摸屏按下等),基于 上述级联客户端、级联服务器的设置,本发明实施例提供的数据图表级联方法,包括:
[0097] 步骤501、级联客户端监听已注册图表序列点的点击事件,从所述事件的信息中获 取所述图表的标识和所述序列点对应的分类值;
[0098] 步骤502、级联客户端在级联关系映射表中根据所述图表的标识查找对应的子图 表歹U表;
[0099] 步骤503、级联客户端向级联服务器发出序列数据请求;所述序列数据请求中包括 图表的标识、分类值和对应的子图表列表;
[0100] 具体地,可W使用AJAX异步模式发送序列数据请求,所述请求中包括级联服务器 的url;
[0101] 步骤504、级联客户端接收级联服务器的第一响应信息,所述第一响应信息包括子 图表序列数据列表;所述子图表序列数据列表包含了每个子图表的标识和子序列数据;
[0102] 具体地、可W用JSON文本的形式组织所述响应信息,具体内容如下:
[0103] ; 'chart?/ : I 扛狂苏/,巧,
[0104] 新;X',4) } ]
[0105] 步骤505、级联客户端根据子图表标识和子图表的序列数据重新擅染子图表;
[0106] 具体地,可W采用化曲charts技术擅染图表;级联客户端根据子图表标识在Web页 面上定位charts图表对应的Hi曲chart S对象,调用Hi曲chart S的remove方法删除charts图 表的当前序列数据,再调用addSeries方法将所述子图表的序列数据添加到charts图表, 化曲charts会自动擅染更新序列数据之后的子图表charts;
[0107] 需要明白,Highchaパs只是一种Web图表擅染技术,而非实现子图表重新擅染的唯 一手段。
[0108] 进一步地,请参考图6,为了能够响应级联客户端发出的序列数据请求,本申请提 供的数据图表级联方法,级联服务器发送第一响应信息的具体步骤还包括:
[0109] 步骤601、级联服务器接收级联客户端发出的序列数据请求;从所述序列数据请求 中提取图表的标识和分类值;
[0110] 步骤602、根据所述图表的标识和分类值在级联数据库中查找对应的过滤条件;
[0111] 具体地,级联数据库维护了一张过滤条件表,字段定义如下:
[0114] 在本实施例中,使用MDX语法描述过滤条件,图表charts和分类值2014年对应的过 滤条件的具体内容如下:
[0115] [时间]J年份].[2014年]
[0116] 步骤603、从所述序列数据请求中提取子图表列表,在级联数据库中查询所述列表 中每个子图表所对应的查询语句;
[0117] 具体地,级联数据库维护了一张查询语句表,描述了字段定义如下:
[0119] 需要明白,上述级联关系表、查询语句表和过滤条件表的定义只是级联数据库中 对于级联关系、查询语句、过滤条件的一种数据组织方式而非限制性定义;所述级联关系、 查询语句、过滤条件数据可W由系统管理员W直接操作数据库的方式进行新增、删除和修 改,也可W在应用系统中提供一个界面方便用户维护。
[0120] 在实施例中,使用MDX语法描述查询语句,图表charts的查询语句如下:
[01 引]WITH
[0122] 沈 T[-R0WS]AS
[0123] {[地区].[省份].[省份].Members}
[0124] 沈LECT
[01巧]NON EMPTY{ [Measures].[销售额]}0N COLUMNS,
[0126] NON EMPTY[ROWS]ON ROWS
[0127] FROM[数据立方体]
[0128] 需要明白,MDX语法只是描述过滤条件和查询语句的一种技术手段而非限制性要 求;
[0129] 步骤604、将每个子图表的查询语句和所述过滤条件组合起来并在级联数据库中 执行组合后的查询语句,生成每个子图表的序列数据;
[0130] 具体地,对于子图表charts,组合后的查询语句内容如下:
[01 引]WITH
[0132] SElTFILT 邸]AS
[0133] {[时间].巧份].[2014 年]}
[0134]沈 T[-R0WS]AS
[013引{[地区].[省份].[省份].Members}
当前第2页1 2 3 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1