基于HTML5的统计图表系统的研究与设计

1、 密级:分类号:烈,蔫利拨夫?晕硕士学位论文基于的统计图表系统的研究与设计量璺里婴坠垒璺壁堕望旦丛坠徐曼指导教师姓名: 陈和平教授武汉科技大学信息科学与工程学院申请学位级别:论文定稿日期:学位授予单位:学位授予日期:答辩委员会主席: 方康玲教授评 阅 人: 闻朝中副教授顾进广教授,一武汉科技大学研究生学位论文创新性声明本人郑重声明:所呈交的学位论文是本人在导师指导下,独立进行研究所取得的成果。除了文中已经注明引用的内容或属合作研究共同完成的工作外,本论文不包含任何其他个人或集体已经发表或撰写过的作品成果。对本文的研究做出重要贡献的个人和集体,均已在文中以明确方式标明。申请学位论文与资料若有不实

2、之处,本人承担一切相关责任。胡/ 。论文作者签名: 日期:生刍董研究生学位论文版权使用授权声明本论文的研究成果归武汉科技大学所有,其研究内容不得以其它单位的名义发表。本人完全了解武汉科技大学有关保留、使用学位论文的规定,同意学校保留并向有关部门按照武汉科技大学关于研究生学位论文收录工作的规定执行送交论文的复印件和电子版本,允许论文被查阅和借阅,同意学校将本论文的全部或部分内容编入学校认可的国家相关数据库进行检索和对外服务。论文作者签名指导教师签名:日 期:第页壅圣壁垫垄堂堡主堂垡笙壅. .,. ?铆.。,;. . ,. , . . , ., , . ,.;:;?;武汉科技大学 硕士学位论文 第

3、页目 录摘要?.?.?.?.第一章绪论.本课题的选题背景?.国内外发展现状.本文的组织和结构?第二章与技术简介?.发展历程?.技术简介?.的新特性?.发展历程. 技术简介?.浏览器对和的兼容性分析.本章小结?. 第三章应用框架及相关技术介绍?.技术?.概念. 技术原理.框架?.概念. 发展历史.作用及优势.框架.概念.发展历史.框架的使用.本章小结?.第页 硕士学位论文武汉科技大学第四章基于的统计图表系统的设计与实现.统计图表系统的整体设计方案?.统计图表系统的需求分析?.统计图表系统的功能?.系统各功能模块之间的关系?.系统开发环境?.系统架构的总体设计?.通用型模块的设计.配置模块的设计.

4、数据源多样性的设计?.统计图表系统主要模块的详细设计?.语音查询模块的设计与实现?.图表绘制模块的设计与实现?.本地存储模块的设计与实现?.表单模块的设计与实现.统计图表系统的测试?.测试平台?.流程测试方法?.测试过程.压力测试方法?.测试结果.本章小结?.第五章总结与展望?.课题总结?.本文的新颖之处?.本课题的不足以及下一步的工作.参考文献?致谢攻读硕士学位期间发表的论文和参加的主要科研项目武汉科技大学 硕士学位论文 第页第一章绪论.本课题的选题背景随着网络技术的不断进步以及新需求的不断提出,当下流行的技术也越来越多,应用复杂度日益增加。大量的图像制作、样式设计、插件不断被应用到设计中,

5、使应用界面更加实用、友好、丰富多彩。然而,大量的样式表和外接函数给修改维护工作带来沉重的压力,视频和音频,以及最新的绘图等技术,不得不依靠额外的插件来实现,其中以公司的和公司的最为著名。浏览器装上各种额外的插件,使得浏览器臃肿不堪,运行速度极为缓慢。研究标准有利于从源头上解决这些问题,使浏览器对以前复杂的插件进行原生地支持。是全新的但还没有完全成熟的下一代互联网新标准。不仅在移动互联网领域深受欢迎,在整个技术领域也备受瞩目。将在降低插件的重要性、支持动态图像的生成、三维图形的绘制、动画制作、本地存储、视频音频播放、跨文档消息传输、多线程处理等诸多方面发挥重要的作用,在使应用功能变得更加丰富多彩

6、的同时,也会使应用的开发变得更加高效。本课题来源于对前端开发的研究,为掌握新技术,开发了一套以为核心的统计图表工具的应用。作者研发的这套应用软件是一款通用的统计软件,可以在各种有需求的/系统上进行快速部署和卸载,并且支持多种数据库。其中用到的的技术实现了实时交互的统计系统设计,弥补了以往的统计分析系统的功能不足,以及在绘图显示数据图形时低效的缺点。.国内外发展现状. 的发展现状由于标准仍然处于研究草案阶段,没有向全球范围推广,而且所支持的浏览器也不是很全面,在国内外并没有广泛的应用。目前对于研究机构来讲,现阶段的主要任务是如何完善的标准【】。对于商业机构而言,如何开发符合现阶段草案的应用已成为

