ASP擅長伺服器端的Web程式設計，操作後臺資料庫更是它的強項。但是用ASP製作實時資料庫圖表有點困難，因為ASP本身並不支援圖表功能，只能藉助第三方控制元件進行開發，如VB的MSChart控制元件。微軟推出的.NET Framework較好地解決了這個問題。微軟在.NET平臺上集成了實時資料庫圖表製作元件—OWC（Microsoft Office Web Components）。通過在ASP.NET頁面中呼叫OWC，我們可以輕鬆地繪製出各種型別的實時圖表。OWC支援近50種圖表型別，包括曲線圖、折線圖、柱狀圖、面積圖、K線圖等。與MSChart相比，OWC功能強大，操作簡單。此外，由於OWC是基於服務端的，而MSChart只能應用在客戶端，因此在伺服器端的Web開發中，MSChart要比OWC遜色不少。

下面筆者將結合例項來具體闡述OWC在ASP.NET頁面中的應用，這個例項是筆者開發的專案《化纖產品及其原料市場分析系統》中的一個子系統，筆者在該專案中用到OWC，充分享受到了OWC的強大功能給開發工作帶來的方便。

三層結構

系統整體架構採用了B/S三層結構模式，將系統分為使用者介面層（也稱為表現層）、業務邏輯層（也稱為功能層）和資料庫服務層（也稱為資料層），開發平臺則採用了.NET Framework，有效地降低了系統對客戶機的要求，避免了在客戶機上分發應用程式與版本控制的困難。

● 使用者介面層: 使用者介面採用的是ASP.NET技術。ASP.NET技術的應用增強了系統的通用性，客戶端只需安裝IE或Netscape等任一款瀏覽器，無需載入任何元件。

● 業務邏輯層: 採用了.NET Framework呼叫OWC的技術，能夠根據使用者的要求快速取得資料庫中的資料動態生成圖表。系統能夠支援複雜的檢索條件，檢索速度快，響應時間短。

● 資料庫服務層：資料庫服務層可採用任何一款關係型資料庫。在本專案中，筆者使用的是SQL Server，它能與.NET Framework無縫整合。資料庫存取技術則採用了ADO.NET。

下文我們將著重介紹業務邏輯層的實現方法。

圖表元素簡介

一張完整的圖表由若干個元素組成，我們必須對它們有所瞭解，才能隨心所欲、充分自如地對圖表進行全方位的控制，也才能更好地理解本程式。筆者製作了一張簡易的圖表，在圖中標註了程式涉及到的主要部位和元素的名稱，藉此幫助讀者掌握OWC以及理解本文所引用的程式碼。

使用OWC元件

在這一節裡所涉及的原始碼摘自於《化纖產品及其原料市場分析系統》，該系統在Window 2000/XP簡體中文專業版、.NET Framewrok 1 .0環境下通過。使用OWC元件的步驟如下：

1. 在當前目錄中新建一個存放圖表檔案的子目錄chart，同時把對該目錄的“修改”許可權賦予ASP.NET賬戶。具體步驟如下：用滑鼠右鍵單擊chart目錄名，選擇“屬性”選單項，在彈出的“Chart”屬性對話方塊中單擊“安全”選項卡，再單擊“新增”按鈕，找到ASP.NET賬戶，賦予“修改”許可權，單擊“確定”按鈕結束。這樣，ASP.NET就可以在chart目錄中寫入圖表檔案了。

2. 定義一個伺服器端的Image影象控制元件，該影象的屬性imageURL將在程式末尾被指向動態生成的圖表檔案，因此在這裡無需為它賦值。

< asp:image id=“imgChart” Width=“500” Height=“300” Visible=“False” Runat=“server”>< /asp:image>

3. 新增OWC引用。

在使用OWC之前，首先必須將OWC的引用加入到“解決方案資源管理器”中。具體步驟如下：開啟“解決方案資源管理器”面板，滑鼠右鍵單擊“引用”，選擇“新增引用”選單，在彈出的“新增引用”對話方塊中單擊“COM”卡片，找到“Microsoft Office Web Components 9.0”，單擊“選擇”和“確定”按鈕，OWC就被新增到了引用中。

