• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

[转贴]如何在ASP.NET中用OWC绘制图表

原作者: [db:作者] 来自: [db:来源] 收藏 邀请
一、概述 

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

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

■ 客户端: 

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

■ 服务器端: 

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

本文主要讨论如何利用服务器端的图表绘制技术在ASP.NET Web页面中提供图形功能

二、设置图表引擎 

如果要在ASP.NET应用程序中绘制图表,必须要有一个合适的图表引擎。ASP.NET有一个内建的图形工具库,即System.Drawing名称空间的GDI+,可以用来创建简单的饼图、柱形图、折线图等,不过它属于低级的API,算不上绘制图表的引擎,特别是不适合绘制复杂的图表。 
   本文要讨论的主角是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编程模式 
   要生成图表的数据称为数据原,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"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
  <HEAD>
    <title>WebForm1</title>
    <meta name="GENERATOR" Content="Microsoft Visual Studio 7.0">
    <meta name="CODE_LANGUAGE" Content="C#">
    <meta name="vs_defaultClientScript" content="javascript">
    <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5";>
  </HEAD>
  <body MS_POSITIONING="GridLayout">
    <form ></asp:placeholder>
    </form>
  </body>
</HTML>


OWC.aspx.vb:

Imports System
Imports OWC
Imports System.Web.UI

Public Class OWC
  Inherits System.Web.UI.Page
  Protected WithEvents ChartHolder As System.Web.UI.WebControls.PlaceHolder

#Region " Web 窗体设计器生成的代码 "

  '该调用是 Web 窗体设计器所必需的。
  <System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent()

  End Sub

  Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init
    'CODEGEN: 此方法调用是 Web 窗体设计器所必需的
    '不要使用代码编辑器修改它。
    InitializeComponent()
  End Sub

#End Region

  Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
    '在此处放置初始化页的用户代码
    '创建ChartSpace对象来放置图表
    Dim objCSpace As ChartSpace = New ChartSpaceClass()
    '在ChartSpace对象中添加图表,Add方法返回chart对象
    Dim objChart As WCChart = objCSpace.Charts.Add(0)
    '指定图表的类型。类型由OWC.ChartChartTypeEnum枚举值得到
    objChart.Type = ChartChartTypeEnum.chChartTypeColumnClustered

    '指定图表是否需要图例
    objChart.HasLegend = True

    '给定标题
    objChart.HasTitle = True
    objChart.Title.Caption = "1-6说数据分布图"

    '给定x,y轴的图示说明
    objChart.Axes(0).HasTitle = True
    objChart.Axes(0).Title.Caption = "Y 轴 : 数量"
    objChart.Axes(1).HasTitle = True
    objChart.Axes(1).Title.Caption = "X 轴: 月份"

    '计算数据
    '*categories 和 values 可以用tab分割的字符串来表示*
    Dim strSeriesName As String = "图例 1"
    Dim strCategory As String = "1" + ControlChars.Tab + "2" + ControlChars.Tab _
 + "3" + ControlChars.Tab + "4" + ControlChars.Tab + "5" + ControlChars.Tab _
 + "6" + ControlChars.Tab
    Dim strvalue As String = "9" + ControlChars.Tab + "8" + ControlChars.Tab _
 + "4" + ControlChars.Tab + "10" + ControlChars.Tab + "12" + ControlChars.Tab _
 + "6" + ControlChars.Tab

    '添加一个series
    objChart.SeriesCollection.Add(0)

    '给定series的名字
    objChart.SeriesCollection(0).SetData(ChartDimensionsEnum.chDimSeriesNames,_
  ChartSpecialDataSourcesEnum.chDataLiteral, strSeriesName)

    '给定分类
    objChart.SeriesCollection(0).SetData(ChartDimensionsEnum.chDimCategories,_
  ChartSpecialDataSourcesEnum.chDataLiteral, strCategory)

    '给定值
    objChart.SeriesCollection(0).SetData(ChartDimensionsEnum.chDimvalues,_
  ChartSpecialDataSourcesEnum.chDataLiteral, strvalue)
    '输出成GIF文件.
    Dim strAbsolutePath As String = (Server.MapPath(".")) + "\Images\test.gif"
    objCSpace.ExportPicture(strAbsolutePath, "GIF", 600, 350)

    '创建GIF文件的相对路径.
    Dim strRelativePath As String = "Images/test.gif"
    '把图片添加到placeholder.
    Dim strImageTag As String = "<IMG SRC='890_files/&quot; + strrelativepath + &quot;'/>"

    ChartHolder.Controls.Add(New LiteralControl(strImageTag))
  End Sub
  
End Class

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

using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using Microsoft.Office.Interop; 
namespace Microsoft.Office.Interop.OWC使用指南
{
 /// <summary>
 /// WebForm1 的摘要说明。
 /// </summary>
 public class WebForm1 : System.Web.UI.Page
 {
  protected System.Web.UI.WebControls.PlaceHolder ChartHolder;
  private Microsoft.Office.Interop.OWC.ChartChartTypeEnum GetChartType(int typeIndex)
  {
   int i;
   Microsoft.Office.Interop.OWC.ChartChartTypeEnum myTE;
   i=typeIndex;
   
   switch(i)
   {
    case 0:
     myTE=Microsoft.Office.Interop.OWC.ChartChartTypeEnum.chChartTypeColumnClustered;
     return myTE;
    case 1:
     myTE=Microsoft.Office.Interop.OWC.ChartChartTypeEnum.chChartTypePie;
     return myTE;
    case 2:
     myTE=Microsoft.Office.Interop.OWC.ChartChartTypeEnum.chChartTypeSmoothLine;
     return myTE;
    case 3:
     myTE=Microsoft.Office.Interop.OWC.ChartChartTypeEnum.chChartTypeArea;
     return myTE;
    case 4:
     myTE=Microsoft.Office.Interop.OWC.ChartChartTypeEnum.chChartTypeRadarLine;
     return myTE;
    default:
     myTE=Microsoft.Office.Interop.OWC.ChartChartTypeEnum.chChartTypeColumnClustered;
     return myTE;
   }
  }