7、其下一步的发展和研究目标睇。目前国内外针对本课题的相关研究工作有以下几个方面:制定和完善草案,扩充其所包含的标签与功能【。实现跨浏览器平台的技术标准【。分析在各大浏览器上使用的技术,有可能将这些技术统一成标准写到的草案当中。将技术运用于网页图形设计】。通过标签生成和展示图形、图表、图第页 武汉科技大学 硕士学位论文像及动回。本地存储程序的开发】。使用和本地存储功能实现离线网页应用程序开及。在商业方面,在国内外的发展非常迅速。从年开始,国内外很多大型网站开始尝试使用来优化现有的网页功能,以谷歌、苹果、阿里巴巴为代表的大型公司已经提供了基于功能的产品或组件。以的主要产品为例。年初,增加了桌面文件拖

8、拽功能和桌面通知功能,这样用户只要将发送的附件拖到浏览器特定的区域,则可以轻松地实现上传。其效果如图.。只要使用的是浏览器,当收到新的电子邮件和信息,桌面右下角就会跳小窗提醒。其效果如图.:技伟大精氆啉,酬辫 籍文件拖至此处蒸霾鋈豳将其作为附件掭加;屯文本拼写检查图.附件拖拽功能气 。 :奄 图.桌面通知功能公司在的支持上做出了表率,不断将的特性应用于自己的产品中,为此,公司获得了不菲的商业利润。另外,苹果公司的和其浏览器也表示了对的支持。在中国,的应用也不容小觑。最近,阿里巴巴旗下的淘宝网也开始将的技术运用于自己的产品中,实现了语音输入的功能。只要用户点击搜索框中的麦克风按钮,并对着麦克风讲

9、话,淘宝网站会识别你的语音信息,并显示在搜索输入框中,进行自动搜索。如图.。图.淘宝网语音输入武汉科技大学 硕士学位论文 第页如今国内外各大公司已经开始着手支持并应用技术。对于所有的互联网公司来说,技术可促使其开发新的网络产品和新的功能。相信在不久的将来,越来越多的以技术为核心的网络应用产品会展现在世人面前。.统计图表系统的发展现状统计图表不是现在才有的需求,在人类开始接触大量的数据时,图表的优势就变得越来越明显。现如今统计图表系统众多,对于不同的需求,开发人员寻求不同的解决方案,但是这样开发出来的系统都有些不足,而且开发周期耗时较长,图表样式受限。目前国内外设计统计图表系统的方法有如下几种:

10、基于的统计图表”】。参考文献提出一种开源的基于的报表开发组件引擎,结合,实现基于的动态统计图表。运用.中的控件完成统计图表的生成。通过在.中直接调用提供的图表组件,实现了数据结果集的统计图表处理,实现诸多类型统计图表的自由切换。将 ,可缩放矢量图形技术运用于统计图表【】。参考文献利用从中派生的技术来标记矢量图形,并运用于统计图表的绘制。中技术能够把数据转换为图形,并将统计数据的定义和表现形式结合起来。.研究目的和意义本课题的研究目的在于分析技术在统计图表系统中应用的可行性,充分结合技术优势,设计并开发一套可插可拔的通用型统计系统。传统的统计系统,基于.控件或控件的调用,其缺点是显而易见的:扩展

11、性不强,效率低下,不够灵活,图形效果不太丰富。本课题的优势在于,其一,能高效实时地在客户端显示报表中的数据,减轻了服务器端的带宽和负载。其二,能实现显示结果的定时推送,即生成的报表可以按照用户指定的时间和方式推送至用户的邮箱,方便数据的保存和传送。其三,实现了一个通用的统计图表展示系统。可以通过简单的配置就能将统计系统与其他大型系统连接起来,并且支持多种数据库格式,方便数据库的集成。其四,技术能创造出新颖的视觉效果,从数据到界面图形的展现非常完整。另外,新的统计系统实时性与交互性更好,其多样化的图形呈现,直观的表达数据动态,为进一步的数据分析和数据挖掘提供了方便。.本人所做工作本文首先介绍了技

12、术和技术,并且针对浏览器对其的兼容性进行分析,选择适当的浏览器作为显示工具;然后介绍项目中会用到的技术及、框第页 武汉科技大学 硕士学位论文架;最后根据系统的需求分析设计并开发了一套基于核心技术的即插即用统计图表系统。在本课题中,本人所做的主要工作有:阅读相关文献和资料;寻找的技术和应用领域,根据本人的兴趣和项目需求,探寻研究方向,确定论文题目及项目主要研究内容。并对比当下的统计软件的不足,提出自己的观点,并将其设计运用于系统中。完成设计文档;根据统计系统必须的功能完成需求文档,总体设计文档,测试文档等。由于本课题需要完成一个通用型的统计图表工具,在设计上除了完成必备的功能和良好的用户体验外,