4. 定義OWC空間，並在該空間中加入一個OWC圖表owcChart。

Dim owcChartSpace As OWC.ChartSpace = New OWC.ChartSpace()

Dim owcChart As OWC.WCChart = owcChartSpace.Charts.Add

5. 用SQL檢索條件進行資料庫檢索，並將檢索結果以RecordSet資料集的方式賦給owcChart。

OWC只支援RecordSet資料集，不支援DataSet資料集，因此在檢索時不能使用sqlCommand、sqlDataAdapter等物件，只能使用RecordSet物件進行檢索。

’開啟connection連線

ConnADO.Open(connectionString)

RecordsetADO.ActiveConnection = ConnADO

’設定遊標為靜態遊標

RecordsetADO.CursorType = ADODB.CursorTypeEnum.adOpenStatic

RecordsetADO.CursorLocation = ADODB.CursorLocationEnum.adUseClient

’變數strSQL中存放了標準SQL檢索條件

RecordsetADO.Open(strSQL)

然後將RecordSet資料集賦給OWC物件：

owcChartSpace.DataSource = RecordsetADO

在本例中，我們假定用SQL語句檢索出的資料共有三個欄位：產品、日期和價格。這三個欄位的值分別與圖表中的曲線、分類（X）軸和數值（Y）軸的資料一一對應。

6. 確定曲線型別，並確定區別不同曲線的欄位名。

首先確定曲線型別為平滑曲線。

owcChart.Type = OWC.ChartChartTypeEnum.chChartTypeSmoothLine

OWC支援在同一張圖表中顯示兩條以上的曲線。因此我們必須給出區別不同曲線的依據，這個依據就是“產品”欄位的取值。具體地說，“產品”欄位中有幾個不同的取值，就會生成幾條不同的曲線。

owcChart.SetData(OWC.ChartDimensionsEnum.chDimSeriesNames, 0, “產品”)

7. 確定分類（X）軸標籤與數值（Y）軸標籤所對應的欄位。

首先需要定義owcSeries為OWC的曲線集合，然後遍歷圖表中的每一條曲線，將“日期”欄位的值賦給分類（X）軸作為X軸刻度標籤，將“價格”欄位的值賦給數值（Y）軸作為Y軸刻度標籤。如果我們能夠確定圖表中只有一條曲線，也可以省略遍歷的過程，但這樣無疑會降低程式的通用性。

Dim owcSeries As OWC.WCSeries

For Each owcSeries In owcChart.SeriesCollection

owcSeries.SetData(OWC.ChartDimensionsEnum.chDimCategories, 0, “日期”)

owcSeries.SetData(OWC.ChartDimensionsEnum.chDimValues, 0, “價格”)

Next

8. 對座標軸的屬性進行設定。

這部分程式碼通過對座標軸標題的文字內容、顏色、大小、主要和次要刻度線及其標籤、主要和次要網路線等方面的設定美化圖表。讀者如果對本段程式碼中的概念有些模糊，可以參考前一部分提供的那張圖表。具體設定方法請參見以下程式碼。

’先定義axis為座標軸集合

Dim axis As OWC.WCAxis

’遍歷座標軸集合

For Each axis In owcChart.Axes

’顯示軸標題

axis.HasTitle = True

’先對分類（X）軸進行設定

If axis.Type=OWC.ChartAxisTypeEnum.

chCategoryAxis Then

axis.HasTickLabels = True

’顯示X軸刻度標籤

axis.Position = OWC.ChartAxisPositionEnum.chAxisPositionBottom

’標籤的顯示位置

axis.Title.Font.Color =”blue”

’X軸的標題文字顏色

axis.Title.Font.Size = “9”

’X軸的標題文字大小

axis.Title.Caption = “日期範圍”

’X軸的標題文字內容

Else

’對數值（Y）軸進行設定

axis.MajorGridlines.Line.Color = “silver”

