如何在ASP.NET中用OWC绘制图表 （1）

一、概述

二、设置图表引擎

三、OWC的许可证问题

四、OWC的运行机制

五、在Web服务器上安装OWC 10

六、OWC编程模式

━━━━━━━━━━━━━

正文：

━━━━━━━━━━━━━

一、概述

在 开发应用程序时，经常会遇到必须提供交互式图表的情况。例如，你可能在开发一个管理销售和产品数据的应用程序，数据保存在SQL Server数据库上，应用程序允许用户添加数据、更新现有数据，但除了这些功能之外，客户还要求应用程序能够用饼图、柱形图或XY散点图的形式直观地描 述数据。

在Windows桌面应用程序中，这类要求从来不成为问题，可供选用的图形库和绘图组件实在太多了。但对于Web应用程序，问题就变得复杂多了。要在Web应用中绘制图表，可供选择的办法包括：

■ 客户端：

利用各种ActiveX组件，Web浏览器内完全有可能达到“丰富”Windows客户程序那样的功能。缺点是客户端的设置复杂化，要求发布客户端软件，通常按照每客户端的方式计算许可证费用。另外，非MS Windows/IE的客户端一般难以运行。

■ 服务器端：

利 用Web服务器上运行的服务器端代码，动态地生成图表，然后以GIF或JPG图形的形式发送给客户端。这种办法的优点是，客户端只需要一个标准的浏览器。 与客户端技术相比的缺点是，图形的交互能力差（除非向服务器提交新的请求，否则就不能缩放、滚动）。许多地图网站（例如Mapquest.com）大量地 运用了这一技术。注意，地图图形不是保存在Web服务器上，而是用户发出一个请求时动态从地图数据库生成。

本文主要讨论如何利用服务器端的图表绘制技术在ASP.NET Web页面中提供图形功能，具体地说，本文分析了如何利用MS SQL数据库中保存的数据生成一个散点图。

二、设置图表引擎

如 果要在ASP.NET应用程序中绘制图表，必须要有一个合适的图表引擎。ASP.NET有一个内建的图形工具库，即System.Drawing名称空间 的GDI+，可以用来创建简单的饼图、柱形图、折线图等，不过它属于低级的API，算不上绘制图表的引擎，特别是不适合绘制复杂的图表。

ASP.NET环境下还有许多商业化的图表绘制代码库，随便搜索一下Google，就可以找到：

Mycos Charts .NET Web Forms Edition

Dundas Chart for ASP.NET

.netCHARTING

Charting Controls at the ASP.NET Control Gallery

不过，许多产品都相当昂贵，而且与世界上应用最广泛的图表绘制工具——Excel相比，不免给人以陌生的感觉。MS Excel是一个相当强大的图表引擎，支持的图表类型非常丰富，而且提供了完备的图表布局调整功能。

正 因为如此，所以本文要讨论的主角是OWC，即Office Web Components，或者“Office Web组件”。按照微软的定义，OWC是一种“将类似Office的功能扩展到Web的微软技术”。它可以在客户端使用，例如我们将Excel工作表保存 为Web页面时就要用到，利用它可以方便地将交互式电子表格和图表发布到Web页面。同时，OWC也是一个优秀的服务器端图表引擎，具有与MS Excel同样强大的图表绘制能力。

三、OWC的许可证问题

如果你曾经用过版本较早的OWC，可能已经遇到过微软的许可证问题。以前这个问题相当令人烦恼，微软不仅要求服务器上必须有Office许可证，而且每一台客户PC上也同样要有。

实 际上，这相当于将OWC的用途局限到了Intranet之内，只有Intranet之内才可以保证客户PC上都安装了Office许可证。不过现在微软的 态度有所放缓——服务器上仍旧要安装Office许可证，但只要图表是“非交互式”用途，例如本文的服务器端图表绘制，客户端就不必再装Office许可 证。实际上，就连服务器端也不必安装完整的Office许可证，Excel 2002或FrontPage 2002的许可证就已足够，从而使OWC变成了价廉物美的服务器端图表引擎。

那么，在服务器上安装MS Office？不，没有必要。虽然从许可证条件看，OWC应该是Office的一部分，但从技术上说，OWC是一个独立的产品。Web服务器上只需安装OWC软件包，不必安装整个Office。

OWC 首次出现于Office 2000，即OWC 9.0。在Office XP中，OWC的编程模式已作了修改，这使得OWC XP（也就是OWC 10）不能与OWC 9.0完全兼容。OWC 10要求在ASP.NET环境中运行，所以OWC 10软件包必须安装到ASP.NET服务器上。