13、通用型也是本课题的特点之一。因而在系统设计上,本人研究了.的管道模型,通过转发机制实现通用性。并且在数据库的设计上采用抽象工厂的设计方法兼容多种数据库,从而达到通用型的目的。平台上开发,完成编码;根据之前的技术准备及文档准备,在前台页面使用,和语言,后台页面使用拌语言编写实现可插拔的统计图表系统。完成测试;系统的测试分为两部分,一是针对不同的数据库系统对本课题的兼容性做了流程测试;二是对比传统的.服务器端图表控件系统做了压力测试。压力测试更加证实了使用技术可大大减轻服务器端的带宽和负载。.本文的组织和结构本文各章节的组织结构及主要内容安排如下:第一章绪论,简要论述了本课题的选题背景和课题来源、

14、研究意义和本人所做的工作,并对论文结构做了合理安排。第二章介绍了的发展历史,新的特性和的发展历史,的核心技术,同时也将现今主流的浏览器对和的兼容性进行分析。第三章介绍了的核心框架、以及其他的核心技术,针对课题中用到的技术进行了详细介绍,最后总结了框架的使用情况。第四章主要完成基于的统计图表系统的需求分析、功能设计和通用型系统的方法分析与设计。并对统计图表系统进行测试,最后对测试结果进行分析。第五章是对全文的总结和展望。本章对本论文进行了全面总结,并归纳出课题研究的主要内容和本课题的创新点,同时也指出了基于的统计图表系统的不足之处,以及下一步有待完善的工作。硕士学位论文 第页武汉科技大学第二章与

15、技术简介作为课题的核心技术,本章主要介绍和的发展历程,并针对现有的浏览器进行兼容性分析。本章重点将介绍课题中将用到的新特性。.发展历程在世纪年代得到了大幅发展【引。年, .编写了一份称为“标签”的文档,其中包括了大约个用来标记网页的标签。年,互联网工程任务组推出第一个官方版本.,该细则规定的标签成功实现在文档中嵌入图片。其后,取代的角色,成为的标准组织者。之后,飞速发展,一年内推出.和.,直到年的 .,到达了第一个拐点。在快速发布了这四个版本之后,业界普遍认为已经到了穷途末路,对标准的焦点也开始转移到了和上,被放在了次要位置】。在这期间,与相结合,语言表现能力增强,为此.版本一直沿用至今。随着

16、.平台的更新,和标准已无法有效地满足现代应用的需要,迫切需要克服现有的缺点,添加新的功能,制定新的标准规范。直到年,又重新介入,并于年发布了的工作草案。年是技术的里程碑。在这一年,工作组停止工作。也在同一年,各大浏览器厂家对旗下产品进行升级以支持的新功能。也正是因为浏览器的实验性反馈,规范得以持续的完善。以这种方式迅速融入到了对平台的实质性改进中。并不是一个从零开始全新得东西,它是旧的标准的改进。今天,我们看到的规范已经以工作草案的形式发布,但这还不是最终版本,正式版本有望在年发布。图.展示了技术诞生到如今年的发展历程。图. 的发展历程硕士学位论文第页 武汉科技大学.技术简介,超文本标记语言是

17、曲核心语言【引,在浏览器中看到的网页效果都是以格式规化的。是的下一代规范标准,也是下一代标准。现今,我们提到的技术包含了,和等内容】。为此,的宗旨非常明确:用更统一、更简洁、更高效的代码实现丰富多彩的应用功能,而这些功能不依赖任何的外部插件【 。为了实现这一目的,提供了很多,并且增加新的元素和属性,使浏览器原生地支持相关的标签。例如,在技术出现之前,大部分视频和音频都是通过浏览器插件如来实现,这要求客户在观看视频之前安装相应的组件,而增加了和标记,只要浏览器支持相应的标签,就可以像使用一样方便地在页面内嵌入音频和视频。而不再依赖于特定的第三方技术就能简单地把视频和音频内容和网页中的其他内容进行

18、整合。还实现了文件的离线存储,硬件与软件的实时交互,动态生成图像等功能。不仅如此,使页面布局变得更加清楚易懂。之前使用的标签也不再使用,而是使用中新加的语义化结构标签。并非仅仅用来表示内容,其新使命是将带入一个成熟的应用平台【引,在平台上,视频、音频、图像、动画以及同电脑的交互都被标准化。毫无疑问,在未来的,富互联网应用中,将引发一场新的技术变革,它不仅仅是.的升级版本,更是指引未来技术规范统一发展的新方向。.的新特性本课题中将用到的相关技术包括本地数据存储,图形绘制,音频的输入及表单元素。本节将对这些特性进行详细描述。本地数据存储本地数据存储,顾名思义,就是在上存储数据的功能,无论是离线还是

