CN105653678A - 数据图表订阅方法及数据图表订阅系统 - Google Patents

Abstract

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

Description

数据图表订阅方法及数据图表订阅系统

技术领域

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

背景技术

为了能够生动优美地将数据图表展现在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页面，就可以根据数据图表的uuid将所需要展现的图表自动加载到Web页面中，达到了图4所示的渲染效果，起到了快速订阅的效果，从而有效地缩短开发周期，方便数据报表的新增和后续维护。

本申请实施例提供了一种数据图表订阅方法，如图2所示，步骤包括：

步骤301、Web页面加载订阅客户端装置；所述订阅客户端装置实际上是一个浏览器组件，被Web页面加载之后将会在浏览器端被调用执行。

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

<scriptsrc＝"js/widgets.js"></script>

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

步骤302、Web页面定位需要渲染数据报表的DIV容器并获取其DOM(DocumentObjectModel)对象。

具体地，所述Web页面可以通过jQuery选择器定位需要渲染数据图表的DIV容器。在本实施例中，需要渲染数据图表的DIV容器的ID分别为div1和div2，可以使用jQuery选择器中的ID选择器进行定位并获取DIV容器的DOM对象；ID选择器的语法为：#容器ID，定位DIV容器101和102的具体内容如下：

$(#div1)

$(#div2)

需要明白，使用jQuery选择器只是定位DIV容器获取其DOM对象的一种方式而非限制性要求；并且使用的jQuery选择也绝非ID选择器一种，可以使用类选择器、层次选择器等多种jQuery选择器获取DIV容器的DOM对象。

步骤303、Web页面向订阅客户端发送数据图表订阅请求；所述数据图表订阅请求中包括所述DIV容器对应的DOM对象和需要渲染到所述DIV容器的数据图表的uuid。

具体地，在本实施例中，所述DIV容器调用了订阅客户端的jquery.fn.widget方法，并向该方法中传入需要渲染数据图表的uuid，从而实现数据图表订阅请求的发送；DIV容器101发送针对uuid为widget1的数据图表的数据图表订阅请求的具体内容如下：

$(#div1).widget(‘widget1’)

相应地，DIV容器102发送针对uuid为widget2的数据图表的数据图表订阅请求的具体内容如下：

$(#div2).widget(‘widget2’)

应当注意的是，订阅客户端的jquery.fn.widget实际上是为了更方便地接受DIV容器发送的数据图表订阅请求，订阅客户端的图表订阅请求接收单元对jQuery组件进行的扩展，仅仅是所述图表请求接收单元的一种实现方式而非限制性要求。

步骤304、所述订阅客户端接收所述Web页面发送的数据图表订阅请求，从中获取所述数据图表的uuid。

具体地，所述订阅客户端从jquery.fn.widget的输入参数中获取所述数据图表的uuid。

步骤305、所述订阅客户端向订阅服务器发送一个图表后台数据请求。

具体地，针对所述DIV容器div1和div2，可以向订阅服务器分别发送AJAX异步模式的图表后台数据请求；所述图表后台数据请求中包含订阅服务器的url，需要订阅的数据图表的uuid(此处为widget1和widget2)。

由于js是单线程的，而执行AJAX请求会消耗一定的时间，甚至出现了网络故障而迟迟得不到返回结果；这时，如果同步执行的话，就必须等到AJAX返回结果以后才能执行接下来的代码，如果AJAX请求需要1分钟，程序就得等1分钟。如果是异步执行的话，会让用户觉得页面响应比较流畅。

需要明白，AJAX只是发送图表后台数据请求的一种技术手段而非硬性要求。

步骤306、订阅服务器接收所述订阅客户端发送的图表后台数据请求，从中提取所述数据图表的uuid。

步骤307、订阅服务器从订阅数据库中查找出所述uuid对应的数据图表的后台数据；所述数据图表的后台数据主要包括：图表类型、图表标题、图表副标题、X轴分类、Y轴标题、序列数据等。

具体地，订阅数据库维护了一张订阅后台数据表，用于描述数据图表的uuid和数据图表后台数据的一一对应关系，所述订阅后台数据表的主要字段定义如下所示：

字段名	字段类型	字段解释
			uuid	字符串	数据图表的唯一标识符
chartType	字符串	图表类型
			title	字符串	图表标题
xAxisCategories	字符串	X轴分类
			yAxisTitle	字符串	Y轴标题
series	字符串	序列数据

其中，图表类型的取值包括bar(柱状图)、column(条状图)、pie(饼图)、spline(曲线图)等；X轴分类用JSON形式表示，如[‘1月’，‘2月’，‘3月’]表示在数据图表的X轴展现的分类为1月、2月、3月；数据数据以JSON形式表示，如[{name:‘series1',data:[11,12,13]},{name:‘series2',data:[5,10,15]}]表示数据图表中需要展现两个序列，序列名分别为series1和series2，序列内容分别为[11,12,13]和[5,10,15]。

需要明白，上述订阅后台数据表的定义只是数据图表的后台数据的一种组织形式而非限制性定义；所述数据图表的后台数据可以由系统管理员以直接操作数据库的方式进行新增、删除和修改，也可以在应用系统中提供一个界面方便用户维护数据图表的后台数据；无论采用何种方式，都使得前端开发人员免于直接在Web页面中直接写入或者通过程序逐步拼装数据图表的后台数据，减少前端开发人员的工作负担，加快了开发进度，优化了Web页面的代码架构，方便了数据图表在多个Web页面上的反复使用。

步骤308、订阅服务器发送响应信息给订阅客户端，所述响应信息包括所述数据图表的后台数据。

步骤309、订阅客户端接收所述订阅服务器根据图表后台数据请求所返回的响应信息，所述响应信息中包括所述数据图表的后台数据。

步骤310、订阅客户端在所述Web页面的所述DIV容器上根据所述响应信息中包括的数据图表后台数据将所述数据图表渲染到所述DIV容器之中，这样就完成了数据图表的订阅。

具体地，本实施例采用Highcharts技术渲染图表，订阅客户端将所述数据图表后台后台数据整理成Highcharts图表后台数据的特定JSON文本，再触发Highcharts库的highcharts方法，传入所述JSON文本和所述DIV容器的DOM对象作为highcharts方法的输入参数，所述highcharts方法会将所述数据图表自动渲染到所述DIV容器之中，这样就完成了数据图表的订阅；图4示出了采用本申请的数据图表订阅方法的Web页面效果图。

需要明白，Highcharts只是数据图表的一种渲染技术，而非限制性要求。

相应地，本申请的实施例提供了数据图表订阅系统，如图1所示，所述系统包括：订阅客户端103、订阅服务器104、订阅数据库105。

订阅客户端103，用于接收所述Web页面101发送的数据图表订阅请求，从所述数据图表订阅请求中提取所述数据图表的uuid，然后向订阅服务器104发送图表数据请求；订阅客户端103接收订阅服务器发出的响应信息，根据所述响应信息中包含的所述数据图表的后台数据将所述数据图表渲染到所述DIV容器102中，以完成数据图表的自动订阅。

订阅服务器104，用于接收所述订阅客户端103发起的图表后台数据请求，根据所述图表后台数据请求中包含的uuid，在订阅数据库105中查找该uuid对应的数据图表的后台数据，发送响应信息给订阅客户端103，所述响应信息中包含所述数据图表的后台数据。

订阅数据库105，用于存储数据图表的后台数据的数据库；所述订阅数据库中包含数据图表的uuid和数据图表的后台数据的对应关系；所述订阅服务器104从所述后台数据库中提取所述uuid对应的数据图表的后台数据。

进一步地，订阅客户端103包括第一接收单元401、第一发送单元402和渲染单元403，如图5所示。

第一接收单元401，用于接收所述Web页面101的发出的数据图表订阅请求，并且从所述请求中提取所述数据图表的uuid。

第一发送单元402，用于向订阅服务器104发送图表后台数据请求；所述图表后台数据请求中包含所述数据图表的uuid。

渲染单元403，用于接收所述订阅服务器104根据所述图表后台数据请求而发出的响应信息，从所述响应信息中提取所述数据图表的后台数据信息，根据所述后台数据将所述数据图表渲染到所述DIV容器102中，从而完成数据图表的订阅。

进一步地，订阅服务器104包括第二接收单元501、查询单元502和第二发送单元503，如图6所示。

第二接收单元501，用于接收所述订阅服务器104的所述第一发送单元发出的图表后台数据请求，并从所述图表后台数据请求中提取所述数据图表的uuid。

查询单元502，用于根据所述第二接收单元提取的所述数据图表的uuid，从订阅数据库105中查找所述uuid对应的所述数据图表的后台数据。

第二发送单元503，用于向所述订阅客户端103发送响应信息，所述响应信息包括所述图表后台数据请求单元查找所述订阅数据库105得到的所述数据图表的后台数据。

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

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

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

Claims (10)

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，然后向订阅服务器发送图表后台数据请求；当订阅客户端接收订阅服务器发出的数据图表的后台数据，将数据图表渲染到Web页面；

订阅服务器，用于接收所述订阅客户端发起的图表后台数据请求，根据所述图表后台数据请求中包含的uuid，在订阅数据库中查找该uuid对应的数据图表的后台数据，发送数据图表的后台数据给订阅客户端；

订阅数据库，包含数据图表的uuid和数据图表的后台数据的对应关系。

9.如权利要求8所述的数据图表订阅系统，其特征在于，所述订阅客户端包括：

第一接收单元，用于接收所述Web页面发出的数据图表订阅请求，并且从所述请求中提取所述数据图表的uuid；

第一发送单元，用于向订阅服务器发送图表后台数据请求，所述图表后台数据请求中包含所述数据图表的uuid；

渲染单元，用于接收所述订阅服务器根据图表后台数据请求发出的响应信息，从所述响应信息中提取所述数据图表的后台数据，根据所述后台数据将所述数据图表渲染到所述DIV容器中，从而完成数据图表的订阅。

10.如权利要求8所述的数据图表订阅系统，其特征在于，所述订阅服务器装置，包括：

第二接收单元，用于接收所述订阅服务器的第一发送单元发出的图表后台数据请求，并从所述图表后台数据请求中提取所述数据图表的uuid；

查询单元，用于根据所述第二接收单元提取的所述数据图表的uuid，从订阅数据库中查找所述uuid对应的数据图表的后台数据；

第二发送单元，用于向所述订阅客户端发送响应信息，所述响应信息包括所述查询单元查找所述订阅数据库得到的数据图表的后台数据。