在BS模式下结合AJAX和OWC动态绘制图表

1、在B/S模式下结合AJAX和OWC动态绘制图表 关键字 OWC，Ajax，A1 引言 图表作为管理信息系统中重要的组成部分，在OWC（Microsoft Office Web Components）诞生之前，嵌入Web页面是非常困难的事情。开发者们通常会采用Plugin技术或者ActiveX 打印控件实现图表的页面嵌入和排版打印，但这些方法不能够快速灵活地解决各种图表的生成，不能与数据库有很好的交互，都需要程序设计人员编写大量的代码来实现。微软发布的Microsoft Office 2000中包含了OWC组件，在A中利用OWC组件可以轻松实现各种图表功能在Web页面中的展现。 在我们参与的一个

2、实时监控的项目中，利用OWC组件实现了将数据库中存放的监控图片实时统计，并生成图表显示在Web页面上的功能。但是，在功能初步实现后作者发现，如果在实时监控中，摄像头捕捉到了新的异动并且将其捕捉到的异动图片存储在数据库中，统计图表并不会实时更新，而必须让访问者重新刷新一次页面之后才能统计出最新的异动情况，实时监控的这个概念并没有彻底实现。于是，作者将Ajax（Asynchronous JavaScript and XML）技术引入了该系统，将Ajax和OWC组件技术相结合，实现了Web页面上的图片实时刷新的功能。下面，分别介绍该功能的实现技术和实现过程。2 AJAX技术图1 Ajax并不是单一技

3、术，而是几项技术的组合，它也不是全新的技术，事实上在Ajax被命名之前，已经有人在使用这些技术。Ajax由以下几项技术组成： (1)基于标准化的XHTML和CSS。 (2)通过DOM(Document 0bject Mode1)实现动态显示和交互。 (3)通过XML和XSLT进行数据交换和处理。 (4)使用XMLHttpRequest通过异步方式获取数据。 (5)使用JavaScript整合以上所有的技术。 Ajax的基本原理是利用JavaScript和浏览器提供的XML HttpRequest接口，实现与服务器的异步通讯，并通过DOM和CSS实现页面的动态显示和交互。由于可以不用刷新整个页面

4、，而是使用JavaScript在后台服务器获得数据，并利用DOM模型对页面进行局部的更新显示，这成为开发交互式网页强有力的工具。 通过图1的比较可以看到与传统的Web应用程序模型相比较，Ajax这种异步通讯模型，增加了Ajax引擎，使得应用过程更自然，操作更流畅，因为其只和服务器交换有用的数据，而页面显示等不必要的数据不再重新加载。Ajax应用利用了一种中间的媒介(Ajax引擎)消除了用户和服务器交互间的等待。3 OWC技术 OWC包含4个主要组件：电子数据表格、图表、数据透视表和数据源。每个组件包含相关的ActiveX控件(Spreadsheet， Chart，PivotTable List

5、和Data Source)。其中Data Source用于将其它组件绑定到一个数据源，但对于在Internet Explorer中查看网页的用户，Data Source是不可见的，通过一个相关联的对象DataSourceControl产生作用，它和其他控件一起包含在Office的DLL(Msowc.dl1)中。图表组件是Microsoft Office使用的数据绑定ActiveX控件，用于实现向Web页添加图表的功能，支持Excel 2000中大部分二维图表、极坐标图表(如饼图和雷达图)以及组合图表(如两轴线一柱图)。数据表随同图表发布，图表随数据的变化而改变。使用OWC在ASP.net中发布

6、动态图表的过程，一般可以概括为以下几个步骤： (1)设置缓冲输出及输出流的HTTP MIME类型； (2)从数据库中读取要生成图表的数据； (3)创建OWC图表； (4)添加必要的数据系列； (5)为每个数据列赋数据； (6)定义外观； (7)以GIF图形的形式返回图表； (8)用标记显示图形。4应用情况 在该项目中，我们需要使用OWC组件在网页中显示出某个站点下某个摄像头在不同时段捕获到的异动图片的张数，并实时画出各个时段的统计结果。通过Ajax技术，我们实现了15分钟定时查询数据库中的数据，看是否有变化，一旦出现了新的异动图片，Ajax便帮助我们自动刷新页面中的图表部分，而不刷新整个页面。

7、其相关程序如下：后台C#程序：/引用画图库using OWC11；/ajax库引用using AjaxPro；AjaxMethod()public string GetNewPic() /初始化图形空间chtSp.Clear()；/图形参数给定mychart.HasTitle = true；/将产生图形序列加入图形空间/图形数据赋值myseries.SetData(ChartDimensionsEnum.chDimCategories, Convert.ToInt32(ChartSpecialDataSourcesEnum.chDataLiteral), groups)；myseries.Se

8、tData(ChartDimensionsEnum.chDimValues, Convert.ToInt32(ChartSpecialDataSourcesEnum.chDataLiteral), values)；/利用组件生成GIF图片在PicPath下chtSp.ExportPicture( PicPath, gif, PicWidth, PicHeight)；前台javascript程序：/设置计时器，定时调用函数查询后台数据var time1 = setInterval(PicRefresh,900000)； /异步调用函数GetNewPic()function PicRefresh() /执行函数后，结果返回客户端function getNewPic_callback(res) if (res.value != null) location.reload()； 得到的图表如图2所示。图25 结束语 通过一个技术（Ajax）和一个组件的（OWC）的结合应用，我们实现了在Web应用中的实时图表更新显示。它不仅可以用于实时监控系统中，同样也可以使用在需要实时更新图