  private void Page_Load(object sender, System.EventArgs e)
  {
   // 在此处放置用户代码以初始化页面
   //创建ChartSpace对象来放置图表
   Microsoft.Office.Interop.OWC.ChartSpace objCSpace = new Microsoft.Office.Interop.OWC.ChartSpaceClass(); 

   //在ChartSpace对象中添加图表,Add方法返回chart对象
   
   Microsoft.Office.Interop.OWC.ChChart   objChart = objCSpace.Charts.Add (0); 

   //指定图表的类型。类型由Microsoft.Office.Interop.OWC.ChartChartTypeEnum枚举值得到
   //objChart.Type = Microsoft.Office.Interop.OWC.ChartChartTypeEnum.chChartTypeColumnClustered;
   //上面的是画棒图的方法
   //objChart.Type = Microsoft.Office.Interop.OWC.ChartChartTypeEnum.chChartTypeSmoothLine;
   //上面的是画平滑曲线的方法


   objChart.Type =Microsoft.Office.Interop.OWC.ChartChartTypeEnum.chChartTypeRadarLine;
   //上面的是画雷达线的方法
   //objChart.Type =Microsoft.Office.Interop.OWC.ChartChartTypeEnum.chChartTypeArea;
   //上面的是画区域线的方法

   //objChart.Type =Microsoft.Office.Interop.OWC.ChartChartTypeEnum.chChartTypePie;
   //上面的是画饼图的方法,但是要关掉一些参数,比如
   /*//objChart.Axes[0].HasTitle = true;
   //objChart.Axes[0].Title.Caption = "Y : 数量";
   //objChart.Axes[1].HasTitle = true;
   //objChart.Axes[1].Title.Caption = "X : 月份";

    * */

   //指定图表是否需要图例
   objChart.HasLegend = true;

   //给定标题
   objChart.HasTitle = true;
   objChart.Title.Caption= "上半年分布图";

   //给定x,y轴的图示说明
   objChart.Axes[0].HasTitle = true;
   objChart.Axes[0].Title.Caption = "Y : 数量";
   objChart.Axes[1].HasTitle = true;
   objChart.Axes[1].Title.Caption = "X : 月份";

   //计算数据
   /*categories 和 values 可以用tab分割的字符串来表示*/
   string strSeriesName = "图例 1";
   string strCategory = "1" + '\t' + "2" + '\t' + "3" + '\t'+"4" + '\t' + "5" + '\t' + "6" + '\t';
   string strvalue = "9" + '\t' + "8" + '\t' + "4" + '\t'+"10" + '\t' + "12" + '\t' + "6" + '\t';

   //添加一个series
   objChart.SeriesCollection.Add(0);

   //给定series的名字
   objChart.SeriesCollection[0].SetData (Microsoft.Office.Interop.OWC.ChartDimensionsEnum.chDimSeriesNames,
    + (int)Microsoft.Office.Interop.OWC.ChartSpecialDataSourcesEnum.chDataLiteral, strSeriesName);

   //给定分类
   objChart.SeriesCollection[0].SetData (Microsoft.Office.Interop.OWC.ChartDimensionsEnum.chDimCategories,
    + (int)Microsoft.Office.Interop.OWC.ChartSpecialDataSourcesEnum.chDataLiteral, strCategory);

      

   //给定值
   objChart.SeriesCollection[0].SetData
    (Microsoft.Office.Interop.OWC.ChartDimensionsEnum.chDimvalues,
    (int)Microsoft.Office.Interop.OWC.ChartSpecialDataSourcesEnum.chDataLiteral, strvalue); 
   //输出成GIF文件.
   string strAbsolutePath = (Server.MapPath(".")) + "\\test.gif";
   objCSpace.ExportPicture(strAbsolutePath, "GIF", 600, 350);

   //创建GIF文件的相对路径.
   string strRelativePath = "./test.gif";

   //把图片添加到placeholder.
   string strImageTag = "<IMG SRC='" + strRelativePath + "'/>";
   ChartHolder.Controls.Add(new LiteralControl(strImageTag));
  }

  #region Web Form Designer generated code
  override protected void OnInit(EventArgs e)
  {
   //
   // CODEGEN:该调用是 ASP.NET Web 窗体设计器所必需的。
   //
   InitializeComponent();
   base.OnInit(e);
  }
 
  /// <summary>
  /// 设计器支持所需的方法 - 不要使用代码编辑器修改
  /// 此方法的内容。
  /// </summary>
  private void InitializeComponent()
  {    
   this.Load += new System.EventHandler(this.Page_Load);

  }
  #endregion

 }
}


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

strvalue += (nodes.Item(j).ChildNodes.Item(0).InnerText + '\t');
strCategory += (nodes.Item(j).ChildNodes.Item(1).InnerText + '\t');


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图表生成的图形。 

对了,忘了说代码的位置了,在FTP里的论坛问题解答里,有一个OWC使用指南的目录,下面有使用OWC的全部文件和源码。

本代码在vs.net2003+windows xp 上海政府版+sp1+IIS5.1+OFFICE 2003下运行通过。
它的种类太多了,没办法都拷图下来,大家自己看吧!好多好看的东东,有3D效果的很多。



鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap