CN102609256A

CN102609256A - 一种基于网页的动态图表生成方法

Info

Publication number: CN102609256A
Application number: CN2012100181879A
Authority: CN
Inventors: 朱盼盼; 张清锁
Original assignee: BEIJING DIGITAL CHINA SI-TECH INFORMATION TECHNOLOGY Co Ltd
Current assignee: BEIJING DIGITAL CHINA SI-TECH INFORMATION TECHNOLOGY Co Ltd
Priority date: 2012-01-19
Filing date: 2012-01-19
Publication date: 2012-07-25
Anticipated expiration: 2032-01-19
Also published as: CN102609256B

Abstract

本发明涉及一种基于网页的动态图表生成方法，具体涉及一种基于Flash动态图表生成组件的网页动态图表生成方法。通过面向对象编程语言按照Flash动态图表生成组件支持的图表类型一一对应地定义多个图表业务类，并根据图表类型中的不同设置项目在对应的图表业务类中定义多个设置项目子类，该多个设置项目子类包括与设置项目相关的各项属性，从而在Flash动态图表的图表描述数据和面向对象数据结构之间建立映射关系，实现基于网页的动态图表生成。

Description

一种基于网页的动态图表生成方法

技术领域

本发明涉及一种基于网页的动态图表生成方法，具体涉及一种基于OFC(Open Flash Chart)的网页动态图表生成方法。

背景技术

随着网络技术的发展，基于网页的应用越来越多，很多企业业务管理系统以及企业管理信息系统都是利用基于网页的形式开发。这些应用中，很多需要统计功能，并需要向用户展示动态统计的数据，同时，由于图表作为最为直观形象的数据展示方式，常常需要出现在这样的应用开发需求中，因此，网页应用开发者在不断地寻找方便、实用，且能够生成美观图表的方法。

