一、概述? <?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />

?

??? 在開發應用程序時，經常會遇到必須提供交互式圖表的情況。例如，你可能在開發一個管理銷售和產品數據的應用程序，數據保存在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接口的任何數據源；<?xml:namespace prefix = st1 ns = "urn:schemas-microsoft-com:office:smarttags" />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?id="Form1"?method="post"?runat="server">
??????<asp:placeholder?id="ChartHolder"?runat="server"></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的全部文件和源碼。

轉載于:https://blog.51cto.com/qianshao/202152

總結

以上是生活随笔為你收集整理的如何在ASP.NET中用OWC绘制图表的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。