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

分类号：密级：UDC:硕士学位论文基于HTML5的统计图表系统的研究与设计TheResearchandDesignoftheChartsSystembasedonHTML5徐曼答辩委员会主席：方康玲教授评阅人：闻朝中副教授顾进广教授 武汉科技大学研究生学位论文创新性声明本人郑重声明：所呈交的学位论文是本人在导师指导下，独立进行研究所取得的成果。除了文中已经注明引用的内容或属合作研究共同完成的工作外，本论文不包含任何其他个人或集体已经发表或撰写过的作品成果。对本文的研究做岀重要贡献的个人和集体，均已在文中以明确方式标明。申请学位论文与资料若有不实之处，本人承担一切相关责任。研究生学位论文版权使用授权声明本论文的研究成果归武汉科技大学所有，其研究内容不得以其它单位的名义发表。本人完全了解武汉科技大学有关保留、使用学位论文的规定,同意学校保留并向有关部门（按照《武汉科技大学关于研究生学位论文收录工作的规定》执行）送交论文的复印件和电子版本，允许论文被查阅和借阅,同意学校将本论文的全部或部分内容编入学校认可的国家相关数据库进行检索和对外服务。论文作者签名：彳指导教师签名：旳卜9日期：xaj2| AbstractHTML5istheIntemefsmostpopularfront-enddevelopment.HTML5,asthenextgenerationofWebstandards,itscharacteristicsareanewversionofeachbrowserthatgetsfastsupportandreflect.HTML5aimstoeliminateorreducethecomplexityofthescriptandprovidethefunctionthatpreviousversionsrequiringplug-inscanbeachieved.ManylargedomesticandforeignInternetcompaniesaredevelopingtobuildapowerfulHTML5applicationtoconstantlyperfecttheirWebproductstoallowuserstogetthebestexperience.ThispaperfirstintroducestheHTML5andCSS3technology,andanalyzesthecompatibilityoftoday"smainstreambrowserHTML5andCSS3.ThenintroduceAjaxtechnologyandtwoimportantframeworkwhichwillbeusedinthedevelopmentlateranddiscusstheirspecificusage;thefinaldesignofthesystem,Idesignanddevelopageneral-purposestatisticalchartingtoolsbasedonthree-tierstructure,Asp.netpipemodelandabstractfactory.ThetoolhasbeenverifiedthroughthetestanditcanbecompatiblewithSQLServer,staticXMLdatabase.Themeaningofthissubjectisthatitdoesnotusethechartcontrolsof.nettraditionally,butdrawthechartdirectlyinclientbrowserwithCanvasofHTML5.Itcanbeusedinothersystemsasacommontooltopresentchart.Thetoolishot-swappablethatitcanbedeployedandremovedquicklyinothersystems,andalsorunwithoutcompiled.HTML5andCSS3,combinewithjQuerylibraryandExtjsFramework,areusedinthissubjectascoretechnologyforfunctiondevelopmentandpagepresentation・Thistopicovercomethescarcityofrelevantresearchdatainthedesign,andexploresaforefrontdevelopmentapproachforthedevelopmentofstatisticalcharts,wehavegainedsomeexperienceofacertainvalueinbothtechnologyresearchandproductdevelopment.Keyword:HTML5;CSS3;front-end;jQuerylibrary;statisticalcharts 目录摘要IAbstractII第一章绪论11.1本课题的选题背景11.2国内外发展现状11.2.1HTML5的发展现状11.2.2统计图表系统的发展现状31.3研究目的和意义31.4本人所做工作31.5本文的组织和结构4第二章HTML5与CSS3技术简介52.1HTML5发展历程52.2HTML5技术简介62.3HTML5的新特性62.4CSS发展历程72.5CSS3技术简介72.6浏览器对HTML5和CSS3的兼容性分析82.7本章小结10第三章应用框架及相关技术介绍113・1Ajax技术113.1」Ajax概念113.1.2Ajax技术原理113.2jQuery框架133.2.1jQuery概念133.2.2jQuery发展历史133.2.3jQuery作用及优势133.3ExUS框架143.3.1ExtJS概念143.3.2ExUS发展历史14 3.4框架的使用153.5本章小结17第四章基于HTML5的统计图表系统的设计与实现184」统计图表系统的整体设计方案184.1.1统计图表系统的需求分析184.1.2统计图表系统的功能184.13系统各功能模块之间的关系194.1.4系统开发环境204.2系统架构的总体设计214.2.1通用型模块的设计214.2.2配置模块的设计224.2.3数据源多样性的设计254.3统计图表系统主要模块的详细设计294.3.1语音査询模块的设计与实现294.3.2图表绘制模块的设计与实现294.3.3本地存储模块的设计与实现334.3.4表单模块的设计与实现344.4统计图表系统的测试344.4.1测试平台354.4.2流程测试方法354.4.3测试过程354.4.5压力测试方法364.4.4测试结果374.5本章小结38第五章总结与展望395.1课题总结395.2本文的新颖之处395.3本课题的不足以及下一步的工作40参考文献41致谢43攻读硕士学位期间发表的论文和参加的主要科研项目44 第一章绪论1.1本课题的选题背景随着网络技术的不断进步以及新需求的不断提出，当下流行的Web技术也越来越多，应用复杂度日益增加。大量的图像制作、样式设计、Flash插件不断被应用到Web设计中,使Web应用界面更加实用、友好、丰富多彩。然而，大量的样式表和外接函数给Web修改维护工作带來沉重的压力，视频和音频，以及最新的3D绘图等技术，不得不依靠额外的插件來实现，其中以Adobe公司的flash和Microsoft公司的Sliverlight最为著名。浏览器装上各种额外的插件，使得浏览器臃肿不堆,运行速度极为缓慢。研究HTML5标准有利于从源头上解决这些问题，使浏览器对以前复杂的插件进行原生地支持。HTML5是全新的但还没有完全成熟的下一代互联网新标准。HTML5不仅在移动互联网领域深受欢迎，在整个Web技术领域也备受瞩目。HTML5将在降低插件的重要性、支持动态图像的生成、三维图形的绘制、动画制作、本地存储、Web视频音频播放、跨文档消息传输、多线程处理等诸多方面发挥重要的作用，在使Web应用功能变得更加丰富多彩的同时，也会使Web应用的开发变得更加高效。本课题來源于对Web前端开发的研究，为掌握HTML5新技术，开发了一套以HTML5为核心的统计图表工具的应用。作者研发的这套应用软件是一款通用的统计软件，可以在各种有需求的B/S系统上进行快速部署和卸载，并且支持多种数据库。其中用到的HTML5的技术实现了实时交互的统计系统设计，弥补了以往的统计分析系统的功能不足，以及在绘图显示数据图形时低效的缺点。1.2国内外发展现状1.2.1HTML5的发展现状由于HTML5标准仍然处于研究草案阶段，没有向全球范围推广，而且所支持的浏览器也不是很全面，在国内外并没有广泛的应用。目前对于研究机构来讲，现阶段的主要任务是如何完善HTML5的标准⑴。对于商业机构而言，如何开发符合现阶段HTML5草案的应用己成为其下一步的发展和研究目标［現目前国内外针对本课题的相关研究工作有以下几个方面：(1)制定和完善HTML5草案，扩充其所包含的标签与功能⑴。(2)实现跨浏览器平台的HTML5技术标准⑶o分析在各大浏览器上使用的HTML5技术，有可能将这些技术统一成标准写到HTML5的草案当中。(3)将Canvas技术运用于网页图形设计⑷。通过Canvas标签生成和展示图形、图表、图 像及动画。(1)本地存储程序的开发⑸⑹。使用JavaScript和本地存储功能实现离线网页应用程序开发。在商业方而，HTML5在国内外的发展非常迅速。从2010年开始，国内外很多大型网站开始尝试使用HTML5来优化现有的网页功能，以谷歌、YouTube、苹果、阿里巴巴为代表的大型公司已经提供了基于HTML5功能的产品或组件。以Google的主要产品Gmail为例。2011年初，Gmail增加了HTML5臬面文件拖拽功能和HTML5桌面通知功能，这样用户只要将发送的附件拖到浏览器特定的区域，则可以轻松地实现上传。其效果如图1・1。只要使用的是Chrome浏览器，当收到新的电子邮件和Gtalk信息，桌面右下角就会跳小窗提醒。其效果如图1.2：收件人xuman23@gmal.co(i町将文件拖至此处韵麵絆作为附悴加＜駛本捞極图1.1附件拖拽功能maiLgoogle.com/加WwmailfromAndrewWilson:VV%Cookies?Imad©abatchofmyfamousoatmealcookies-get"emwhiletheylast!图1.2桌面通知功能Google公司在HTML5的支持上做出了表率，不断将HTML5的特性应用于自己的产品中，为此，Google公司获得了不菲的商业利润。另外，苹果公司的iPad和其浏览器也表示了对HTML5的支持。?一漓网Hfcao^扮本地生活淘宝旅行0在中国，HTML5的应用也不容小觑。最近，阿里巴巴旗下的淘宝网也开始将HTML5的技术运用于自己的产品中，实现了语音输入的功能。只要用户点击搜索框中的麦克风按钮，并对着麦克风讲话，淘宝网站会识别你的语音信息，并显示在搜索输入框中，进行自动搜索。如图1.3o宝贝［天5畝磋商城；iSiH[Q搜索侵用帮助牛仔褥单廷瞇卖村衫打民祈Ttt女色更多〉■OOQQQOOOQOIw」倍消费者保阵图1.3淘宝网语音输入 如今国内外各大公司已经开始着手支持并应用HTML5技术。对于所有的互联网公司來说，HTML5技术可促使其开发新的网络产品和新的功能。相信在不久的将來，越来越多的以HTML5技术为核心的网络应用产品会展现在世人面前。1.2.2统计图表系统的发展现状统计图表不是现在才有的需求，在人类开始接触大量的数据时，图表的优势就变得越来越明显。现如今统计图表系统众多，对于不同的需求，开发人员寻求不同的解决方案，但是这样开发出来的系统都有些不足，而且开发周期耗时较长，图表样式受限。目前国内外设计统计图表系统的方法有如下几种：(1)基于JFreeChart的Web统计图表卩切。参考文献叨提出一种开源的基于Java的报表开发组件JFreeChart引擎，结合JSP,JavaBean实现基于Web的动态统计图表。⑵运用.NET中的MSChart控件【冋】完成统计图表的生成。通过在.NET中直接调用Mircsoft提供的MSChar图表组件，实现了数据结果集的统计图表处理，实现诸多类型统计图表的自由切换。(3)将SVG(ScalableVectorGraphics,可缩放矢量图形)技术运用于统计图表参考文献［12］利用从XML中派生的SVG技术來标记矢量图形，并运用于WEB统计图表的绘制。XML中XSLTE】技术能够把XML数据转换为SVG图形，并将统计数据的定义和表现形式结合起來。1.3研究目的和意义本课题的研究目的在于分析HTML5技术在统计图表系统中应用的可行性，充分结合Ajax技术优势，设计并开发一套可插可拔的通用型统计系统。传统的统计系统，基于・net控件或JavaScript控件的调用，其缺点是显而易见的：扩展性不强，效率低下，不够灵活，图形效果不太丰富。本课题的优势在于，其一，能高效实时地在客户端显示报表中的数据，减轻了服务器端的带宽和负载。其二，能实现显示结果的定时推送，即生成的报表可以按照用户指定的时间和方式推送至用户的邮箱，方便数据的保存和传送。其三，实现了一个通用的统计图表展示系统。可以通过简单的配置就能将统计系统与其他大型系统连接起来，并且支持多种数据库格式，方便数据库的集成。其四,HTML5技术能创造出新颖的视觉效果，从数据到界面图形的展现非常完整。另外，新的统计系统实时性与交互性更好，其多样化的图形呈现，直观的表达数据动态，为进一步的数据分析和数据挖掘提供了方便。1.4本人所做工作本文首先介绍了HTML5技术和CSS3技术，并且针对浏览器对其的兼容性进行分析，选择适当的浏览器作为显示工具；然后介绍项目中会用到的Ajax技术及jQuery、ExUS框架；最后根据系统的需求分析设计并开发了一套基于HTML5核心技术的即插即用统计图 表系统。在本课题中，本人所做的主要工作有：(1)阅读相关文献和资料；寻找HTML5的技术和应用领域，根据本人的兴趣和项目需求，探寻研究方向，确定论文题目及项目主要研究内容。并对比当下的统计软件的不足，提出自己的观点，并将其设计运用于系统中。(2)完成设计文档；根据统计系统必须的功能完成需求文档，总体设计文档，测试文档等。由于本课题需要完成一个通用型的统计图表工具，在设计上除了完成必备的功能和良好的用户体验外，通用型也是本课题的特点之一。因而在系统设计上，本人研究了ASP.NET的管道模型，通过httpHandlers转发机制实现通用性。并且在数据库的设计上釆用抽象工厂的设计方法兼容多种数据库，从而达到通用型的目的。(3)完成编码；根据之前的技术准备及文档准备，在VisualStudio2010平台上开发，前台页面使用HTML5,JavaScript,和CSS3语言，后台页面使用C#语言编写实现可插拔的统计图表系统。(4)完成测试；系统的测试分为两部分，一是针对不同的数据库系统对本课题的兼容性做了流程测试；二是对比传统的.net服务器端图表控件系统做了压力测试。压力测试更加证实了使用HTML5技术可大大减轻服务器端的带宽和负载。1.5本文的组织和结构本文各章节的组织结构及主要内容安排如下：第一章绪论，简要论述了本课题的选题背景和课题来源、研究意义和本人所做的工作,并对论文结构做了合理安排。第二章介绍了HTML的发展历史，新的特性和CSS的发展历史，HTML5的核心技术，同时也将现今主流的浏览器对HTML5和CSS3的兼容性进行分析。第三章介绍了HTML5的核心框XQuery、ExUS以及其他的核心技术，针对课题中用到的Ajax技术进行了详细介绍，最后总结了框架的使用情况。第四章主要完成基于HTML5的统计图表系统的需求分析、功能设计和通用型系统的方法分析与设计。并对统计图表系统进行测试，最后对测试结果进行分析。第五章是对全文的总结和展望。本章对本论文进行了全面总结，并归纳出课题研究的主要内容和本课题的创新点，同时也指出了基于HTML5的统计图表系统的不足之处，以及下一步有待完善的工作。第二章HTML5与CSS技术简介作为课题的核心技术，本章主要介绍HTML5和CSS3的发展历程，并针对现有的浏览器进行兼容性分析。本章重点将介绍课题中将用到的HTML5新特性。2.1HTML5发展历程 HTML在20世纪90年代得到了大幅发展〔叫1991年，TimBerners-Lee编写了一份称为“HTML标签”的文档，其中包括了大约20个用來标记网页的HTML标签。1994年,IETF（InternetEngineeringTaskForce,互联网工程任务组）推出第一个官方版本HTML2.0,该细则规定的＜img＞标签成功实现在文档中嵌入图片。其后，W3C取代IETF的角色，成为HTML的标准组织者。之后,HTML飞速发展，一年内推出HTML3.2和HTML4.0,直到1999年的HTML4.01,HTML到达了第一个拐点。在快速发布了这四个版本之后，业界普遍认为HTML已经到了穷途末路，对Web标准的焦点也开始转移到了XML和XHTML冋上，HTML5被放在了次要位置【叫在这期间，HTML与CSS相结合，HTML语言表现能力增强，为此HTML4.01版本一直沿用至今。随着Web2.0平台的更新，HTML和XHTML标准已无法有效地满足现代Web应用的需要，HTML迫切需要克服现有的缺点，添加新的功能，制定新的标准规范。直到2006年，W3C又重新介入HTML,并于2009年发布了HTML5的工作草案。2009年是HTML5技术的里程碑。在这一年，XHTML2工作组停止工作。也在同一年，各大浏览器厂家对旗下产品进行升级以支持HTML5的新功能。也正是因为浏览器的实验性反馈，HTML5规范得以持续的完善。HTML5以这种方式迅速融入到了对Web平台的实质性改进中。HTML5并不是一个从零开始全新得东西，它是旧的HTML标准的改进。今天，我们看到的HTML5规范已经以工作草案的形式发布，但这还不是最终版本，正式版本有望在2012年发布。图2.1展示了HTML技术诞生到如今20年的发展历程。19911994〔HTML2图2.1HTML5的发展历程2.1HTML5技术简介HTML(HyperTextMarkupLanguage＞超文本标记语言)是Web核心语言“习，在浏览器中看到的网页效果都是以HTML格式规化的。HTML5是HTML的下一代规范标准，也是下一代Web标准。现今，我们提到的HTML5技术包含了HTML,CSS和JavaScript等内容为此，HTML5的宗旨非常明确：用更统一、更简洁、更高效的HTML代码实现丰富多彩的Web应用功能，而这些功能不依赖任何的外部插件【⑺。为了实现这一目的，HTML5提供了很多API,并且增加新的元素和属性，使浏览器原生地支持相关的标签。例如，在HTML5 技术岀现之前，大部分Web视频和音频都是通过浏览器插件如AdobeFlash來实现，这要求客户在观看视频之前安装相应的组件，而HTML5增加了＜video＞和＜3崗0＞标记，只要浏览器支持相应的标签，就可以像使用＜img＞一样方便地在页面内嵌入音频和视频。而不再依赖于特定的第三方技术就能简单地把视频和音频内容和网页中的其他内容进行整合。HTML5还实现了文件的离线存储，硬件与软件的实时交互，动态生成图像等功能。不仅如此，HTML5使页面布局变得更加清楚易懂。之前使用的vdiv＞标签也不再使用，而是使用HTML5中新加的语义化结构标签。HTML5并非仅仅用来表示Web内容,其新使命是将Web带入一个成熟的应用平台〔同,在HTML5平台上，视频、音频、图像、动画以及同电脑的交互都被标准化。毫无疑问，在未來的RIA(RichInternetApplications,富互联网应用)中，HTML5将引发一场新的技术变革，它不仅仅是HTML4.01的升级版本，更是指引未來Web技术规范统一发展的新方向。2.1HTML5的新特性本课题中将用到HTML5的相关技术包括本地数据存储，Canvas图形绘制，Audio音频的输入及表单元素。本节将对这些特性进行详细描述。(1)本地数据存储本地数据存储，顾名思义，就是在Web±存储数据的功能，无论是离线还是断网的情况下都能正常地访问网站数据。在过去，Web程序利用HTML4中的Cookie进行浏览器端的本地存储。然而IE疑多允许300个Cookie,最多存储4096字节的内容。这样小的存储空间不能满足真正实用的Web应用，HTML5实现了这种需求。HTML5的本地存储是使用LocalStorage对象将Web数拯持久的保存在客户端建立的一个数据库上，并与之进行交互。本地存储大大减轻了服务器端的负担，同时也加快了访问数据的速度。由于图表数据査询的重复性,本课题将用到WebStorageAPI进行数据的本地存储，更加高效地显示图表信息。(2)Canvas图形绘制过去，网页中显示的图像來自于直接下载的GIF或JPG图像，而在HTML5中，图像可能并不是直接来自图像文件，而是由某个Canvas对象直接生成。Canvas元素是HTML5中新增的一个重要元素，专门用于绘制图形。放達一个Canvas元素，就是在页面内划分一块无色透明区域，在JavaScript层针对动态数据进行计算后绘制出各种复杂的图形.使用CanvasAPI,可以在页面上动态生成和展示图形、图表、图像及动画，创造出更加丰富多彩、赏心悦目的下一代Web页面。Canvas元素是统计系统中最重要的工具之一。我们使用其对数据图表进行绘制和扩展，包括图形的生成，图表的动态扩展等。(3)Audio音频的输入在HTML5中，提供了音频视频的标准接口，通过这些接口技术，视频、动画、音频等多媒体播放再也不需要FLASH插件，只需要一个支持HTML5的浏览器，就可以像使用图片一样方便地在页面中内嵌音频。同时开发时再也不需要书写复杂的object元素和embed元素。(4)表单元素 HTML表单包含很多控件类型，是页面上非常重要的组成部分。通过表单元素，用户可以进行输入文本或者点击按钮来完成与后台数据的交互。本课题中将用到很多Form表单元素，如Email表单内元素内容的有效验证，拖放API使页面中的元素相互拖放等。2.1CSS发展历程从1990年代HTML被发明开始，样式表就以各种形式岀现，不同的浏览器有各自的样式语言。但是由于HTML的飞速发展，为了满足开发者的需要，HTML获得了很多显示功能。随着这些功能的增加，外来定义样式的语言越来越没有意义了。直到1994年哈坤•利提出了CSS(CascadingStyleSheets,层叠样式表)的垠初建议，并和伯特•波斯一起开始着手设计CSS[19J01996年12月，CSS1正式推出。在该版本中，包含了font>color、background等的相关属性。1998年5月，CSS2正式推出，该版本已经开始使用样式表结构〔期。2004年2月，在CSS2的基础上推出CSS2.1,该版本删除了许多浏览器不支持的属性。现在所使用的CSS基本上是在1998年推出的CSS2的基础上发展而来的。直到2010年推出了全新的版本CSS3o2.2CSS3技术简介CSS语言是一种不需要编译的标记性语言0】，可以直接由浏览器解释执行㈡】。它是一个包含了CSS标记的文本文件，在标准网页设计中CSS负责网页内容的表现。有了CSS文件，开发人员可以通过简单的更改css文件，改变网页的整体表现形式。除了HTML5,CSS3也将为Web开发带來革命性的彫响，很多以前需要JavaScript和Ajax框架才能实现的复杂效果，如多背景，圆角，3D动画等等，现在使用CSS3就能简单地实现，极大地提高了程序开发效率[却。另外，由于Web技术的进步，HTML5中废除的一些元素将统一由添加CSS3样式表的方式进行代替。例如basefont>big、center>font等元素，由于他们的功能都是纯粹为展示画面效果，所以HTML5中将这些画面展示的功能标签放在CSS3样式表中。为此，对于界面设计者来说，运用CSS3中新增的属性解决CSS2中无法实现的效果，无疑是一件非常可喜的事情。2.6浏览器对HTML5和CSS3的兼容性分析HTML5技术虽然得到广大权威人士的肯定，HTML5时代已经來临，但并不是代表用HTML4创建的网站必须全部重建，只会要求各Web浏览器今后能正常运行HTML5开发出來的功能。但是作为新版本的HTML5和CSS3在各种Web浏览器中的兼容程度一直让Web开发人员质疑。尽管各大浏览器厂商已经着手支持HTML5和CSS3中很多优秀的新功能，不过由于各个厂商的步伐不一，导致HTML5和CSS3在各浏览器中的实现程度参差不齐。为此，本人将综合两种HTML5兼容性测试工具HTML5Test和Modemizr的测试结果来分析在Windows平台上主流浏览器的兼容程度。在主流浏览器的选择上，根据国外权威网站分析公司StatCounter发布的2011年11・12 月份全球浏览器市场占有率统计分布情况【2忙主流产品见图2.2所示。StatCounterGlobalStatsTo*5BrowsersIron・*NovtoftDc<2011图2.2主流浏览器分布图从图2.2可以看岀，微软的InternetExplorer仍在全球市场中占据头名地位，Google的Chrome和开源浏览器Firefox紧随其后，苹果公司的Safari和挪威欧普拉软件公司的Opera浏览器次之。图2.3浏览器主流版本分布图仔细分析每个浏览器的版本如图2.3,我们可以清晰地选择要测试的浏览器版本:IE8.0、IE9.0、Firefbx4.0、Chromel1.OnSafari5.OxOpera11针对本文要完成的需求功能，将测试以下几种功能：(1)HTML5音频播放标记audioaudio潜在地支持多种音频格式，包括OggvorbisxMp3^AAC>Wav等。下面的代码播放了一段音频，带有控制按钮：抱歉，您的浏览器不支持canvas标签，请尝试使用其他浏览器。(2)HTML5绘图标记canvas HTML5中引入的canvas元素可以支持开发人员绘制线条、图形、添加文字和图像。下面的代码在页面上简单绘制了一个蓝色矩形。抱歉，您的浏览器不支持canvas标签，请尝试使用其他浏览器。varc=document.getElemcntById(Mtext");varcxt=c.getContext("2d"^);cxt.fillStyle=*"#0000ff";cxt.fillRect(0,0,200,100);(1)CSS3属性CSS3的属性有很多，例如:RGBA、HLSA、BackgroundSize等。(2)CSS3选择器CSS3选择器有很多标签，如：Begin/Endwith、MatchesxRoot等。表2.4浏览器兼容表持持持持持持支支支支支支IE&OIE9.0Firefox4.0Chrome11.0Safari5.0Opcrall」Audio不支持Canvas不支持表单支持离线存储不支持CSS3属性不支持CSS3选择器不支持其测试结果如表2.4所示。如此看來，对HTML5支持最好的是Chrome,Firefox、Safari和Opera次之，IE支持最差。鉴于这种情况，在论文的实际项目中将采用Chrome浏览器作为显示工具。2.7本章小结本课题运用了HTML5和CSS3为核心技术來显示统计图表。本章针对这两种技术从定义和发展历史两方面进行详细介绍，并详细分析了浏览器对HTML5和CSS3的兼容性，用于指导系统开发平台的搭建。第三章应用框架及相关技术介绍除了HTML5技术，开发框架在课题的开发中也很重要。本章节主要介绍基于HTML5开发的两个应用框架：JavaScript代码开发的jQuery框架和基于Web的富客户端框架ExUS,同时对系统中用到的Ajax技术进行了介绍。 3.1Ajax技术3.1.1Ajax概念Ajax（AsynchronousJavaScriptAndXML,异步JavaScript及XML）是指一种交互式网页开发技术〔2役运用此技术可以将笨拙的Web界面转化成交互性的Ajax应用程序，从而提高系统性能，优化用户界面。事实上，Ajax不是指一种单一的技术"I,而是有机地融合了HTML、JavaScript、DHTML和DOM一系列相关的技术无疑，在B/S模式下的Web页面，运用Ajax技术已经成为一种主流。Ajax主要有JavaScript、XmlHttpRequest>XML三部分组成（绚。其中JavaScript用于页面数据传递、刷新局部页面；XmlHttpRequest用于向服务器提交请求，与服务器响应；XML是服务器返回数据的格式。JavaScript对象XmlHttpRequest是Ajax技术的核心。该对彖是一种支持异步HTTP请求的技术，通过JavaScript向服务器提出请求并处理响应，而不重载页面只是部分刷新页面信息。这种独立于Web服务器软件的前端技术会使浏览器应用程序更轻便，更快捷，更友好。3.1.2Ajax技术原理传统的Web应用，用户运行程序的模式是同步HTTP请求：请求一显示一互动〜暂停f请求一显示一互动一暂停…，以此往复。整个过程需要不断地刷新整个页面，页面展示不连续。而引入Ajax技术，用户运行程序的模式是异步HTTP请求：请求一显示一互动一（请求）互动一（请求）互动…异步的请求不需要暂停操作，只需向服务器请求一小部分数据，更新页面的一小部分。传统的Web应用如图3.1,Ajax技术原理如图3.2。Ajax相当于在用户和服务器之间加了一个中间层卩％使用户操作与服务器响应异步化。在本课题中页面的传值将使用Ajax技术。例如用户设置显示图表的时候，会利用Ajax的异步通信原理，部分刷新页面，其代码如下。S.ajax（｛type:“POST”，url:7Statistatics/Service.asmx/StatH,contentType:Happlication^son11, dataType:"jsoiT,cache:false,async:true,data:vSearchData,timeout:10000,success:function(msg){varhtm=tf;if(msg.d=T”){htm=",;}elseif(msg.d="5"){htm="viframesrc="HStat.aspx?N=2Mstyle=Hwidth:100%;height:700px"frameborder=",0",>,;}用户界面客户端HttpRequestXMLrWEB和XML服务器服务器端数据处理图3.1传统的Web应用t—WEB和XML服务器4r数据处理图3.2Ajax技术原理HTML请求HTML+CSS+数据3.1jQuery框架如今的万维网是一个动态的环境，Web开发者为了构建有吸引力的交互式网站，借助jQuery的JavaScript库实现了常见任务的自动化和复杂任务的简单化。本节将对jQuery进行详细介绍。 3・2・1jQuery概念jQuery是一款开源的JavaScript代码库，也是一款轻量级的Ajax开发框架卩叭其压缩大小只有21k,非常轻巧。jQuery的宗旨是“写更少的代码，做更多的事情”卩人在项目中，开发人员只需要调用jQuery类库就能方便地处理文档、处理事件、实现动画效果，并且方便地为网站提供Ajax交互。现如今jQuery已发展成熟卩叫使用文档说明很全，而且各种应用也表示得很详细。jQuery提供很多成熟的控件的同时开发人员也可以根据自身需求对jQuery进行扩展。而且jQuery能够使代码和html内容分离，便于代码的维护和修改。本课题将运用jQuery类库实现客户端脚本编程。3.2.2jQuery发展历史jQuery技术是在近几年迅速发展起來的卩儿从jQuery1.0至0jQuery1.7.2只经历了短短的7年时间。2005年JavaScript神童JohnResig最先提议改进Prototype的Behavour库，随后2006年jQuery1.0问世,第一个版本己经对CSS选择符＞event和Ajax交互提供支持。接着jQuery1.1合并较少使用的方法，很大幅度简化了API。2007年9月jQuery1.2去掉对XPath选择符的支持，新增命名空间，更加简洁插件的开发。同年，新的插件jQueryUI面世，替代传统的Interface插件，并且其中包含大量已经定义好的部件和元素。2009年jQuery新版本1.3和1.3.1陆续问世，这次的升级使用了全新的Sizzle选择符，改进了jQuery的性能。2010年发布新版本jQuery1.4,该版本将热门的和常用的方法进行改写，降低源代码的复杂度。接着发布的141和142,是对之前版本性能上的改进和功能API的补充。jQuery1.5的推出，最出彩的地方是完全重写Ajax,使其扩展性变强。2011年jQuery1.6发布，重写了Attribute模块和改进性能。跟往年一样，其后发布的1.6.2和163修复了很多Bugo同年，jQueryl.7面世，该版本带來一些新的特性，如：增加on。和offOAPL同时也改进了IE下的表单处理和动画效果。现如今，jQuery已经更新到1.7.2。可以这样认为，jQuery的发展是朝着更全面，最简便的方向前行，努力为工程师带来代码上的便利和结构上的清晰。3.2.3jQuery作用及优势jQuery库提供了通用的抽象层，使得它几乎适用于任何Web脚本编程【列。不仅如此,jQuery的作用和优势主要有如下几点：(1)准确选取页面中的元素ojQuery能遍历DOM(DocumentObjectModel,文档对象模型)树，准确地获取需要检査或操纵的文档元素，提供可靠而有效的选择符机制。(2)轻松改变页面内容。只需一个简单易用的API,jQuery就可以改变文本、插入或翻转图像、对列表重新排序，而且对HTML文档的整个结构都能重写和扩充。(3)响应页面事件。jQuery不需要使用事件处理程序搞乱HTML代码，而是对页面事 件进行拦截，比如用户单击一个链接，jQuery会拦截当前的url,并进行转发。(1)无刷新页面机制。jQuery无需刷新页面就能实现从服务器获取信息。不过该功能需要AJAX的辅助。(2)修改页面的外观。jQuery继承了CSS简明清晰地表达文档结构的方式。并弥补了CSS跨浏览器不兼容的缺陷。(3)其他的新方法ojQuery作为一种新的类库，提出了很多自己的方法，如集合对象,隐式迭代，方法连缀等。jQuery总是面向集合对象，然后利用它的隐式迭代技术，不需要循坏遍历每个返回的元素，而是自动调用类方法操作对象集合。同时，为了保持jQuery类库的小型化，采用连缀的编程模式。该方法将一个对象进行多次的操作，并且每次操作结果会返回到对彖本身，以便下一次的操作。jQuery的优势很多，如轻便，简洁，都是其他产品不能及的，而且其代码都是开源的。开发人员可以在其官网免费获得量新产品。3.1ExtJS框架ExUS是一种主要用于创建前端用户界面的Ajax框架，完全基于W3C标准运用HTML、CSS、DIV等相关技术构建的。本节将详细介绍ExUS技术。33.1ExtJS概念ExUS是一个基于Web的富客户端框架，用javascript编写卩讥主要用于创建前端用户界面，使B/S应用更加具有活力。ExUS兼容性很强，可以用在.Net、Java>php等各种开发语言开发的应用程序中。ExUS运用简单而且广范，既可以应用到CSS样式上实现各种丰富多彩的UI的开发，也可以应用到数据解析进行异常的处理。3.3.2ExtJS发展历史ExtJs最开始基于YUI技术，由开发人员JackSlocum在2006年初开发，它通过参考JavaSwing等机制来组织可视化组件【殉。同年年底，这个库备受欢迎，改名为Ext。在2007年4月1日，1.0正式版发布。过了两年Ext的3.0版本发布。直到2010年，ExUS已发展涵盖美国、日本、中国等全球范围用户，如今的版本已经升级为EXUS3.2.0。也是在2010年，ExUS为了应对新的HTML5技术㈤，与触摸屏代码库项目jQTouch和SVG处理库Raphael合并，后两个项目的创始人DavidKaneda和DmitryBaranovskiy也将加入ExtJSo新的ExUS加强丰富图形效果和增加触摸屏功能。2011年4月22日，Extjs4.0正式发布，主要有以下改进卩罠沙盒模式：在ExUS历史上，ExjJS4首次提供了完整的沙盒模式。沙盒模式的意义在于当该框架与其它的框架同时加载到页面时，不会产生冲突。MVC应用架构：ExUS4.0引入了一个标准化的，几乎适合任何ExUS应用程序的MVC 风格的应用架构。使用MVC架构，开发人员只需要学习一种架构就能理解任何ExUS4.0的应用。全新的图表库：EXUS4.0中包含全新的、插件自由的图表库，可以轻松创建饼图、线图、面积图、雷达图等等，并且所有这些都是动画的、易于配置的和可扩展的。增压的数据包：EXUS4.0—个基础性的作品就是数据包。不管用户将数据加载到Grid、Tree或其它组件，改进的数据包都比以往更容易操作。而且新架构还支持HTML5的LocalStorage技术，方便数据流在用户的应用中进出。3.4框架的使用jQuery框架在使用上只需要在所需页面中引入jQuery的js文件即可。引入之后便可在页面的任意地方使ffljQuery提供的语法"Query框架运用于程序中的各个页面，主要负责Ajax的请求。引入文件代码如下。上述代码中，使用了Ext的框架，该框架支持HTML5技术，能够很好的展现统计图表。3.5本章小结本章前半部分详细描述了Ajax技术，为后面系统的详细设计做好技术铺垫。本章后半部分介绍了系统中运用的框架，主要是用于前端开发的jQuery框架和ExUS框架。 U!基于HTML5的统计图表系统的设计与实现基于上述所有的准备工作后，本章将集中的介绍本人所做的工作。包括系统的需求分析，总体设计及详细设计和设计方法等。同时，对系统设计时遇到的难题和障碍进行重点分析和说明，并给出了解决方案。4.1统计图表系统的整体设计方案4.1.1统计图表系统的需求分析为了满足不同的客户需求，市面上的统计图表种类繁多，大致可以分为两类:一种是静态格式。这种统计图表多基于C/S模式，特点是格式固定而且数据来源预先定义，发布后无法继续改动图表格式。一种是动态格式。这种图表多基于B/S模式，特点是界面图形交互性很好，数据绑定很灵活，可扩展性很强。本课题属于开发研究性课题，來源于3年的项目实践和对前端技术的研究。结合当下最热门的HTML5技术，实现一个通用的统计图表系统。该统计图表系统需要达到的目标有：(1)完成图形的准确绘制。根据数据库中的数据准确的绘制各种图表，包括柱状图，饼状图，折线图、雷达图等基本图形。(2)良好的数据查询方式。针对查询功能的特点，必须满足模糊查询，条件查询，语音査询等。査询时，需要考虑图表绘制的速度。(3)可定时推送。此系统中必须能将所显示的图形进行订阅推送，如可将此刻或者一个星期的数据图表以图片的方式发送到客户邮箱中。(4)可复用性强。期望完成可复用性强的系统。系统的数据库应该满足多种数据格式。如SQLSever,XML等。系统的兼容性强，可以作为第三方系统进行调用。(5)用户交互性好。用户能巧妙的运用任何图形样式，并能进行图表对比显示，使得数据分析更直观。能够通过拖拽來放大和缩小统计图。(6)界面美观。图表的展示风格力求美观大方，如动画，图形，布局，调色板，边界，标记和多轴等。(7)安装方便。此系统作为第三方系统，可进行高效方便的可拆可用，并且维护效率高,减小系统故障时的解决时间。同时安装方便也代表易操作，人性化界面等。4.1.2统计图表系统的功能根据上述的需求分析，统计图表系统主要实现对数据的统计图表显示、査询及管理工作。由于系统可复用性强，将会使用两种数据库进行绑定测试。用户可以根据自己的数据库进行对统计图表的第三方绑定，并能进行査询这些数据的功能。根据系统的主要功能将系统分为5个功能模块进行设计与实现，并将系统封装成一个接口模型，可供用户轻松调用。具体模块如下： (1)系统的动态菜单：主要根据用户的具体权限，显示用户不同的功能菜单项。普通用户只有査询和图表查看以及推送设置页面，管理员普通用户的权限之外还有配置数据库，设置显示图表等管理权限。(2)数据査询模块:主要包括各种数据量的数据査询，并提供不同条件的数据査询功能。此查询功能支持语音査询，只要能给出正确的指令，就能进行语音输入。(3)数据管理功能：这是管理员的权限，除了数据査询相关功能，还可以配置数据源，设置显示图表格式等。(4)图表查询功能：可以根据用户的查询条件査询数据的各类图形，如曲线图、柱形图、饼状图等。另外査询支持语音查询，用户在有麦克风的情况下可以给岀语音指令，进行图表的査询工作。(5)图表推送设置功能：根拯用户的喜好，可以将要推送的地址，如Email邮箱进行设置，同时也可以对推送时间进行设置。4.1.3系统各功能模块之间的关系本课题的系统设计中，上述的5个功能模块在VS平台下可以分为不同的组件。主要有表现层组件(UI)、数据访问层组件(BLL)、业务逻辑层组件(DAL)o此三层架构的方式使系统主要的功能都在业务逻辑层进行处理。而所有的展示页面都放在表现层中进行集中管理。数据访问层是原始数据的操作层，为业务逻辑层或表示层提供数据服务，如LINQ,数拯集等。这样客户端不直接与数据库进行交互，而是通过COM/DCOM通讯与中间层建立连接，再经由中间层与数据库进行交互。图4」是各组件的关系，双向箭头表示调用关系。图4.1各组件关系图系统架构决定整个系统的结构，本系统采用三层架构进行设计。图4.2是系统开发目录结构图。其中Qman.webhtml5中的statistics文件夹里面放置所有的.aspx页面。即前台所有的展示页面都放在该文件夹中，相当于用户界面的表示层。主要向用户展示图表和显示数据，以及接收査询订阅等交互式请求操作。其中用于前台开发框架jQuery类库和Extjs框架都放在Script文件夹中，便于前台调用。而样式表如.css文件放在statistics文件夹下的CSS文件夹中，使得表示层中的样式与行为独立，方便代码的修改。Qman.library中的statistics文件夹存放.cs文件。将所有的功能处理和后台的业务逻辑都放在此文件夹中，相当于三层架构中的业务逻辑层。此层主要是对前台显示功能进行控制，对数据层的操作进行组合，是数据与前台进行交互的核心模块。如系统中用到的査询,配置等操作。 另外，由于此系统是一个可复用性的通用统计图表系统，数据库的设计必须满足各种数据库类。在此，归类了XML数据库和SQLSever数据库。分别将不同的数据库设置成不同的数据操作，即不同的数据访问层。C31K^X*Qman.WebHtml5<（4个项目）▲0Qman.Ubrary>卫Properties引用CommonHttpStatistaticsProviderBase.es▲0Qman.SqlDataProvider>少Properties>»引用>二JStatistatics▲3Qman.WebHtml50NProperties>Mi引用一jApp_Data>二IScripts>二jStatistatics|>Web.config▲耳Qman.XmlDataProvider>加Properties>Mi引用图4・2系统开发目录结构图4.1.4系统开发环境针对本课题的需求及技术上的总体要求进行综合分析，将使用Net开发平台，以C#为后台程序语言，前台以HTML5为主要开发语言，同时引入JavaScript和CSS做页面展现支持。另外，还采用Ajax技术实现数据的交互和页面的无刷新。系统的开发环境分为软件和硬件两块。软件部分需要在Windows7上装载VisualStudio2010和MicrosoftSQLServer2005,为了很好地支持HTML5,浏览器采用Chromll.O以上版本。硬件方面为标准配置的PC机一台。4.2系统架构的总体设计4.2.1通用型模块的设计为了设计一个通用型且复用性奇的统计图表系统，本人深入分析了ASP.NET的管道模型，釆用了一种可插拔的解决方案。在此系统中，我们命名了Qman.stat的资源文件，它提供一个用于图表集中展示和定期通知的机制。其特点就是无需重新编译，通过配置web.config实现整个应用程序甚至是IIS中所有ASP.NET应用程序的统计图表展现工作。它支持多种数拯库的展现，如mssql、mysql、静态xml。除了提供一个界面用于统计分析外，还可以通过E・N4AIL、RSS订阅等 发布方式通知统计信息给相关人员。并且该工具可插可拔，装载、调用和卸载都很方便。通用型统计图表系统的原理在于，当一个大的系统调用统计图表工具时会发送一个.aspx文件的请求，该请求最先到达IIS,之后被inetinfo.exe进程截获，它判断文件的后缀名为.aspx之后，将该请求转交给ASPNETJSAPI.dll,ASPNET_ISAPI.dll会通过http管道将请求发送给ASPNET_WP.exe进程，在ASPNET_WP.exe进程中通过HttpRuntime来处理这个请求，处理完毕后将结果返回客户端。在该HTTP管道里，有多个HTTPmodules,每个请求都要依次通过这些HTTPmodules,这就使得各个HTTPmodules可以根据自己需要处理这些请求，当经过所有的HTTPmodules后,将由一个并且只能是一个HTTPhandler來处理这一请求，当然我们可以在web.config中配置由哪个HTTPhandler來处理，它是根据被请求资源的路径名称或者后缀名來决定，比如可以指定如果请求Qman.stat这个资源文件，则由名称为stat.aspx的HTTPhandler来处理。管道模型示意图如图4.3。图4.3管道模型正是因为我们可以在每个HttpModule中都可以干预请求的处理过程，所以当外部系统发來一个HTTP请求时，可以用“httpHandlers”实现url的拦截和转发，在其他系统上快速实现迁移。统计图表系统在其他.net网站上的部署操作十分简单，只需要4步即可完成。部署步骤如下：(1)web.config中添加httpHandlerso也就是说在目标系统的web.config中添加一条httpHandlers记录o(2)覆盖dll；将统计图表系统中的dll放入目标系统的bin目录中。(3)在目标网站的根目录中添加两个文件夹Statistatics和Script,并复制统计图表系统中的文件。(4)打开网站后登陆配置页面进行后续的数据源、显示图表类型等配置工作。4.2.2配置模块的设计 在上述添加的web.config中，我们引入了一个自己写的handlerfactorieyo当外部有HTTP请求时，HttpModule会干预请求将页面转发给写好的IHttpHandlerFactory类。这样就进入我们系统的配置页面。为了进一步提高系统的适应性和可扩展性，我们没有将系统其他配置信息存放在Web.Config或者数据库中，而是将这些信息存在了网站的Statistatics目录的stat.config和email.config中。这样做的好处是配置信息可以随着网站快速迁移，避免了新网站的配置变量冲突，有效地回避了有些中大型项目配置项过多，导致web.config文件的体积过大的问题。图4.4为配置类的架构图。图4.4配置类的架构图|0Qman.Ubraryb也Propertiest>引用▲匕Common|也DefaultConfigFileManager.cs也EmailConfigAleManager.es皙EmailConfigInfo.cs也EmailConfigs.cs筍IConfigInfo.cs也SerializationHelper.es啪StatConfigFileManager.cs筍StatConfigInfo.cs筍StatConfigs.es图4.5配置类文档结构图图4.5是配置类文档结构图。首先，我们定义了两个基础类：配蘆实体类IConfiglnfb和加载配置文件方法类DefaultConfigFileManager,然后通过.net的序列化方法XmlSerializer实现了配置类与配置文件的快速转换。然后，根据我们需求分析，设计出了我们系统所需要的邮件发送类EmaiConfiglnfo和全局参数StatConfiglnfo,然后继承于基础类实现了快速填充。在此基础上，如果需要再扩展出更多的配置文件也会比较容易。其实现代码如下。[Serializable]//email配置，加[Serializable]标记为可序列化publicclassEmailConfiglnfb:IConfiglnfb{//属性publicstringSmtp{get;set;}//smlp服务器地址publicstringPort{get;set;}〃邮件服务器地址publicstringSysemail{get;set;}//发信人publicstringUsemame{get;set; }〃账号publicstringPassword{get;set;}〃密码}[Serializable]publicclassStatConfiglnfb:IConfiglnfb{//region属性publicstringStatTitle{get;set;}〃标题publicstringDbType{get;set;}〃数据库类型publicstringDbCon{get;set;}〃数据库连接串publicstringStatCount{get;set;}〃统计图表个数publicstringStatTypel{get;set;}//图表1的类型publicstringStatSource1{get;set;}//图表1的数据源publicstringStatSqll{get;set;}//K表1的存储过程或sql语句•••publicstringStatType4{get;set;}//图表4的类型publicstringStatSource4{get;set;}〃图表4的数据源publicstringStatSql4{get;set;}〃图表4的存储过程或sql语句publicstringStrl{get;set;}〃预留字段1publicstringStr2{get;set;}//预留字段2publicstringStr3{get;set;}〃预留字段3publicstringStr4{get;set;}〃预留字段4#endregionpublicstringStatcopyright{get{return"©2010-"+DateTime.Now.Year.ToStringO+””；}}}可以这样说，配置类也是为了实现系统的通用型。在程序结构中我们在Statistatics文件夹中新添了default.aspx进行配置页面的设计，也就是管理员的设置页面。该页面主要是为了设置数据源以及订阅转发的Email地址。图4.6是系统配置页面。图4.7是邮箱配置页面。系如88欢凹侵用Qmm伕计B3真斥袋JXml▼Da：aSource=sql2005:Dat3base-个魏（至少】仃:□・Elisas：Q柱状SE««ttS3OST达S3段廉平拄状EBsoiag■select•2010.2011#2012<2013,201^*asAfcsci^sa■*150,200^70,50,200**Ordinate••农汉团公司•os(GroupNasu*],1MCo2B3HfitW・2B，[ReporrN&s^j▼俺交1图4.6系统配置页面 弘5麼劳吉名称：smtp.126com淄口：25发值入：账号：2U图4.7邮箱配置页面4.2.3数据源多样性的设计由于系统的架构是通用型的，系统数据源的接入必须支持所有的主流数据库。为了实现统计图表系统能够访问不同的数据库，本人采用抽象工厂模式将可能出现的数据库类型进行封装。抽彖工厂模式的定义是提供一系列有组合关系对象的接口，而无需指定具体类。我们这里可以提供的方案是这样的，通过工厂初始化时从配置文件中读取配置项，构造一个字典，然后从这个字典中査询要创建的类型是否在字典中，如果在字典中存在则创建这个类型的对象，否则返回NULL,我们这里通过泛型来实现。数据源多样性的架构如下图4.8所示。图4.8抽象工厂类图首先，我们定义了一个抽象工厂StatRpovider并且抽彖的定义了2个方法去获取统计图表。publicabstractListListGroupbySql(stringsql);publicabstractListListGroupbyStore(stringstore);其次，我们实现了一个静态方法CreateProvider，通过反射的方式，让工厂类StatRpovider动态的从配置文件中获取实现方法。 privatestaticvoidCreateProvider(){try{objProvider=(StatProvider)Activator.CreateInstance(Type.GetType(string.Format("Qman.{0}DataProvider.Statistatics.{0}StatDateProvider,Qman.{0}DataProvider",StatConfigs.GetConfig().DbType),false,true));}catchthrownewException("请检查Stat.config中Dbtype节点数据库类型是否正确，例如：SqlSserver、Xml”)；}}最后，我们继承StatRpovider类，实现了两种数据库的访问类Qman.SqlDataProvider和Qman.XmlDataProvideropublicclassSqlStatDateProvider:StatProvider{#regionPrivateMemberspublicstringConnectionstring{get{returnStatConfigs.GelConfigO.DbCon;}}publicDataTableToDataTable(SqlDataReaderdr){DataTabledt=newDataTable("Datafable");intfieldCount=dr.FieldCount;//Accesstothecurrentlinenumberofrowsfor(intcount=0;countdatatabletolist(DataTablcdt){Listrelist=newList();if(dt!=null&&dt.Rows.Count>0){fbreach(DataRowrowindt.Rows) {ReportEntityre=newReportEntity();re.Abscissa=row[HAbscissaH].ToString();re.Ordinate=row[nOrdinateM].ToString();re.GroupName=row「GroupNamen].ToStringO；re.ReportName=row[MReporiXaineM].ToString();relist.Add(re);}returnrelist;publicoverrideListListGroupbySql(stringsql)SqlConnectionconn=newSqlConneciion(ConnectionString);SqlCommandcommand=newSqlCommand(sql,conn);command.CommandType=ComniandType.Text;conn.OpenO；try{using(SqlDataReadersdr=command王xeculeReader())DataTabledt=ToDataTablc(sdr);sdr.Close();conn.CloseO；returndatatabletolist(dt);catch(Exceptione)conn.Close();returnnull;publicoverrideListListGroupbyStore(stringStore)returnCBO.FillCollection(SqlHelper.ExecuteReader(ConnectionString,CommandTxpe.SloredProcedure,Store));本系统釆用这种方法，充分利用分层系统的特点，使得系统的表现层无需考虑系统数 据访问层是通过什么库实现。逻辑层不再是以往的直接访问某种具体的数据库，而是访问数据层的接口，充分降低了系统与数据库之间的耦合。可以在不改变逻辑层、表现层的代码基础上实现数据库之间的迁移。如果需要加入Oracle的支持，只需要继承StatProvidei•实现OracleDataProvider,重写二个方法即可。釆用抽象工厂模式对数据库接口进行抽象化，当系统面对不同的数据库时，只依赖抽象数据库工厂。而它的具体工厂的初始化只需要改变配置页面中的数据源就能轻松的实现。不仅如此，抽彖工厂的设计模式会使得系统的扩展性更强，移植性更好，在开发过程中可大大提高开发效率。4.3统计图表系统主要模块的详细设计4.3」语音查询模块的设计与实现传统的查询方式无非是模糊査询和条件査询，这些都是靠搜索框中的关键字进行数据库的匹配。而在HTML5中新增的API,可以实现语音输入搜索。在程序中的前台需要代码如下：该代码中lang强制输入框中的语言种类，上面为中文。x-webkit-grammar精确控制输入的语法，使输入的内容接近搜索的内容。当输入的内容是无效时，HTML5会很快的返回给用户界面。只有输入是相关查询时，才能搜索到正确的信息。在演示中，该功能十分强大，只要发音清晰，那么语音转文本的准确率非常高，而且还能切换不同语种。唯一可惜的是只有webkit核心的浏览器才能使用。所以在运用的时候,我们在后台进行一个判断。if(document.createElement(,,input,").webkitSpeech=undefined){alert(”很遗憾，你的浏览器不支持语音识别，请使用传统的输入方式。”)；}else{alert(”尝试使用语言识别来输入内容”)；}；语音输入到搜索框后，需要对输入的内容进行匹配查询。4.3.2图表绘制模块的设计与实现图表的绘制是本课题中非常重要的部分。在HTML5中，利用CanvasI具可以在页面中直接进行各种复杂图形的绘制卩刃。使用该元素后，绘制统计图表的工作可以直接在客户端进行，而不是像传统的图形控件那样在服务器端完成。这不仅意味着不再占用服务器端 资源，而且可以直接利用客户端计算机的强大资源，大大提高了绘制统计图形的速度。这样，服务器端只负责发送数据，不再负责统计图的生成和发送。大幅度减少带宽的占用〔创。系统将显示4类图表，分别是柱状图，饼状图，折线图、雷达图。在系统的图表绘制中，我们将采用基于HTML5canvas标签的HTML5canvas图形库RGraph⑷】进行编程。RGraph用起來非常方便，具体可以分为以下几个步骤：(1)在页面中引入RGraph所使用的脚本文件，其中RGraph.common.core.js脚本文件时必须引入的，代码如下所示。(2)根据页面中需要绘制的统计图表的类型与功能引入对应的脚本文件，例如：绘制柱状图时需要引入RGraph.bar.js脚本文件，代码如下。(3)添加canvas元素，用來绘制和显示统计图表，代码如下图。您的浏览器不支持canvas元素，请更换浏览器接下來的步骤可根据要设计的图表来进行不同的配置。(1)绘制柱状图下面的代码设置了柱状图的横坐标的长度和间隔等属性，Ajax调用这个函数，就能画出柱状图。success:function(msg){vardata=newArray();for(vari=0;i图表推送至邮箱E-wail：提交请输入电子邮件地址。图4.15电子邮箱的检测4.4统计图表系统的测试现阶段统计图表系统只在电脑上运行，测试平台只考虑在PC机上进行，其他平台上的测试开发不在此讨论范围之内。另外，测试方法分为两种，一种是流程测试，主要是测试个功能的流畅性。另一种是压力测试，主要测试是利用HTML5技术，相比较传统的图表统计系统而言，是否减轻服务器的压力。4.4.1测试平台客户端平台：PC机一台，装载Windows操作系统和Chrome浏览器。 服务器端：405研究室测试用服务器一台4.4.2流程测试方法排除各个功能在页面开发时的单独功能测试，主要测试统计图表系统在浏览器上的操作表现。由于本系统要依靠其他系统才能完全显示出来，所以在系统的测试过程中，需要有两种不同数据库的可用的系统。具体的执行步骤如下：(1)搭建系统：在一个可用的系统上安装图表系统：首先在web.config里面添加httpHandlerso然后复制DLL文件夹于bin文件夹下。最后将统计系统的Statistatics和Script两文件夹拷贝。(2)运行编译系统后，将系统发布成网站。(3)在客户端打开Chrome浏览器，并输入下面的地址并刷新：httD：//***/defhult・aspx(4)注册新用户，以普通用户进入(5)配置图表类型、选择SQL数据源、输入图表的横纵坐标的SQL语句或存储过程。确定之后进入图表显示页面。(6)査看显示图表，然后可配置Email和发送时间。(7)重复5,6步可以査看其它图表类型。(8)在图表上进行注释(9)使用拖拽功能放大缩小图表。(10)发送至Email,进入Email査看图表。(11)配置图表类型、选择xml数据源、图表的横纵坐标的SQL语句或存储过程。确定之后进入图表显示页面。(12)重复6、7、8、9步。4.4.3测试过程统计图表系统的测试可以得到运行效果和功能的反馈。将釆用以前的项目某钢厂的co排放系统作为主系统，将统计图表系统作为第三方软件，执行步骤1、2、3、4,运行成功，连接到统计图表系统。接着执行步骤5,进行数据源的配置,输入SQL语句。提交后选中图表进行査看。结果如图4.16。 欺迎使忌荃于HTML5的统计冬表系纹■ICKa•佃曲：BWE5M：ScutchDUtifO?帀EK：S5：5QLMSMlertmibrnni,•15C.200JC.50,It,SO.!X.•uOxdiAre/XXS1«19VuiGr^x^iMl/KKCoRVtlf"u•nleauAbfc:mfelTS|7»28(ruCrdiMtt•・••£•..・.・•、询•沁阿?!W5€f«3EEM»a：SO."三>t：e^■TSJhKOjSQj窝uOrdeal・3U•ttUflWtffl!gffl82SIf图4・16运行结果图査看各图，显示正常，测试第8步，能够显示和保存。测试第9步，功能正常。循环测试后，功能皆正常，图表正常显示。4.4.4压力测试方法压力测试的工具采用的是WAST(MicrosoftWebApplicationStressTool)是由微软的网站测试人员所开发，专门用来进行实际网站压力测试的一套工具。通过这套功能强大的压力测试工具，可以使用少量的Client端计算机仿真大量用户上线对网站服务所可能造成的影响。为了进行压力对比测试，在此建立一个传统的图表页面。首先在一台服务器上搭好了网站，http://*♦/Statistatics/chuantong.aspx«在另外一台机器上装好wast微软的压力测试小工具。在wast中建好2个测试项目。压力测试参数设为一致，都是5分钟，25个线程。一个只访问/Statistatics/chuantong.aspx«页面如图4.17« ApplicationStress■C：ProcrasFilesG86)licrosoftYebApplicationStressTo图4.17传统的图表测试另外一个只访问/Statistalics/Service.asmx/Statl□页面如图4」8。»ApplicationStress-C:PrograBFiles(x86)licrosoftVebApplicationStressToolWAS.iFileEditScriptsViewtindwHelp.到會囚电便IHQlrlllMgl1I3・DeftultsStspltScriptB-NrScript0-KerScript3-传统实现：「ContentTree严舊SettingsMlPerfCounters5GroupsUsers诫Clients3Cookies評iffi医3StnrerVotes:图4.18HTML5的图衣测试4.4.5测试结果根据上述的详细测试，我们对结果进行了分析。基于HTML5的统计图表系统其功能己经可以正常使用。多次的循环操作过程中，系统没有产生错误，操作没有延迟。测试结果已经达到预期效果。而压力测试的结果也非常乐观。传统的.NET控件，服务器CPU从1%上升到100%,占用内存也从400MB上升到2G。而使用IITML5技术的图表其CPU一直维持在70%左右,内存占用443MB几乎不增加。测试结果对比表如表4.1所示。表4・1对比测试结果时间(S)请求次数成功次数失败次数成功率传统的统计图表30039721594237840.13%HTML5的统计图表300396880396880396880100%从wast工具给出的结果对比报告可知，在5分钟内，模拟25台机器不停的给服务器 发请求，传统的统计图表系统成功率只有40%,而HTML5的的成功率为100%o从而可知HTML5技术实现客户端统计图表绘制，大大减轻了服务器的负载量。4.5本章小结本章主要详细介绍了基于HTML5的统计图表系统的开发过程。首先分析系统的需求及功能模块，并从整体设计方向研究该系统的解决方案，以及开发的环境。本章后面按四个模块分别介绍了设计方法。最后进行幣体流程的测试，并得出结论。 第五章总结与展望5.1课题总结随着网络科技的发展，未来的网络方向越来越明了，软件产品越來越具有适应性的特点。可以这样说，硬件产品，网络产品和软件产品都在快速的变化以适应信息科技的发展。在这种背景下，人们越来越关注产品的价值。而对于一个软件产品来说，好的界面、易用性、复用性都是设计者值得考量的地方。本课题是基于HTML5技术的研究，利用平时积累的项目经验与理论开发岀一个统计图表系统。现如今，市面上的统计系统很多，大多都是重量级的插件。而在实际的应用中运用这些插件比较繁琐，大部分的开发人员偏向于自己去设计。而自己设计的图表，在界面的显示上差强人意并且图表的显示效率不高。这些方面我们釆用HTML5的技术，得到了良好的解决。HTML5是近几年才出现的热门技术。岀现的这几年來，各大网站争相运用，得到了良好的市场效果。本文就是从系统的架构、总体设计和功能模块的详细设计上对统计图表产品进行深刻的分析和设计，为同行人员提供一些参考。在系统研究、设计和实现过程中本人所做的工作如下：(1)阅读大量关于HTML5的文献和网络资料，分析可用的技术并进行小型的应用实验。对比以往的技术进行优劣分析，为论文的开题报告打好基础。(2)分析Ajax技术和jQuery,确定开发语言。学习Extjs框架，寻找适应HTML5的可行性方案。(3)对于系统的架构设计上，认真査阅资料，分析ASP.NET的管道模型原理，根据自己的系统特点，利用管道模型的通信原理特征，为系统的通用型找到了很好的解决方案，是本课题的一大亮点。(4)在数据源的选择上为了满足通用型的特点，学习了抽象工厂模式，并将其运用于项目当中，使系统得到了很好的扩展性。(5)设计开发统计图表系统，使得理论在实现上得到升华。(6)对该系统进行测试，填写测试报告，并完成这篇论文。5.2本文的新颖之处本文分析了HTML5技术和其他相关的前端开发技术，提出统计图表系统的设计思想。并且结合系统的特点，学习并运用管道模型的HttpHandlers于系统当中。本课题的主要新颖之处在于：(1)利用HTML5技术实现图表统计系统的研发。(2)可实现语音査询。应用HTML5的技术实现语音输入査询图表。(3)相互性好。用户只要选择査询条件，页面不需刷新显示査询结果，自动绘图。 (1)简单易用。系统兼容性强，可插拔，无需编译。(2)可以定时订阅推送。査询的图表可以推送至用户邮箱，当然用户也可以自己设置推送时间和喜好。(3)可扩展性强。本系统采用的抽象类数拯库接口，满足数据源的多样性。5.3本课题的不足以及下一步的工作本课题开发至今，还有一些后续问题值得解决：(1)数据库的类型没有穷尽，只是做岀了SQLSever数据源和静态的XML数据源。接下来可对MySqkOracle等数据库做分析。(2)在开发平台上，只选择了PC终端作为客户端，而没有考虑到移动手持为终端。下一步的研发可以将系统移植在现今流行的移动终端如Android或者IOS平台上进行。(3)此系统对浏览器的要求较高，由于目前IE对HTML5的支持不够，导致很多功能不能显示。这一点只有等待各大浏览器厂商对自己的产品做出改善和升级。 参考文献[1]lanHickson.HTML5:AvocabularyandassociatedAPIsforHTMLandXHTML.W3C.April?2010.[2]html5.html5简介[EB/OL]/.hup://www.w3schooLcom.cn/html5/.2010.⑶AdityaYadav.DeployingHTML5.Paramount.PP:l-45,2010・[4]DonaldW.Johnson&T.J.Jankim・Kelly.Ascalabilitystudyofweb-nativeinformationvisualization.GF08Proceedingsofgraphicsinterface200&PP4-20.2008.[5]MichaelGrady.FunctionalprogrammingusingJavaScriptandtheHTML5canvaselement・JournalofComputingSciencesinColleges.PP:l-4.December2010.[6]PeterLubbers.BrianAlbers.FrankSalim.UsingtheHTML5WebSocketAPI.Apress.10-31.December,2010.[7]JFreeChart[EB/OL].hnpW/wxvw.iftee.f^eeehart/index.html.2004.[8]李伯宇，赵丽丽•在JSP中实现动态图表方法研究[J]•计算机应2003,23(6):213—214.[9]王睿,张能立，万歆•一种基于JFreeChart的Web统计图表[J]・微机发^,2005,15(3):53-54.[10]石乐义.ASP中chart统计图表的处理与实现卩]・微机发展,2003,13⑵:4・7.[11]沈浩，邓晓军.基于0WC和XML动态统计图表的设计与实现[J].计算机工程与设计.2008,29⑶.[12]原野，沈钧毅,何姝.SVG技术在统计图表中的应用研究[J]•计算机工程与应用.2002.[13]PeterLubbers,BrianAlbers,FrankSalim.ProHTML5Programming.Posts&telecompress.2010.[14]XSLTransformations(XSLT).http://www.w3.org/TR/xsIt.[15]AdamFreeman.TheDefinitiveGuidetoHTML5,2011.[16]EricFreeman,ElisabethRobsonHead.FirstHTML5Programming:BuildingWebAppswithJavaScriptOct1&2011・[17]J.D.Gauchat.HTML5forMasterminds:HowtotakeadvantageofHTML5tocreateamazingwebsitesandrevolutionaryapplications,Jun24,2011.[18]BruceLawson.RemySharp.IntroducingHTML5(2ndEdition).2011.[19]BrianP.Hogan.HTML5andCSS3:DevelopwithTomorrow"sStandardsToday.2011.[20]EstelleWeyl,LouisLazaris,AlexisGoldstein.HTML5&CSS3ForTheRealWorld.May19,2011.[21]css.http://www.w3school.com.cn/css/.[22]SergeyMavTody.Sergey"sHTML5&CSS3:QuickReference.2010・[23]陆凌牛.HTML5与CSS3权威指南.机械工业岀版社,2011. [22]statcounter.http://statcountercorn/.[23]Ajax.http://u*ww.w3school.com.cn/ajax/.[24]RebeccaM.Riordan,苏金国，王小振.HeadFirstAjax仲文版）.中国电力出版社,2010.[25]曹静.JavaScript语言与Ajax应用.中国水利水电出版社,2011.[26]劳里亚特（LauriatSM.）,张过,宋会敏.深入Ajax架构与最佳实践•人民邮电出版社,2009.[2刃鲍尔斯,李秀忠.AddingAjax中文版.电子工业出版社,2011・[30]李松峰，卢玉平.jQuery基础教程.北京:人民邮电出版社,2009.[31]陶国荣,jQuery权威指南•机械工业出版社,2011.[32]RichardYork,,施宏斌,，周彦，曹蓉蓉.jQueryJavaScript与CSS开发入门经典.清华大学岀版社,2010.[33]曾顺,精通JavaScript+jQuery.人民邮电出版社,2008.[34]DanWellman,张伟超JQuery用户界面库学习指南•人民邮电出版社,2009.[35]ExtJS.http://extjs.org.cn/.[36]ExtJS4.0,http://exlis.org.cn/node/481.[37]卫军,夏慧军，孟腊春.ExUSWeb应用程序开发指南（第2版）.机械工业出版社,2011.[38]李态柳靖•刘森.HTML5髙级程序设计•北京:人民邮电出版社.2011.[39]陆凌牛.HTML5开发精要与实例详解•机械工业出版社.2011.[40]MarkPilgrim.HTML5:UpandRunning,Aug24,2010.[41]Rgraph.http://www.rgraph.net/. 致谢随着毕业论文的完成，研究生生涯也将画上句号。在这里，我要向所有给予我帮助、关心、指导和支持的老师、同学、朋友以及亲人致以衷心的感谢！首先我要非常感谢我的指导老师陈和平教授。在这三年的研究生阶段，陈和平导师不管在生活上学习上还是工作上都给了我极大的帮助和指导。在学习上，陈老师悉心教导，使我能尽快的将理论知识运用在实际项目中；在生活上，陈老师父母般悉心地照顾我，为我解决生活中的一些困难，教会我做人做事的道理。在工作上，陈老师热心积极地举荐，教我如何发挥自己的潜力，让我更加明白今后的事业方向。在论文的修改过程中，老师严谨的治学态度、精益求精的工作作风给我留下了深刻的印象。此外，杨玲贤老师和陈彬老师对我的科研工作和论文都提出了宝贵的意见，在此表示衷心的感谢。我还要感谢实验室所有兄弟姐妹们以及我的家人长期以来一直对我鼓励和关怀。 攻读硕士学位期间发表的论文和参加的主要科研项目一、论文：1.徐曼，陈和平，李晓卉，周畅.TheDynamicApprovalBasedonECARulesandEmai1TransferMode,ICINIS2011。二、科研项目：1.某特警指挥调度系统2.某钢铁集团维保管理系统2010.11-2011.62011.3-2011.6