由此，OFC(Open Flash Chart)应运而生。OFC是基于Adobe公司的网页动画Flash标准利用其专用描述语言Actionscript3.0开发的免费开源图表生成组件(具体可参见http://teethgrinder.co.uk/open-flash-chart2/)。该组件包括一个名为open-flash-chart.swf的Flash动画文件以及可供该文件调用的若干库文件和用于将该动画文件嵌入网页供下载调用swfobject.js文件，使用时，将该动画文件嵌入网页应用中，当用户浏览到该网页时，通过调用将动画文件下载本地，同时客户下载包含根据要表示的数据限定图表参数的数据文件，动画文件读取数据文件并在嵌入网页的Flash播放器中渲染图表，从而网页浏览器中生成显示美观的三维图表。

在数据文件方面，OFC1.x版本仅支持读取文本文件(txt)，而OFC2.0版本支持读取JSON(JavaScript Object Notation)格式的数据交换文件。JSON(JavaScriptObject Notation)是一种轻量级的数据交换格式。它基于JavaScript(StandardECMA-262 3rd Edition-December 1999)的一个子集。JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯。这些特性使JSON成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成。在此基础上，JSON格式文件特别适于用于传递图表数据的数据交换文件。

而当前基于OFC的网页报表开发，主要是采用通过open-flash-chart.swf和swfobject.js来读取某个JSON格式的文本文件，而JSON格式的文件，只能开发者自己编写或者一点点通过程序进行拼装，这种方式，既造成了大量的开发工作，其次也无法满足用户想要自动变化flash的要求。也难以根据网页应用动态地生成图表。

因此，亟需一种基于网页的动态图表生成方法。

发明内容

本发明为了方便网页应用中对于图表的开发，提供了一种基于网页的动态图表生成方法，利用Flash动态图表生成组件在客户端生成动态图表，其特征在于包括以下步骤：

A.客户端向服务器端请求显示动态图表，请求中包括要求显示的图表类型；

B.服务器端的动态页面根据客户端的请求调用面向对象编程语言类模块，所述类模块中按照Flash动态图表生成组件支持的图表类型一一对应地定义多个图表业务类，并根据图表类型中的不同设置项目在对应的图表业务类中定义多个设置项目子类，该多个设置项目子类包括与设置项目相关的各项属性；

C.所述类模块判断客户端请求生成的图表类型，并根据客户端请求的图表类型生成对应的图表业务类的对象

D.生成完毕后，由业务类对象向数据库请求图表所需数据；

E.数据库根据业务类对象的请求返回所述图表所需数据；

F.所述类模块根据所述图表所需数据以及预先设定的默认值计算并设置所述图表业务类对象的各子类属性；

G.属性设置完毕后，所述类模块根据所述图表业务类对象生成对应的图表描述数据并返回给动态页面，所述图表描述数据与Flash动态图表生成组件兼容，用于向所述Flash动态图表生成组件传递图表信息；

H.动态页面生成并向客户端返回嵌入了Flash动态图表生成组件以及所述图表描述数据的页面；

I.Flash动态图表生成组件在客户端网页浏览器中根据所述图表描述数据生成并展示动态图表。

其中，所述图表类型包括饼状图、垂直柱状图、水平柱状图、折线图和点图。

其中，所述饼状图对应饼状图业务类，该类包括标题子类和元素子类，所述元素子类用于定义饼状图的显示内容，元素子类包括第一切片开始角度属性和切片角度值属性。

其中，所述垂直柱状图对应垂直柱状图业务类，该类包括用于定义图表标题的标题子类、用于定义X轴属性的X轴子类、用于定义Y轴属性的Y轴子类以及用于定义垂直柱状图内容的元素子类，所述X轴子类包括X轴最大值以及数值元素；所述Y轴子类包括Y轴最大值以及数值元素；所述元素子类包括各数据柱的Y轴坐标值。

其中，所述Flash动态图表生成组件为Open Flash Chart组件。

其中，所述动态页面使用Javascript、PHP、ASP.NET或Perl实现。

其中，所述面向对象语言为C++、C#或Java。

其中，所述图表描述数据为JSON格式数据。

本发明通过面向对象思想建立Flash图表生成组件的数据描述文件与面向对象类封装之间的映射关系，实现了动态读取生成图表的功能，大大提高了基于网页的网络应用开发的效率。

附图说明

图1为本发明实施例的对象封装示例图；

图2为本发明的分层原理图；

图3为本发明实施例所述方法的流程图。

具体实施方式

以下结合附图对本发明的具体实施方式作进一步说明。应当理解本部分仅仅选取部分实施例对于本发明的原理进行示例性说明，而非用于限制本发明。凡在本发明原理和原则之内所做的任何修改、等同替换和改进等，均包含于本发明的保护范围之内。

OFC组件需要从JSON文件读取需要显示的信息，包括例如图表类型、图表标题、图表图形颜色、数值说明等等，OFC组件再根据这些参数来生成所需要的图形。

JSON建构于两种结构：

1、“名称/值”对的集合。不同的语言中，它被理解为对象(object)，纪录(record)，结构(struct)，字典(dictionary)，哈希表(hash table)，有键列表(keyedlist)，或者关联数组(associative array)。

2、值的有序列表(An ordered list of values)。在大部分语言中，它被理解为数组(array)。

上述两种结构可以相互嵌套。这些都是常见的数据结构。事实上大部分现代计算机语言都以某种形式支持它们。这使得一种数据格式在同样基于这些结构的编程语言之间交换成为可能。

JSON具有以下这些形式：

对象是一个无序的“‘名称/值’对”集合。一个对象以“{”(左括号)开始，“}”(右括号)结束。每个“名称”后跟一个“：”(冒号)；“‘名称/值’对”之间使用“，”(逗号)分隔。

数组是值(value)的有序集合。一个数组以“[”(左中括号)开始，“]”(右中括号)结束。值之间使用“，”(逗号)分隔。

值(value)可以是双引号括起来的字符串(string)、数值(number)、true、false、null、对象(object)或者数组(array)。这些结构可以嵌套以表达复杂的配置含义。

在OFC2.0组件中，把所有对象都编写在{}里面.让它看起来像下面JSON数据格式：

上述JSON文件对于图表的标题文字以及文字格式进行了设置。

又例如，可以通过如下JSON设置图表的X轴的格式参数：

其中，stroke为X轴线的宽度；tick-height为X轴刻度线高度值；colour为线的颜色；offset为柱状图表中X轴的偏移最小值是0；grid-color为表格线颜色；3d为设置是否使用3D图形；labels为一数组表示每个X点的标签。

又例如，需要对显示的内容进行描述时，JSON对Element对象进行描述：

其中type为字符串，这里’bar’表示图形类型为柱状图；alpha为0(透明)和1(不透明)之间的值表示柱状图的透明度；colour为字符串，表示柱状图颜色；text为字符串，限定图例说明文本；font-size为数字，用于设置图例文本字体大小；values为要显示的柱状图数据。

以柱状图为例，只要在JSON中按上面所述格式对标题(title)、X轴属性(x_axis)、Y轴属性(y_axis)、以及图表内容(element)属性进行设置，即可以向OFC2.0组件描述所要显示图表，该OFC2.0组件即可据此生成所需要的图表。

要动态地在客户端网页浏览器生成图表，就需要动态地在服务器端生成基于统计数据的JSON文件。

图1示出了本发明实施例的对象封装示例图。本发明使用面向对象的编程方法，在面向对象编程语言中，按照OFC2.0组件中所支持的图表类型(例如，垂直柱状图bar，水平柱状图hbar，饼状图pie等等)一一对应地进行类封装，即，按照支持的图表类型分别定义多个图表业务类。在这些类中按照图表中包含的设置项目定义多个子类，例如，由于生成垂直柱状图包括标题、X轴、Y轴以及元素四个设置项目，则对应地在垂直柱状图类定义标题、X轴、Y轴和元素四个子类，该四个子类中均包含与设置项目属性对应的属性。举例来说，对于X轴设置项目，定义类X_Axis，该类具有具体的例如线宽(stroke)、颜色(color)等属性。由此，通过面向对象的方式，将JSON对于图表数据的描述与面向对象编程语言的数据结构建立映射关系。

在建立映射关系后，在图表业务类中还至少定义两个方法，一个用于执行读取数据库，另一个根据数据库数据设置图表属性，并根据所设置的图表属性输出返回JSON文件。

由此，完成了对于图表业务类的定义。面向对象编程语言所定义的图表业务类由此构成动态页面和数据库之间的中间层，完成上下联系的沟通作用，帮助进行基于网页的动态图表生成。

图2示出了本发明的分层原理图。最上层为动态网页，本实施例中使用javascript页面实现，中间层为面向对象编程语言定义的图表业务类，这些类可被动态网页调用执行，在本实施例中所述的图表业务类通过JAVA实现；最下层为包括动态数据的数据库，其用于为图表提供动态数据。在本实施例中，JSP动态页面中嵌入了OFC2.0的动画组件，并能够根据动态网页访问参数(例如用户对于某一类数据的图表显示请求)调用中间层的JAVA类模块的方法，JAVA类模块首先调用方法向数据库请求需要的数据，数据库向JAVA类模块返回统计的动态数据后，JAVA类模块调用所请求的图表类型所对应的类，生成具体的对象并根据数据库返回的图表动态数据设置对象的具体属性(例如元素、图表名称、X轴、Y轴最大值等等)。设置完毕后，JAVA类模块根据设置好的对象生成用于告知OFC组件的JSON文件返回给JSP页面，JSP页面生成将带有该JSON文件记忆OFC动画组件的网页返回给用户(客户端)。在客户端的浏览器中，该返回的网页中的OFC动画组件读取动态生成的JSON文件由此生成动态的图表向用户展示。

图3示出了本发明的流程图。在步骤301，客户端向服务器端请求显示动态图表，请求中包括要求显示的图表类型。

在步骤302，服务器端的动态页面根据客户端的请求调用面向对象编程语言类模块。该类模块中按照支持的图表类型一一对应地定义多个图表业务类，并根据图表类型中的不同设置项目在对应的图表业务类中定义多个设置项目子类，该多个设置项目子类包括与设置项目相关的各项属性。

在步骤303，类模块判断客户端请求生成的图表类型。

在步骤304，类模块根据客户端请求的图表类型生成对应的图表业务类的对象。在图3中，如果客户请求显示饼图，则生成饼图业务类对象，若客户请求显示柱状图，则生成柱状图业务类对象，如果客户请求显示线状图，则生成线状图业务类对象。生成完毕后，由业务类对象执行方法向数据库请求数据。

在步骤305，数据库根据业务类对象的请求返回所需数据。

在步骤306，所述类模块根据数据库数据计算并设置业务类对象的各子类属性。

在步骤307，属性设置完毕后，类模块根据业务类对象生成对应的图表描述数据(JSON格式)并返回给动态页面。

在步骤308，动态页面生成嵌入了OFC动画组件以及该图表描述数据的页面给客户端。

在步骤309，客户端下载所返回网页中的OFC动画组件以及图表描述数据，OFC动画组件在客户端网页浏览器中根据所述图表描述数据生成并展示动态图表。

采用本发明提供的方法，无需编写繁琐的JSON格式文件，轻松调用，轻松设置，即可出现漂亮的三维flash效果的报表。大大提高了基于网页的网络应用开发的效率。

Claims

1.一种基于网页的动态图表生成方法，利用Flash动态图表生成组件在客户端生成动态图表，其特征在于包括以下步骤：

A. 客户端向服务器端请求显示动态图表，请求中包括要求显示的图表类型；

B．服务器端的动态页面根据客户端的请求调用面向对象编程语言类模块，所述类模块中按照Flash动态图表生成组件支持的图表类型一一对应地定义多个图表业务类，并根据图表类型中的不同设置项目在对应的图表业务类中定义多个设置项目子类，该多个设置项目子类包括与设置项目相关的各项属性；

C．所述类模块判断客户端请求生成的图表类型，并根据客户端请求的图表类型生成对应的图表业务类的对象；

D．生成完毕后，由所述图表业务类对象向数据库请求图表所需数据；

E．数据库根据所述业务类对象的请求返回所述图表所需数据；

F．所述类模块根据所述图表所需数据以及预先设定的默认值计算并设置所述图表业务类对象的各子类属性；

G．属性设置完毕后，所述类模块根据所述图表业务类对象生成对应的图表描述数据并返回给动态页面，所述图表描述数据与Flash动态图表生成组件兼容，用于向所述Flash动态图表生成组件传递图表信息；

H．动态页面生成并向客户端返回嵌入了Flash动态图表生成组件以及所述图表描述数据的页面；

I．Flash动态图表生成组件在客户端网页浏览器中根据所述图表描述数据生成并展示动态图表。

2.根据权利要求1所述的基于网页的动态图表生成方法，其特征在于：所述图表类型包括饼状图、垂直柱状图、水平柱状图、折线图和点图。

3.根据权利要求2所述的基于网页的动态图表生成方法，其特征在于：所述饼状图对应饼状图业务类，该类包括标题子类和元素子类，所述元素子类用于定义饼状图的显示内容，元素子类包括第一切片开始角度属性和切片角度值属性。

4.根据权利要求2所述的基于网页的动态图表生成方法，其特征在于：所述垂直柱状图对应垂直柱状图业务类，该类包括用于定义图表标题的标题子类、用于定义X轴属性的X轴子类、用于定义Y轴属性的Y轴子类以及用于定义垂直柱状图内容的元素子类，所述X轴子类包括X轴最大值以及数值元素；所述Y轴子类包括Y轴最大值以及数值元素；所述元素子类包括各数据柱的Y轴坐标值。

5.根据权利要求1所述的基于网页的动态图表生成方法，其特征在于：所述Flash动态图表生成组件为Open Flash Chart组件。

6.根据权利要求1所述的基于网页的动态图表生成方法，其特征在于：所述动态页面使用Javascript、PHP、ASP.NET或Perl实现。

7.据权利要求1所述的基于网页的动态图表生成方法，其特征在于：所述面向对象语言为C++、C#或Java。

8.根据权利要求5所述的基于网页的动态图表生成方法，其特征在于：所述图表描述数据为JSON格式数据。