19、断网的情况下都能正常地访问网站数据。在过去,程序利用中的进行浏览器端的本地存储。然而最多允许个,最多存储字节的内容。这样小的存储空间不能满足真正实用的应用,实现了这种需求。的本地存储是使用对象将曲数据持久的保存在客户端建立的一个数据库上,并与之进行交互。本地存储大大减轻了服务器端的负担,同时也加快了访问数据的速度。由于图表数据查询的重复性,本课题将用到 进行数据的本地存储,更加高效地显示图表信息。图形绘制过去,网页中显示的图像来自于直接下载的或图像,而在中,图像可能并不是直接来自图像文件,而是由某个对象直接生成。元素是中新增的一个重要元素,专门用于绘制图形。放置一个元素,就是在页面内划分一硕士

20、学位论文武汉科技大学 第页块无色透明区域,在层针对动态数据进行计算后绘制出各种复杂的图形。使用,可以在页面上动态生成和展示图形、图表、图像及动画,创造出更加丰富多彩、赏心悦目的下一代页面。元素是统计系统中最重要的工具之一。我们使用其对数据图表进行绘制和扩展,包括图形的生成,图表的动态扩展等。音频的输入在中,提供了音频视频的标准接口,通过这些接口技术,视频、动画、音频等多媒体播放再也不需要插件,只需要一个支持的浏览器,就可以像使用图片一样方便地在页面中内嵌音频。同时开发时再也不需要书写复杂的元素和元素。表单元素表单包含很多控件类型,是页面上非常重要的组成部分。通过表单元素,用户可以进行输入文本或

21、者点击按钮来完成与后台数据的交互。本课题中将用到很多表单元素,如表单内元素内容的有效验证,拖放使页面中的元素相互拖放等。.发展历程从年代被发明开始,样式表就以各种形式出现,不同的浏览器有各自的样式语言。但是由于的飞速发展,为了满足开发者的需要,获得了很多显示功能。随着这些功能的增加,外来定义样式的语言越来越没有意义了。直到年哈坤?利,层叠样式表的最初建议,并和伯特?波斯一起开始着提出了 手设计。年月,正式推出。在该版本中,包含了、。等的相关属性。年月,正式推出,该版本已经开始使用样式表结构年月,在的基础上推出.,该版本删除了许多浏览器不支持的属性。现在所使用的基本上是在年推出的的基础上发展而来

22、的。直到年推出了全新的版本。.技术简介语言是一种不需要编译的标记性语言【,可以直接由浏览器解释执行【引。它是一个包含了标记的文本文件,在标准网页设计中负责网页内容的表现。有了文件,开发人员可以通过简单的更改文件,改变网页的整体表现形式。除了,也将为开发带来革命性的影响,很多以前需要和框架才能实现的复杂效果,如多背景,圆角,动画等等,现在使用就能简单地实现,极大地提高了程序开发效率。另外,由于技术的进步,中废除的一些元素将统一由添加样式表的方式进行代替。例如、等元素,由于他们的功能都是纯粹为展示画面效果,所以中将这些画面展示的功能标签放在样式表中。为此,对于界面设计者来说,运用中新增的属性解决中

23、无法实现的效果,第页 武汉科技大学 硕士学位论文无疑是一件非常可喜的事情。.浏览器对和的兼容性分析技术虽然得到广大权威人士的肯定,时代已经来临,但并不是代表用创建的网站必须全部重建,只会要求各浏览器今后能正常运行开发出来的功能。但是作为新版本的和在各种浏览器中的兼容程度一直让开发人员质疑。尽管各大浏览器厂商已经着手支持和中很多优秀的新功能,不过由于各个厂商的步伐不一,导致和在各浏览器中的实现程度参差不齐。为此,本人将综合两种兼容性测试工具和的测试结果来分析在平台上主流浏览器的兼容程度。在主流浏览器的选择上,根据国外权威网站分析公司发布的年?月份全球浏览器市场占有率统计分布情况【,主流产品见图.

24、所示。;:薯:乞:翟?,:二三銮委鋈鏊羹圈圈?二鋈鋈誓羹霾圈”一二鋈鋈霾羹震圈;一一?。蠢?一 ?:;蒜?一一图.主流浏览器分布图从图.可以看出,微软的仍在全球市场中占据头名地位,的和开源浏览器紧随其后,苹果公司的和挪威欧普拉软件公司的浏览器次之。.鼍.口 ,.一.咖.,.口.佰 .图.浏览器主流版本分布图硕士学位论文 第页武汉科技大学仔细分析每个浏览器的版本如图.,我们可以清晰地选择要测试的浏览器版本:.、.、.、.、.、.。针对本文要完成的需求功能,将测试以下几种功能:音频播放标记潜在地支持多种音频格式,包括 、打等。下面的代码播放了一段音频,带有控制按钮:” .”/” .”/”.”/”抱

25、歉,您的浏览器不支持标签,请尝试使用其他浏览器。/绘图标记中引入的元素可以支持开发人员绘制线条、图形、添加文字和图像。下面的代码在页面上简单绘制了一个蓝色矩形。”抱歉,您的浏览器不支持标签,请尝试使用其他浏览器。/”/”.”;.”;.”;., ;/表单控件标记表单控件标记包括很多,本课题选取、作为测试对象。这里提供一个简单的测试例子,用户填写电子邮箱和个人主页,提交给后台系统。” ”?: ”。”/”/: ”/离线存储引入两种新的存储方式:和,他们分别是没有时间限制的数据存储和针对的数据存储。”/”.;硕士学位论文第页 武汉科技大学;.”这是存储里的计数:”.”重启浏览器本计数器会清零”;.;:

