数据图表订阅方法及数据图表订阅系统技术方案

一种数据图表订阅方法及数据图表订阅系统，所述数据图表订阅方法，包括：Web页面加载有订阅客户端，根据预渲染的数据图表的uuid向订阅客户端发送数据图表订阅请求；订阅客户端向订阅服务器发送图表后台数据请求；订阅服务器利用数据图表的uuid查找数据图表的后台数据并返回给订阅客户端；订阅客户端将数据图表渲染到Web页面。本发明专利技术通过数据图表自身的uuid将数据图表快速方便地订阅到Web页面的指定DIV容器中，可以有效地缩短开发周期，方便数据报表的新增和后续维护。

【技术实现步骤摘要】

本专利技术涉及数据图表技术，特别涉及一种数据图表订阅方法及数据图表订阅系统。
技术介绍
为了能够生动优美地将数据图表展现在Web页面上，多种数据图表组件应运而生。其中包括基于Flash技术的FusionCharts和AnyChart；也包括使用Javascript技术实现的Highcharts和ECharts。无论使用何种数据图表组件，都需要维护数据图表的后台数据。数据图表的后台数据主要包括格式化数据和序列数据。格式化数据包括图表类型、图表标题、X轴分类、Y轴标题等，用于限定图表展现格式。序列数据包含数据图表真正要展现的内容数据，比如一年内每个月的销售额，某月新老用户的访问量等。数据图表的后台数据通常以XML(ExtensibleMarkupLanguage，可扩展标记语言)、JSON(JavaScriptObjectNotation，JavaScript对象表示法)等方式进行组织。随着大数据时代的到来，Web页面中需要展现的数据图表的数量和种类急剧增加，在数据图表新增和更改频繁的网站中，前端开发人员需要在Web页面中手工编写或者通过程序逐步构造出数据图表的后台数据。这种方式势必大大增加前端开发人员的工作量，还会造成网页代码不易维护，同时也不利于数据图表在多个页面上的反复使用和修改。
技术实现思路
本专利技术解决的问题是提供了一种数据图表订阅方法及数据图表订阅系统，便于在Web页面中快速简洁地新增和修改数据图表。为解决上述问题，本专利技术实施例提供了一种数据图表订阅方法，包括：Web页面加载有订阅客户端，根据预渲染的数据图表的uuid向订阅客户端发送数据图表订阅请求；订阅客户端向订阅服务器发送图表后台数据请求；订阅服务器利用数据图表的uuid查找数据图表的后台数据并返回给订阅客户端；订阅客户端将数据图表渲染到Web页面。可选的，所述数据图表订阅请求中包括需要渲染数据报表的DIV容器对应的DOM对象和需要渲染的数据图表的uuid。可选的，利用DOM对象，订阅客户端将数据图表渲染到Web页面指定的DIV容器。可选的，利用jQuery选择器定位需要渲染数据图表的DIV容器。可选的，还包括：在Web页面加载订阅客户端，所述订阅客户端作为一个组件在浏览器被调用执行。可选的，所述数据图表的后台数据包括：图表类型、图表标题、图表副标题、X轴分类、Y轴标题、序列数据。可选的，采用Highcharts技术将数据图表渲染到Web页面本专利技术实施例还提供了一种数据图表订阅系统，包括：订阅客户端，用于接收所述Web页面发送的数据图表订阅请求，所述数据图表订阅请求具有预渲染的数据图表的uuid，然后向订阅服务器发送图表后台数据请求；当订阅客户端接收订阅服务器发出的数据图表的后台数据，将数据图表渲染到Web页面；订阅服务器，用于接收所述订阅客户端发起的图表后台数据请求，根据所述图表后台数据请求中包含的uuid，在订阅数据库中查找该uuid对应的数据图表的后台数据，发送数据图表的后台数据给订阅客户端；订阅数据库，包含数据图表的uuid和数据图表的后台数据的对应关系。可选的，所述订阅客户端包括：第一接收单元，用于接收所述Web页面发出的数据图表订阅请求，并且从所述请求中提取所述数据图表的uuid；第一发送单元，用于向订阅服务器发送图表后台数据请求，所述图表后台数据请求中包含所述数据图表的uuid；渲染单元，用于接收所述订阅服务器根据图表后台数据请求发出的响应信息，从所述响应信息中提取所述数据图表的后台数据，根据所述后台数据将所述数据图表渲染到所述DIV容器中，从而完成数据图表的订阅。可选的，所述订阅服务器装置，包括：第二接收单元，用于接收所述订阅服务器的第一发送单元发出的图表后台数据请求，并从所述图表后台数据请求中提取所述数据图表的uuid；查询单元，用于根据所述第二接收单元提取的所述数据图表的uuid，从订阅数据库中查找所述uuid对应的数据图表的后台数据；第二发送单元，用于向所述订阅客户端发送响应信息，所述响应信息包括所述查询单元查找所述订阅数据库得到的数据图表的后台数据。与现有技术相比，本技术方案具有以下优点：按照传统的方式，首先需要通过编程的方式从服务器获取数据并且将相关数据转换成图表的后台数据，这种方式导致web页面上需要加载的图表很多时，Web页面代码较多较乱难以维护；本专利技术通过Web页面加载有订阅客户端，利用数据图表自身的uuid将数据图表快速方便地订阅到Web页面的指定DIV容器中，Web页面只需要一行代码即可将完成图表加载，从而简化了图表所在的Web页面的代码量，可以有效地缩短开发周期，方便数据报表的新增和后续维护。附图说明图1是本申请实施例的数据图表订阅系统的应用系统架构示意图；图2是本申请实施例的数据图表订阅方法的流程示意图；图3是本申请实施例的数据图表订阅方法的一个典型的应用场景示意图；图4是本申请实施例的数据图表订阅方法的Web页面订阅最终效果示意图；图5是本申请实施例的数据图表订阅系统的订阅客户端的装置示意图；图6是本申请实施例的数据图表订阅系统的订阅服务器的装置示意图。具体实施方式下面结合附图，通过具体实施例，对本申请的技术方案进行清楚、完整的描述。本专利技术所述的数据图表订阅系统的应用系统如图1所示。该应用系统中包括Web页面101、待渲染数据图表的DIV容器102、订阅客户端103、订阅服务器104和订阅数据库105。本专利技术的数据图表订阅方法的主要步骤包括：Web页面加载有订阅客户端，根据预渲染的数据图表的uuid(UniversallyUniqueIdentifier，通用唯一识别码)向订阅客户端发送数据图表订阅请求；订阅客户端向订阅服务器发送图表后台数据请求；订阅服务器利用数据图表的uuid查找数据图表的后台数据并返回给订阅客户端；订阅客户端将数据图表渲染到Web页面。图3示出了本申请实施例中所述数据报表订阅方法的典型应用场景：在一个Web页面中，包含两个待渲染数据图表的DIV容器201和202。DIV容器201的ID为div1，需要在其中渲染uuid为widget1的数据图表；DIV容器202的ID为div2，需要渲染uuid为widget2的数据图表。使用本申请提出的方法及装置，前端开发人员只需要加载订阅客户端到当前Web页面，就可以根本文档来自技高网...