’Y軸主要網路線的顏色

axis.MajorTickMarks = OWC.ChartTickMarkEnum.chTickMarkNone

’不顯示Y軸主要刻度標記

axis.HasTickLabels = True

’顯示Y軸刻度標籤

axis.Title.Font.Color = “blue”

’Y軸的標題文字顏色

axis.Title.Font.Size = “9”

’Y軸的標題文字大小

axis.Title.Caption=“價格(千元/噸)”

’Y軸的標題文字內容

End If

Next

9. 以GIF影象格式輸出圖表，並將影象檔名賦給Image控制元件。

’用隨機數來生成隨機檔名

Randomize()

Dim nFileNameSuffix As Integer

Dim sFileNameSuffix As String

nFileNameSuffix = 100000 * Rnd()

sFileNameSuffix = System.Convert.ToString(nFileNameSuffix)

’以GIF格式輸出圖表，大小為500*300，圖表的檔名為：polyesterprice_隨機數.gif，存放在chart子目錄中

owcChartSpace.ExportPicture(MapPath(“chart/PolyesterPrice_”) + sFileNameSuffix + “.gif”, “gif”, 500, 300)

’將Image控制元件的URL指向該圖表檔案

imgChart.ImageUrl=“chart/PolyesterPrice_” + sFileNameSuffix + “.gif”

通過以上九個步驟，我們就完成了一個實時資料庫圖表的生成與顯示。在此需要指出的是，以上的九個步驟只是生成一張圖表必不可少的基本過程，通過設定OWC的其他屬性可以更好、更精確地控制圖表的生成與顯示方式，如圖例、線條的粗細與顏色、座標軸刻度線及標籤的顯示頻度、網路線等。這部分筆者不再介紹，請參見本文第四部分的原始碼。

優化

上文中所有實時生成的圖表檔案都存放在chart資料夾中，由於採用了隨機檔名的方式，因此這些檔案不會互相覆蓋。但是如此日積月累，越來越多的檔案不僅佔用了硬碟空 間，也妨礙了管理，降低了效能。我們能不能在程式中自動刪除以前的圖表檔案呢？答案是肯定的。我們只要在程式碼檔案的Page_Load()函式中放置如下一段程式碼，程式執行的時候，就會自動刪除當日以前的檔案。這樣，chart資料夾中存放的就總是當日生成的圖表檔案，從而有效地避免了檔案垃圾。

’先取得chart資料夾中的檔案列表

Dim fileEntries() As String = System.IO.Directory.GetFiles(MapPath(“chart”))

Dim sFile As String

’遍歷檔案列表

For Each sFile In fileEntries

’將檔案的生成日期與系統日期相比，如果是當日以前生成的檔案，刪除它

If DateTime.Compare(System.IO.File.GetCreationTime(sFile).AddDays(1), DateTime.Now) < 0 Then

System.IO.File.Delete(sFile)

End If

Next

雖然用OWC生成的圖表功能齊全，介面美觀，但它也存在著不少的缺陷。首先，OWC不支援DataSet資料集，這樣我們就無法在生成圖表的同時使用DataGrid顯示資料表，除非我們用迴圈依次取出Recordset記錄集中的全部資料手工生成表格，或用同樣的檢索條件對資料庫進行二次檢索，但這無疑要增加伺服器的負擔。其次，在同一張圖表中繪製的曲線只能是同一種類型，或同為平滑曲線圖，或同為柱狀圖，它不能在同一張圖表中顯示不同型別的曲線。最後，在某些細節方面，如分類（X）軸的設定方面，OWC無法提供更加詳細、人性化的設定途徑。如果讀者要追求更強大的功能和更好的顯示效果，筆者向您推薦兩個專業的基於.NET的圖表控制元件，這兩個控制元件分別由Dundas和Softwarefx公司出品，都同時支援Web Form和Win Form開發,只是這兩個控制元件都是付費的。讀者如果有興趣，可以到它們的網站去下載DEMO版本，以親身體驗一下專業圖表控制元件帶來的強大功能。