26、.”这是存储里的计数:”.”重启浏览器本计数器会清零”;/属性等。的属性有很多,例如:、选择器、等。选择器有很多标签,如:/表.浏览器兼容表墨璺堑: 旦呈翌:里: 里皇: 里堡鱼茎兰: 璺坠竺里呈:不支持 支持 不支持 不支持不支持 不支持不支持 支持 支持 支持 支持 支持表单 支持 不支持 支持 支持 支持 支持离线存储 不支持 支持 支持 支持 支持 支持属性 不支持 支持 支持 支持 支持 支持选择器 不支持 支持 支持 支持 支持 支持其测试结果如表.所示。如此看来,对支持最好的是,、和次之,支持最差。鉴于这种情况,在论文的实际项目中将采用浏览器作为显示工具。.本章小结本课题运用了和

27、为核心技术来显示统计图表。本章针对这两种技术从定义和发展历史两方面进行详细介绍,并详细分析了浏览器对和的兼容性,用于指导系统开发平台的搭建。武汉科技大学 硕士学位论文 第页第三章应用框架及相关技术介绍除了技术,开发框架在课题的开发中也很重要。本章节主要介绍基于开发的两个应用框架:代码开发的框架和基于的富客户端框架,同时对系统中用到的技术进行了介绍。.技术.概念,异步及是指一种交互式网页开发技术【川。运用此技术可以将笨拙的界面转化成交互性的应用程序,从而提高系统性能,优化用户界面。事实上,不是指一种单一的技术,而是有机地融合了、和一系列相关的技术【】。无疑,在/模式下的页面,运用技术已经成为一种

28、主流。主要有、三部分组成【引。其中用于页面数据传递、刷新局部页面;用于向服务器提交请求,与服务器响应;是服务器返回数据的格式。对象是技术的核心。该对象是一种支持异步请求的技术,通过向服务器提出请求并处理响应,而不重载页面只是部分刷新页面信息。这种独立于服务器软件的前端技术会使浏览器应用程序更轻便,更快捷,更友好。.技术原理传统的应用,用户运行程序的模式是同步请求:请求一显示一互动一暂停一请求一显示一互动一暂停?,以此往复。整个过程需要不断地刷新整个页面,页面展示不连续。而引入技术,用户运行程序的模式是异步请求:请求一显示一互动一请求互动一请求互动?异步的请求不需要暂停操作,只需向服务器请求一小

29、部分数据,更新页面的一小部分。传统的应用如图.,技术原理如图.。相当于在用户和服务器之间加了一个中间层【引,使用户操作与服务器响应异步化。在本课题中页面的传值将使用技术。例如用户设置显示图表的时候,会利用的异步通信原理,部分刷新页面,其代码如下。.:”,:”/./”,”,:”/硕士学位论文第页 武汉科技大学:”,:,:,:,:,:”;.?%:”.”:”/;. %;”.”:”/;.一 %;”.”:”/;用户界面客白琦而请求数据和服务器服分器端数据处理图.传统的应用图.技术原理武汉科技大学 硕士学位论文第页.框架如今的万维网是一个动态的环境,曲开发者为了构建有吸引力的交互式网站,借助的库实现了常见

30、任务的自动化和复杂任务的简单化。本节将对进行详细介绍。.概念。其压缩是一款开源的代码库,也是一款轻量级的开发框架大小只有,非常轻巧。的宗旨是“写更少的代码,做更多的事情”。在项目中,开发人员只需要调用类库就能方便地处理文档、处理事件、实现动画效果,并且方便地为网站提供交互。现如今已发展成熟,使用文档说明很全,而且各种应用也表示得很详细。提供很多成熟的控件的同时开发人员也可以根据自身需求对进行扩展。而且能够使代码和内容分离,便于代码的维护和修改。本课题将运用类库实现客户端脚本编程。.发展历史技术是在近几年迅速发展起来的【。从.到.只经历了短短的年时间。年神童 最先提议改进的库,随后年 .问世,第

31、一个版本已经对选择符、和交互提供支持。接着.合并较少使用的方法,很大幅度简化了。年月.去掉对选择符的支持,新增命名空间,更加简洁插件的开发。同年,新的插件面世,替代传统的插件,并且其中包含大量已经定义好的部件和元素。年新版本.和.陆续问世,这次的升级使用了全新的选择符,改进了的性能。年发布新版本.,该版本将热门的和常用的方法进行改写,降低源代码的复杂度。接着发布的.和.,是对之前版本性能上的改进和功能的补充。.的推出,最出彩的地方是完全重写,使其扩展性变强。年.发布,重写了模块和改进性能。跟往年一样,其后发布的.和.修复了很多。同年,.面世,该版本带来一些新的特性,如:增加和。同时也改进了下的