接下来，很自然的一个问题是：哪里可以下载OWC 10软件包？令人惊奇的是，它可以从微软的网站免费下载，地址是 http://office.microsoft.com/downloads/2002/owc10.aspx，

(中文地址： http://www.microsoft.com/downloads/details.aspx?displaylang=zh-cn&FamilyID=982B0359-0A86-4FB2-A7EE-5F3A499515DD 　网际浪子注)但要注意的是，Web服务器上必须安装了某种Office 2002的许可证才能合法地使用OWC 10。

四、OWC的运行机制

OWC是一组COM（ActiveX）控件的集合，涵盖电子表格、图表、数据透视表等功能。它经常被当作客户端技术使用，这时COM控件就安装在客户端PC上。如果在服务器端使用，人们主要感兴趣的是它的图表绘制功能。

有 了OWC，我们可以在ASP.NET Web服务器上动态创建一个图表，然后将图表以GIF图形的形式发送到客户端。客户端看到的仅仅是一个普通的图形文件，但在“背后”，图形文件实际上是由 服务器上ASP.NET回应客户请求时动态生成的。因此，这种技术对客户端没有特殊的要求，只要能够显示GIF图形就可以了，即使Netscape和 Opera也不存在任何问题。

既然如此，为什么在ASP.NET开发领域中，OWC这一优秀的微软技术尚未被广泛采用呢？微软根本不 为OWC作市场宣传，再加上令人迷惑的许可证问题，当然令许多开发者望而却步。也许微软认为该产品还没有完全成熟，即将到来的Office 2003将会带来OWC 11，它的编程模式还会有所改变。另外，还有一种可能是微软担心OWC技术的广泛采用会影响Office的销售。

再 者，关于OWC的编程实例很少。微软知识库有几个客户端的例子和“传统”ASP的服务器端例子，但找不到在ASP.NET环境中使用OWC 10的例子。OWC的新闻组，microsoft.public.office.developer.web.components，主要讨论的也是客户 端的应用。如果你要在ASP.NET环境中使用OWC 10，主要还是靠自己摸索。正是因为这些原因，所以本文从相当广泛的角度探讨了该技术的实际应用。

五、在Web服务器上安装OWC 10

要想在ASP.NET Web服务器上用OWC绘制图表，首先应当安装必要的软件和修改一些配置。

第 一，Web服务器上当然应该有ASP.NET运行环境。除了.NET Framework Redistributable，还要有GACUTIL程序（属于.NET框架SDK）来配置OWC控件，也就是说，还要安装.NET Framework SDK工具。如果把.NET Framework 1.1 Redistributable和SDK安装到了默认目录，PATH环境变量的内容应当包含：C:/WINDOWS/Microsoft.NET/ Framework/v1.1.4322;C:/Program Files/Microsoft.NET/SDK/v1.1/Bin。

接下来再在Web服务器上安装OWC 10。OWC可以从微软免费下载，安装时只要采用所有默认选项即可。

由于OWC 10是一种COM技术，为了让.NET代码使用OWC 10组件，还必须安装Office XP的Primary Interop Assembly（PIA），PIA可以从微软网站下载（ http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnoxpta/html/odc_oxppias.asp ）。

(网际浪子发现的地址是： http://www.microsoft.com/downloads/details.aspx?FamilyId=C41BD61E-3060-4F71-A6B4-01FEBA508E52&displaylang=en )

下载得到的OXPPIA.exe是一个压缩文件，现在把它解压缩到服务器上的一个目录，假设是C:/oxppia，然后启动一个命令窗口（注意，确保PATH环境变量已正确设置[ 网际浪子注：可以用我作的SETPATH.BAT运行一下]），转到c:/oxppia目录，运行REGISTER.bat。

这 个命令把Office XP PIA导入到全局程序集缓冲区，修改注册表设置。注意观察REGISTER.bat命令的输出，确信GACUTIL命令确实在运行。如果PATH环境变量 设置有误，PIA不可能正确导入。README文档说应当用VS.NET命令行环境，但Web服务器上可能没有安装VS.NET，这时就要手工修改 PATH环境变量了（效果一样）。

最后，还要把下面这行代码加入Web服务器的machine.config文件的 <assemblies> 节，对于.NET Framework 1.1，machine.config文件可以在C:/WINDOWS/Microsoft.NET/Framework/v1.1.4322/CONFIG目录下找到：

<add assembly="Microsoft.Office.Interop.OWC, Version=10.0.4504.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

浪子注明：如果发生不能编译的错误，可能要再次运行注册步骤！我这里这样，大家如果不一样，可以自己试试。

六、OWC编程模式

为了在ASP.NET页面中显示一个OWC图表，我们将创建一个简单的ASP.NET页面，该页面的唯一用途就是显示图表。Web页面的名称是getchart.aspx。要在Web页面中显示出图表，可以用一个标准的 HTML <IMG> 标记，如下所示：

<img src="getchart.aspx" />

getchart.aspx页面在服务器上动态生成OWC图表，然后把图表转换成GIF图形发送给客户端。因此，在客户端看来，getchart.aspx就相当于一个GIF图形。

下面我们分析一下getchart.aspx文件。如果使用ASP.NET的Codebehind机制，getchart.aspx实际上只要数条ASP.NET指令：

<%@ Page Language="vb" AutoEventWireup="false" Codebehind="getchart.aspx.vb" Inherits="getchart"%> <%@ OutputCache Duration="5" VaryByParam="none" %>

要生成图表的数据称为数据原，Chart Component组件支持的数据源有：实现IDataSource接口的任何数据源；ADO Recordset对象；XML文件；数组或者一定格式的文本字符串。在ASP中，我们可以用ADO Recordset对象；在.NET的ADO.NET中，由于ADO.NET没有实现IDataSource，.NET也没有提供ADO.NET DataSet对象向ADO Recordset对象的直接转换，如果你有一个 DataSet对象，你要么转换成XML文件，要么生成特殊格式的字符串才可以使用。下面就是本例子的结果：

 

[浪子注明：如果出错，可能是文件夹权限的问题，我的就是，要将虚拟目录的everyone的全部权限加上！]

下面是实现这种功能的VB.NET版本的ASP.NET例子与代码：

OWC.aspx:

   <%@ Page Language="vb" AutoEventWireup="false" Codebehind="OWC.aspx.vb" Inherits="aspxWeb.OWC"%><br/><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" ><br/><HTML><br/> <HEAD><br/> <title>WebForm1</title><br/> <meta name="GENERATOR" Content="Microsoft Visual Studio 7.0"><br/> <meta name="CODE_LANGUAGE" Content="C#"><br/> <meta name="vs_defaultClientScript" content="JavaScript"><br/> <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5"><br/> </head><br/> <body MS_POSITIONING="GridLayout"><br/> <form id="Form1" method="post" runat="server"><br/> <asp:placeholder id="ChartHolder" runat="server"></asp:placeholder><br/> </form><br/> </body><br/></HTML><br/><br/> 
 

OWC.aspx.vb：

   Imports System<br/>Imports OWC<br/>Imports System.Web.UI<br/><br/>Public Class OWC<br/> Inherits System.Web.UI.Page<br/> Protected WithEvents ChartHolder As System.Web.UI.WebControls.PlaceHolder<br/><br/>#Region " Web 窗体设计器生成的代码 "<br/><br/> '该调用是 Web 窗体设计器所必需的。<br/> <System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent()<br/><br/> End Sub<br/><br/> Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init<br/> 'CODEGEN: 此方法调用是 Web 窗体设计器所必需的<br/> '不要使用代码编辑器修改它。<br/> InitializeComponent()<br/> End Sub<br/><br/>#End Region<br/><br/> Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load<br/> '在此处放置初始化页的用户代码<br/> '创建ChartSpace对象来放置图表<br/> Dim objCSpace As ChartSpace = New ChartSpaceClass()<br/> '在ChartSpace对象中添加图表，Add方法返回chart对象<br/> Dim objChart As WCChart = objCSpace.Charts.Add(0)<br/> '指定图表的类型。类型由OWC.ChartChartTypeEnum枚举值得到<br/> objChart.Type = ChartChartTypeEnum.chChartTypeColumnClustered<br/><br/> '指定图表是否需要图例<br/> objChart.HasLegend = True<br/><br/> '给定标题<br/> objChart.HasTitle = True<br/> objChart.Title.Caption = "1-6说数据分布图"<br/><br/> '给定x,y轴的图示说明<br/> objChart.Axes(0).HasTitle = True<br/> objChart.Axes(0).Title.Caption = "Y 轴 : 数量"<br/> objChart.Axes(1).HasTitle = True<br/> objChart.Axes(1).Title.Caption = "X 轴： 月份"<br/><br/> '计算数据<br/> '*categories 和 values 可以用tab分割的字符串来表示*<br/> Dim strSeriesName As String = "图例 1"<br/> Dim strCategory As String = "1" + ControlChars.Tab + "2" + ControlChars.Tab _<br/> + "3" + ControlChars.Tab + "4" + ControlChars.Tab + "5" + ControlChars.Tab _<br/> + "6" + ControlChars.Tab<br/> Dim strValue As String = "9" + ControlChars.Tab + "8" + ControlChars.Tab _<br/> + "4" + ControlChars.Tab + "10" + ControlChars.Tab + "12" + ControlChars.Tab _<br/> + "6" + ControlChars.Tab<br/><br/> '添加一个series<br/> objChart.SeriesCollection.Add(0)<br/><br/> '给定series的名字<br/> objChart.SeriesCollection(0).SetData(ChartDimensionsEnum.chDimSeriesNames,_<br/> ChartSpecialDataSourcesEnum.chDataLiteral, strSeriesName)<br/><br/> '给定分类<br/> objChart.SeriesCollection(0).SetData(ChartDimensionsEnum.chDimCategories,_<br/> ChartSpecialDataSourcesEnum.chDataLiteral, strCategory)<br/><br/> '给定值<br/> objChart.SeriesCollection(0).SetData(ChartDimensionsEnum.chDimValues,_<br/> ChartSpecialDataSourcesEnum.chDataLiteral, strValue)<br/> '输出成GIF文件.<br/> Dim strAbsolutePath As String = (Server.MapPath(".")) + "/Images/test.gif"<br/> objCSpace.ExportPicture(strAbsolutePath, "GIF", 600, 350)<br/><br/> '创建GIF文件的相对路径.<br/> Dim strRelativePath As String = "Images/test.gif"<br/> '把图片添加到placeholder.<br/> Dim strImageTag As String = "<IMG SRC='277_files/" + strrelativepath + "'/>"<br/><br/> ChartHolder.Controls.Add(New LiteralControl(strImageTag))<br/> End Sub<br/> <br/>End Class<br/> 
 

下面是C#版本的OWC.asp.cs

   ublic class owc: System.Web.UI.Page<br/>{<br/> protected System.Web.UI.WebControls.PlaceHolder ChartHolder;<br/><br/> private void Page_Load(object sender, System.EventArgs e)<br/> {<br/> // 在此处放置用户代码以初始化页面<br/> //创建ChartSpace对象来放置图表<br/> OWC.ChartSpace objCSpace = new OWC.ChartSpaceClass (); <br/><br/> //在ChartSpace对象中添加图表，Add方法返回chart对象<br/> OWC.WCChart objChart = objCSpace.Charts.Add (0); <br/><br/> //指定图表的类型。类型由OWC.ChartChartTypeEnum枚举值得到<br/> objChart.Type = OWC.ChartChartTypeEnum.chChartTypeColumnClustered;<br/><br/> //指定图表是否需要图例<br/> objChart.HasLegend = true;<br/><br/> //给定标题<br/> objChart.HasTitle = true;<br/> objChart.Title.Caption= "上半年分布图";<br/><br/> //给定x,y轴的图示说明<br/> objChart.Axes[0].HasTitle = true;<br/> objChart.Axes[0].Title.Caption = "Y ： 数量";<br/> objChart.Axes[1].HasTitle = true;<br/> objChart.Axes[1].Title.Caption = "X ： 月份";<br/><br/> //计算数据<br/> /*categories 和 values 可以用tab分割的字符串来表示*/<br/> string strSeriesName = "图例 1";<br/> string strCategory = "1" + '/t' + "2" + '/t' + "3" + '/t'+"4" + '/t' + "5" + '/t' + "6" + '/t';<br/> string strValue = "9" + '/t' + "8" + '/t' + "4" + '/t'+"10" + '/t' + "12" + '/t' + "6" + '/t';<br/><br/> //添加一个series<br/> objChart.SeriesCollection.Add(0);<br/><br/> //给定series的名字<br/> objChart.SeriesCollection[0].SetData (OWC.ChartDimensionsEnum.chDimSeriesNames,<br/> + (int)OWC.ChartSpecialDataSourcesEnum.chDataLiteral, strSeriesName);<br/><br/> //给定分类<br/> objChart.SeriesCollection[0].SetData (OWC.ChartDimensionsEnum.chDimCategories,<br/> + (int)OWC.ChartSpecialDataSourcesEnum.chDataLiteral, strCategory);<br/><br/> //给定值<br/> objChart.SeriesCollection[0].SetData<br/> (OWC.ChartDimensionsEnum.chDimValues,<br/> (int)OWC.ChartSpecialDataSourcesEnum.chDataLiteral, strValue); <br/> //输出成GIF文件.<br/> string strAbsolutePath = (Server.MapPath(".")) + "//i//test.gif";<br/> objCSpace.ExportPicture(strAbsolutePath, "GIF", 600, 350);<br/><br/> //创建GIF文件的相对路径.<br/> string strRelativePath = "./i/test.gif";<br/><br/> //把图片添加到placeholder.<br/> string strImageTag = "<IMG SRC='277_files/" + strrelativepath + "'/>";<br/> ChartHolder.Controls.Add(new LiteralControl(strImageTag));<br/> }<br/><br/> #region Web Form Designer generated code<br/> override protected void OnInit(EventArgs e)<br/> {<br/> //<br/> // CODEGEN：该调用是 ASP.NET Web 窗体设计器所必需的。<br/> //<br/> InitializeComponent();<br/> base.OnInit(e);<br/> }<br/> <br/> /// <summary><br/> /// 设计器支持所需的方法 - 不要使用代码编辑器修改<br/> /// 此方法的内容。<br/> /// </summary><br/> private void InitializeComponent()<br/> { <br/> this.Load += new System.EventHandler(this.Page_Load);<br/><br/> }<br/> #endregion<br/>}<br/><br/> 
 

如果用ADO.NET的DataSet对象，可以生成以TAB分割的字符串：

   strValue += (nodes.Item(j).ChildNodes.Item(0).InnerText + '/t');<br/>strCategory += (nodes.Item(j).ChildNodes.Item(1).InnerText + '/t');<br/> 
 

Microsoft.Office.Interop名称 空间指向Office XP PIA，PIA应该事先安装到Web服务器上。编译源代码时要用到Office XP PIA OWC的DLL文件。如果用VS.NET编译，只要加入一个Microsoft.Office.Interop.Owc.dll文件的引用即可（位于解开 Office XP PIA文件的目录），如果从命令行编译，必须按照下列方式使用/r:参数：

vbc /t:library /out:bin/getchart.dll /r:System.dll /r:System.Web.dll /r:System.Data.dll /r:C:/oxppia/Microsoft.Office.Interop.Owc.dll getchart.aspx.vb

上面的代码有许多值得一提的地方。首先，我们假定数据源位于MSSQL数据库OWCDEMO，该数据库有一个OWCDATA表，OWCDATA表有两个数值列，分别是X和Y。getchart.aspx的目标就是从数据库获取记录，然后用散点图（XY）描述这些数据。

OWC 图表的数据点无法直接从ASP.NET的DataSet获取，因此，我们首先要把数据库的数据装入数组，然后用数组的数据填写OWC图表的数据点。如果要 对本例作改进的话，最好开发一个ASP.NET服务器控件，它能够从抽象的数据源（包括DataSet对象、XML文件或数组）获取数据并生成XY散点 图。

DataReader要比DataSet快速、高效，不过，我们首先要确定数据库中的记录数量，根据记录数量来调整数组的大小。 为此，我们先用一个SQL Select count(*)查询获取记录数量，然后定义数组大小，最后用第二个SQL SELECT查询获取数据库记录。

如果我们要让散点图的各个点用折线连接起来，记录必须依照X轴排序，这通过一个SQL ORDER BY子句实现。

OWC的图表建立在“绘图空间”上。一个绘图空间可以包含一个或多个图表，每一个图表可以有一个或多个数据系列。在生成OWC图表时，我们首先创建一个绘图空间，将一个图表加入到绘图空间，设置图表的类型，添加数据系列，最后用数组的数据填写数据系列。

另 外，我们还可以设置（可选）各种布局参数，例如颜色、坐标标题、图表标题、图例，等等。OWC提供了数百个布局参数，我们可以随心所欲地调整图表。当然， 对于不同的图表类型，绘图模式也略有不同，例如，饼图和散点图的参数设置方法是不同的。在OWC 10安装包中有OWC帮助文件，里面详细说明了OWC图表模型。

最后，Response.BinaryWrite参数指定了要输出的图形类型（GIF），以及图形的宽度、高度（以像素为单位）。在这里，我们可以根据需要缩放从OWC图表生成的图形。