熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> .NET編程 >> 正文

ASP.NET中實時圖表的實現

2013-11-13 09:52:53  來源: .NET編程 

  在對大批量的數據進行分析比較時最常用也是最直觀明了的表現方法莫過於繪制趨勢圖表一般情況下我們利用EXCEL制作各種類型的趨勢圖表但它們都是基於靜態數據的即數據是事先整理好的而不 是動態生成的如果在網上發布只能將繪制好的圖表以靜態GIF圖像發布這無法從根本上滿足不同用戶對不同數據的需求

  ASP擅長服務器端的Web編程操作後台數據庫更是它的強項但是用ASP制作實時數據庫圖表有點困難因為ASP本身並不支持圖表功能只能借助第三方控件進行開發如VB的MSChart控件微軟推出的NET Framework較好地解決了這個問題微軟在NET平台上集成了實時數據庫圖表制作組件—OWC(Microsoft Office Web Components)通過在ASPNET頁面中調用OWC我們可以輕松地繪制出各種類型的實時圖表OWC支持近種圖表類型包括曲線圖折線圖柱狀圖面積圖K線圖等與MSChart相比OWC功能強大操作簡單此外由於OWC是基於服務端的而MSChart只能應用在客戶端因此在服務器端的Web開發中MSChart要比OWC遜色不少

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

  三層結構

  系統整體架構采用了B/S三層結構模式將系統分為用戶界面層(也稱為表現層)業務邏輯層(也稱為功能層)和數據庫服務層(也稱為數據層)開發平台則采用了NET Framework有效地降低了系統對客戶機的要求避免了在客戶機上分發應用程序與版本控制的困難

  ● 用戶界面層 用戶界面采用的是ASPNET技術ASPNET技術的應用增強了系統的通用性客戶端只需安裝IE或Netscape等任一款浏覽器無需加載任何組件

  ● 業務邏輯層 采用了NET Framework調用OWC的技術能夠根據用戶的要求快速取得數據庫中的數據動態生成圖表系統能夠支持復雜的檢索條件檢索速度快響應時間短

  ● 數據庫服務層數據庫服務層可采用任何一款關系型數據庫在本項目中筆者使用的是SQL Server它能與NET Framework無縫集成數據庫存取技術則采用了ADONET

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

  圖表元素簡介

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

  

  使用OWC組件

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

   在當前目錄中新建一個存放圖表文件的子目錄chart同時把對該目錄的修改權限賦予ASPNET賬戶具體步驟如下用鼠標右鍵單擊chart目錄名選擇屬性菜單項在彈出的Chart屬性對話框中單擊安全選項卡再單擊添加按鈕找到ASPNET賬戶賦予修改權限單擊確定按鈕結束這樣ASPNET就可以在chart目錄中寫入圖表文件了

   定義一個服務器端的Image圖像控件該圖像的屬性imageURL將在程序末尾被指向動態生成的圖表文件因此在這裡無需為它賦值

  < aspimage id=imgChart Width= Height= Visible=False Runat=server>< /aspimage>

   添加OWC引用

  在使用OWC之前首先必須將OWC的引用加入到解決方案資源管理器具體步驟如下打開解決方案資源管理器面板鼠標右鍵單擊引用選擇添加引用菜單在彈出的添加引用對話框中單擊COM卡片找到Microsoft Office Web Components 單擊選擇確定按鈕OWC就被添加到了引用中

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

  Dim owcChartSpace As OWCChartSpace = New OWCChartSpace()

  Dim owcChart As OWCWCChart = owcChartSpaceChartsAdd

   用SQL檢索條件進行數據庫檢索並將檢索結果以RecordSet數據集的方式賦給owcChart

  OWC只支持RecordSet數據集不支持DataSet數據集因此在檢索時不能使用sqlCommandsqlDataAdapter等對象只能使用RecordSet對象進行檢索

  打開connection連接

  ConnADOOpen(connectionString)

  RecordsetADOActiveConnection = ConnADO

  設置游標為靜態游標

  RecordsetADOCursorType = ADODBCursorTypeEnumadOpenStatic

  RecordsetADOCursorLocation = ADODBCursorLocationEnumadUseClient

  變量strSQL中存放了標准SQL檢索條件

  RecordsetADOOpen(strSQL)

  然後將RecordSet數據集賦給OWC對象

  owcChartSpaceDataSource = RecordsetADO

  在本例中我們假定用SQL語句檢索出的數據共有三個字段產品日期和價格這三個字段的值分別與圖表中的曲線分類(X)軸和數值(Y)軸的數據一一對應

   確定曲線類型並確定區別不同曲線的字段名

  首先確定曲線類型為平滑曲線

  owcChartType = OWCChartChartTypeEnumchChartTypeSmoothLine

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

  owcChartSetData(OWCChartDimensionsEnumchDimSeriesNames 產品

   確定分類(X)軸標簽與數值(Y)軸標簽所對應的字段

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

  Dim owcSeries As OWCWCSeries

  For Each owcSeries In owcChartSeriesCollection

  owcSeriesSetData(OWCChartDimensionsEnumchDimCategories 日期

  owcSeriesSetData(OWCChartDimensionsEnumchDimValues 價格

  Next

   對坐標軸的屬性進行設置

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

  先定義axis為坐標軸集合

  Dim axis As OWCWCAxis

  遍歷坐標軸集合

  For Each axis In owcChartAxes

  顯示軸標題

  axisHasTitle = True

  先對分類(X)軸進行設置

  If axisType=OWCChartAxisTypeEnum

  chCategoryAxis Then

  axisHasTickLabels = True

  顯示X軸刻度標簽

  axisPosition = OWCChartAxisPositionEnumchAxisPositionBottom

  標簽的顯示位置

  axisTitleFontColor =blue

  X軸的標題文字顏色

  axisTitleFontSize =

  X軸的標題文字大小

  axisTitleCaption = 日期范圍

  X軸的標題文字內容

  Else

  對數值(Y)軸進行設置

  axisMajorGridlinesLineColor = silver

  Y軸主要網絡線的顏色

  axisMajorTickMarks = OWCChartTickMarkEnumchTickMarkNone

  不顯示Y軸主要刻度標記

  axisHasTickLabels = True

  顯示Y軸刻度標簽

  axisTitleFontColor = blue

  Y軸的標題文字顏色

  axisTitleFontSize =

  Y軸的標題文字大小

  axisTitleCaption=價格(千元/噸)

  Y軸的標題文字內容

  End If

  Next

   以GIF圖像格式輸出圖表並將圖像文件名賦給Image控件

  用隨機數來生成隨機文件名

  Randomize()

  Dim nFileNameSuffix As Integer

  Dim sFileNameSuffix As String

  nFileNameSuffix = * Rnd()

  sFileNameSuffix = SystemConvertToString(nFileNameSuffix)

  以GIF格式輸出圖表大小為*圖表的文件名為polyesterprice_隨機數gif存放在chart子目錄中

  owcChartSpaceExportPicture(MapPath(chart/PolyesterPrice_) + sFileNameSuffix + gif gif

  將Image控件的URL指向該圖表文件

  imgChartImageUrl=chart/PolyesterPrice_ + sFileNameSuffix + gif

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

  本文代碼生成的圖表效果請見下圖

  

  優化

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

  先取得chart文件夾中的文件列表

  Dim fileEntries() As String = SystemIODirectoryGetFiles(MapPath(chart))

  Dim sFile As String

  遍歷文件列表

  For Each sFile In fileEntries

  將文件的生成日期與系統日期相比如果是當日以前生成的文件刪除它

  If DateTimeCompare(SystemIOFileGetCreationTime(sFile)AddDays( DateTimeNow) < Then

  SystemIOFileDelete(sFile)

  End If

  Next

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


From:http://tw.wingwit.com/Article/program/net/201311/11850.html
    推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.