32、表单处理和动画效果。现如今,已经更新到.。可以这样认为,的发展是朝着更全面,最简便的方向前行,努力为工程师带来代码上的便利和结构上的清晰。.作用及优势库提供了通用的抽象层,使得它几乎适用于任何脚本编程。不仅如此,硕士学位论文第页 武汉科技大学的作用和优势主要有如下几点:,文档对象准确选取页面中的元素。能遍历模型树,准确地获取需要检查或操纵的文档元素,提供可靠而有效的选择符机制。轻松改变页面内容。只需一个简单易用的,就可以改变文本、插入或翻转图像、对列表重新排序,而且对文档的整个结构都能重写和扩充。响应页面事件。.不需要使用事件处理程序搞乱代码,而是对页面事件进行拦截,比如用户单击一个链接,会拦

33、截当前的,并进行转发。无刷新页面机制。无需刷新页面就能实现从服务器获取信息。不过该功能需要的辅助。修改页面的外观。继承了简明清晰地表达文档结构的方式。并弥补了跨浏览器不兼容的缺陷。其他的新方法。作为一种新的类库,提出了很多自己的方法,如集合对象,隐式迭代,方法连缀等。总是面向集合对象,然后利用它的隐式迭代技术,不需要循环遍历每个返回的元素,而是自动调用类方法操作对象集合。同时,为了保持类库的小型化,采用连缀的编程模式。该方法将一个对象进行多次的操作,并且每次操作结果会返回到对象本身,以便下一次的操作。的优势很多,如轻便,简洁,都是其他产品不能及的,而且其代码都是开源的。开发人员可以在其官网免费

34、获得最新产品。. 框架是一种主要用于创建前端用户界面的框架,完全基于标准运用、等相关技术构建的。本节将详细介绍技术。. 概念。主要用于创建前端用是一个基于的富客户端框架,用编写户界面,使/应用更加具有活力。兼容性很强,可以用在.、等各种开发语言开发的应用程序中。运用简单而且广范,既可以应用到样式上实现各种丰富多彩的的开发,也可以应用到数据解析进行异常的处理。.发展历史最开始基于技术,由开发人员 在年初开发,它通过参考等机制来组织可视化组件【。同年年底,这个库备受欢迎,改名为。在年月日,.正式版发布。过了两年的.版本发布。直到年,已发展涵盖美国、日本、中国等全球范围用户,如今的版本已经升级为.。

35、也是在硕士学位论文 第 页武汉科技大学年,为了应对新的技术【,与触摸屏代码库项目和处理库合并,后两个项目的创始人 和 也将加入。新的加强丰富图形效果和增加触摸屏功能。年月日,.正式发布,主要有以下改进【 。首次提供了完整的沙盒模式。沙盒模式的意义在沙盒模式:在历史上,于当该框架与其它的框架同时加载到页面时,不会产生冲突。应用架构: .引入了一个标准化的,几乎适合任何应用程序的.风格的应用架构。使用架构,开发人员只需要学习一种架构就能理解任何的应用。全新的图表库:.中包含全新的、插件自由的图表库,可以轻松创建饼图、线图、面积图、雷达图等等,并且所有这些都是动画的、易于配置的和可扩展的。增压的数据

36、包:.一个基础性的作品就是数据包。不管用户将数据加载到、或其它组件,改进的数据包都比以往更容易操作。而且新架构还支持的技术,方便数据流在用户的应用中进出。.框架的使用框架在使用上只需要在所需页面中引珈文件即可。引入之后便可在页面的任意地方使用提供的语法。框架运用于程序中的各个页面,主要负责的请求。引入文件代码如下。”/.”/”/主要负责非图表部分的展现,使用方法和一样,在使用之前都需要先引入的库文件。引入代码如下。”/.”/”/”/”/”/这里将给出页面中的整体框架代码。”/”. /左边菜单.:菜单,/面板名称:?,:?./该面板的位置,此处是西部,也就是左边:,/为时,布局边框变粗,默认为:

37、,:,:./初始化是否显示,默认是显示第页 武汉科技大学 硕士学位论文:,:,/最小宽度:,:,:晦弱:,:,:,:统计查询,:,:/字面板样式,子面板包含的内容,的值日通常是一个,:”后台管理”,:,:,:,:”,:/:”.:/面板的内容是指向一个.,:是表示支持包含文件里面的脚本;?/省略了页面底部代码.:,:,:,:,:,:,: .;.:,/布局,必须是硕士学位论文 第页武汉科技大学:,:,:,:,:,:、,立,./左,/中/下】;.;.;/上述代码中,使用了的框架,该框架支持技术,能够很好的展现统计图表。.本章小结本章前半部分详细描述了技术,为后面系统的详细设计做好技术铺垫。本章后半部