【技术保护点】
一种数据图表订阅方法，其特征在于，包括：Web页面加载有订阅客户端，根据预渲染的数据图表的uuid向订阅客户端发送数据图表订阅请求；订阅客户端向订阅服务器发送图表后台数据请求；订阅服务器利用数据图表的uuid查找数据图表的后台数据并返回给订阅客户端；订阅客户端将数据图表渲染到Web页面。

【技术特征摘要】
1.一种数据图表订阅方法，其特征在于，包括：
Web页面加载有订阅客户端，根据预渲染的数据图表的uuid向订阅客户端发送数据图表订阅请求；
订阅客户端向订阅服务器发送图表后台数据请求；
订阅服务器利用数据图表的uuid查找数据图表的后台数据并返回给订阅客户端；
订阅客户端将数据图表渲染到Web页面。
2.根据权利要求1所述的数据图表订阅方法，其特征在于，所述数据图表订阅请求中包括需要渲染数据报表的DIV容器对应的DOM对象和需要渲染的数据图表的uuid。
3.根据权利要求2所述的数据图表订阅方法，其特征在于，利用DOM对象，订阅客户端将数据图表渲染到Web页面指定的DIV容器。
4.根据权利要求2所述的数据图表订阅方法，其特征在于，利用jQuery选择器定位需要渲染数据图表的DIV容器。
5.根据权利要求1所述的数据图表订阅方法，其特征在于，还包括：在Web页面加载订阅客户端，所述订阅客户端作为一个组件在浏览器被调用执行。
6.根据权利要求1所述的数据图表订阅方法，其特征在于，所述数据图表的后台数据包括：图表类型、图表标题、图表副标题、X轴分类、Y轴标题、序列数据。
7.根据权利要求1所述的数据图表订阅方法，其特征在于，采用Highcharts技术将数据图表渲染到Web页面。
8.一种数据图表订阅系统，其特征在于，包括：
订阅客户端，用于接收所述Web页面发送的数据图表订阅请求，所述数据图表订阅请求具有预渲染的数据图表的uuid，然后向订阅服务器发送图表后台数据...

【专利技术属性】
技术研发人员：毛云青，骆娟，胡一帆，钱宇，朱华，郗冬冬，彭大蒙，陈恺，曹晖，
申请(专利权)人：城云科技杭州有限公司，
类型：发明
国别省市：浙江;33