在對大批量的資料進行分析比較時,最常用也是最直觀明了的表現方法莫過於繪製趨勢圖表。一般情況下,我們利用EXCEL製作各種類型的趨勢圖表,但它們都是基於待用資料的,即資料是事先整理好的而不 是動態產生的。如果在網上發布,只能將繪製好的圖表以靜態GIF映像發布,這無法從根本上滿足不同使用者對不同資料的需求。
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版本,以親身體驗一下專業圖表控制項帶來的強大功能。