38、分介绍了系统中运用的框架,主要是用于前端开发的框架和框架。武汉科技大学 硕士学位论文第页第四章基于的统计图表系统的设计与实现基于上述所有的准备工作后,本章将集中的介绍本人所做的工作。包括系统的需求分析,总体设计及详细设计和设计方法等。同时,对系统设计时遇到的难题和障碍进行重点分析和说明,并给出了解决方案。.统计图表系统的整体设计方案.统计图表系统的需求分析为了满足不同的客户需求,市面上的统计图表种类繁多,大致可以分为两类:一种是静态格式。这种统计图表多基于/模式,特点是格式固定而且数据来源预先定义,发布后无法继续改动图表格式。一种是动态格式。这种图表多基于/模式,特点是界面图形交互性很好,数据

39、绑定很灵活,可扩展性很强。本课题属于开发研究性课题,来源于年的项目实践和对前端技术的研究。结合当下最热门的技术,实现一个通用的统计图表系统。该统计图表系统需要达到的目标有:完成图形的准确绘制。根据数据库中的数据准确的绘制各种图表,包括柱状图,饼状图,折线图、雷达图等基本图形。良好的数据查询方式。针对查询功能的特点,必须满足模糊查询,条件查询,语音查询等。查询时,需要考虑图表绘制的速度。可定时推送。此系统中必须能将所显示的图形进行订阅推送,如可将此刻或者一个星期的数据图表以图片的方式发送到客户邮箱中。可复用性强。期望完成可复用性强的系统。系统的数据库应该满足多种数据格式。,等。系统的兼容性强,可

40、以作为第三方系统进行调用。如用户交互性好。用户能巧妙的运用任何图形样式,并能进行图表对比显示,使得数据分析更直观。能够通过拖拽来放大和缩小统计图。界面美观。图表的展示风格力求美观大方,如动画,图形,布局,调色板,边界,标记和多轴等。安装方便。此系统作为第三方系统,可进行高效方便的可拆可用,并且维护效率高,减小系统故障时的解决时间。同时安装方便也代表易操作,人性化界面等。.统计图表系统的功能根据上述的需求分析,统计图表系统主要实现对数据的统计图表显示、查询及管理工武汉科技大学 硕士学位论文 第页作。由于系统可复用性强,将会使用两种数据库进行绑定测试。用户可以根据自己的数据库进行对统计图表的第三方

41、绑定,并能进行查询这些数据的功能。根据系统的主要功能将系统分为个功能模块进行设计与实现,并将系统封装成一个接口模型,可供用户轻松调用。具体模块如下:系统的动态菜单:主要根据用户的具体权限,显示用户不同的功能菜单项。普通用户只有查询和图表查看以及推送设置页面,管理员普通用户的权限之外还有配置数据库,设置显示图表等管理权限。数据查询模块:主要包括各种数据量的数据查询,并提供不同条件的数据查询功能。此查询功能支持语音查询,只要能给出正确的指令,就能进行语音输入。数据管理功能:这是管理员的权限,除了数据查询相关功能,还可以配置数据源,设置显示图表格式等。图表查询功能:可以根据用户的查询条件查询数据的各

42、类图形,如曲线图、柱形图、饼状图等。另外查询支持语音查询,用户在有麦克风的情况下可以给出语音指令,进行图表的查询工作。图表推送设置功能:根据用户的喜好,可以将要推送的地址,如邮箱进行设置,同时也可以对推送时间进行设置。.系统各功能模块之间的关系本课题的系统设计中,上述的个功能模块在平台下可以分为不同的组件。主要有表现层组件、数据访问层组件、业务逻辑层组件。此三层架构的方式使系统主要的功能都在业务逻辑层进行处理。而所有的展示页面都放在表现层中进行集中管理。数据访问层是原始数据的操作层,为业务逻辑层或表示层提供数据服务,如,数据集等。这样客户端不直接与数据库进行交互,而是通过/通讯与中间层建立连接

43、,再经由中间层与数据库进行交互。图.是各组件的关系,双向箭头表示调用关系。表示层 业务逻辑层 数据访问层 数据库?业务逻辑包?,用户界面包卜? 数据访问包图.各组件关系图系统架构决定整个系统的结构,本系统采用三层架构进行设计。图.是系统开发目有的展示页面都放在该文件夹中,相当于用户界面的表示层。主要向用户展示图表和显示数据,以及接收查询订阅等交互式请求操作。其中用于前台开发框架类库和框架都放在文件夹中,便于前台调用。而样式表如.文件放在文件夹下硕士学位论文第页 武汉科技大学的文件夹中,使得表示层中的样式与行为独立,方便代码的修改。.中的文件夹存放.文件。将所有的功能处理和后台的业务逻辑都放在此

44、文件夹中,相当于三层架构中的业务逻辑层。此层主要是对前台显示功能进行控制,对数据层的操作进行组合,是数据与前台进行交互的核心模块。如系统中用到的查询,配置等操作。另外,由于此系统是一个可复用性的通用统计图表系统,数据库的设计必须满足各种数据库。分别将不同的数据库设置成数据库类。在此,归类了数据库和不同的数据操作,即不同的数据访问层。淘解拣.个凄目圈.幽翻弓用固岂】圈幽.圜.;浏囱弓用圈.穗.薹鲴国弓用逝?囱凶.一溷.圈淘引用图.系统开发目录结构图.系统开发环境针对本课题的需求及技术上的总体要求进行综合分析,将使用.开发平台,以为后台程序语言,前台以为主要开发语言,同时引入和做页面展现支持。另外

45、,还采用技术实现数据的交互和页面的无刷新。系统的开发环境分为软件和硬件两块。软件部分需要在上装载 和 ,为了很好地支持,浏览器采用 .以上版本。硬件方面为标准配置的机一台。武汉科技大学 硕士学位论文第页.系统架构的总体设计.通用型模块的设计为了设计一个通用型且复用性高的统计图表系统,本人深入分析了的管道模型,采用了一种可插拔的解决方案。在此系统中,我们命名了.的资源文件,它提供一个用于图表集中展示和定期通知的机制。其特点就是无需重新编译,通过配置.实现整个应用程序甚至是中所有应用程序的统计图表展现工作。它支持多种数据库的展现,如、静态。除了提供一个界面用于统计分析外,还可以通过?、订阅等发布方

46、式通知统计信息给相关人员。并且该工具可插可拔,装载、调用和卸载都很方便。通用型统计图表系统的原理在于,当一个大的系统调用统计图表工具时会发送一个.文件的请求,该请求最先到达,之后被.进程截获,它判断文件的后.,缀名为.之后,将该请求转交给.会通过管道将请求发送给 .进程,在进程中通过来处理这个请求,处理完毕后将结果返回客户端。在该管道里,有多个,每个请求都要依次通过这些 ,这就使得各个可以根据自己需要处理这些请求,当经过所有的后,将由一个并且只能是一个来处理这一请求,当然我们可以在来处理,它是根据被请求资源的路径名称或者后缀.中配置由哪个名来决定,比如可以指定如果请求.这个资源文件,则由名称为

47、.的来处理。管道模型示意图如图.。/么灏蕊黧嚣鬻参蘸量.刊: 羹鍪雾 /图.管道模型正是因为我们可以在每个中都可以干预请求的处理过程,所以当外部系统发来一个请求时,可以用“实现的拦截和转发,在其他系统上快速实现迁移。统计图表系统在其他.网站上的部署操作十分简单,只需要步即可完成。部署步骤如下:.中添加。也就是说在目标系统的.中添加一条武汉科技大学 硕士学位论文第页记录。”幸”/.”.”/覆盖;将统计图表系统中的放入目标系统的目录中。在目标网站的根目录中添加两个文件夹和,并复制统计图表系统中的文件。打开网站后登陆配置页面进行后续的数据源、显示图表类型等配置工作。.配置模块的设计在上述添加的.中,

48、我们引入了一个自己写的 。当外部有请求时,会干预请求将页面转发给写好的类。这样就进入我们系统的配置页面。为了进一步提高系统的适应性和可扩展性,我们没有将系统其他配置信息存放在曲.或者数据库中,而是将这些信息存在了网站的目录的.和.中。这样做的好处是配置信息可以随着网站快速迁移,避免了新网站的配置变量冲突,有效地回避了有些中大型项目配置项过多,导致.文件的体积过大的问题。图.为配置类的架构图。图.配置类的架构图武汉科技大学 硕士学位论文 第页圈.剑幽引用园哟.豳;。剐哟。哟.哟.:哟船哟哟.塑.图.配置类文档结构图图.是配置类文档结构图。首先,我们定义了两个基础类:配置实体类和加载配置文件方法类

49、,然后通过.的序列化方法实现了配置类与配置文件的快速转换。然后,根据我们需求分析,设计出了我们系统所需要的邮件发送类和全:参数,然后继承于基础类实现了快速填充。在此基础上,如果需要再扩展出更多的配置文件也会比较容易。其实现代码如下。/配置,力标记为可序列化:属性;/艮务器地址;/邮件服务器地址;/发信人;账号;密码】:属性;/标题;数据库类型;数据库连接串;/统计图表个数 ;/图表的类型;/图表的数据源;/图表的存储过程或语句;/表的类型;图表的数据源第页 武汉科技大学 硕士学位论文;/图表的存储过程或语句;/预留字段;/预留字段;/预留字段;/预留字段”;.”;可以这样说,配置类也是为了实现系统的通用型。在程序结构中我们在文件夹中新添了.进行配置页面的设计,也就是管理员的设置页面。该页面主要是为了设置数据源以及订阅转发的地址。图.是系统配置页面。图.是邮箱配置页面。粟绩配置系统名称: 欢如使用统计图表系统:数据库类型:商数据库连接串:.