本文就在上一篇文章的基礎上,進一步介紹在ASP.NET頁面中實現Bar圖的具體方法。希望本篇文章不僅能夠讓您領會到ASP.NET中強大的繪圖功能,更希望能夠彌補上一篇文章的一個缺憾,就是上一篇實現的圖表的數據來自固定數值,而我們知道圖表只有在和數據庫關聯以後,才能夠顯示出更強大的優勢。下面就來介紹在ASP.NET頁面中從數據庫中提起數據,並以此數據形成Bar圖的具體實現方法。
一.本文程序設計和運行的軟件環境:
(1).微軟公司視窗2000服務器版。
(2).Visual Studio .Net正式版,.Net FrameWork SDK版本號3705。
(3).MDAC 2.6(Microsoft Data Acess Component)以上版本。
二.建立數據源
爲了方便起見,本文選擇的數據庫類型爲本地數據庫--Access 2000,如果你使用的是其他數據庫類型,只需對下面介紹的程序中的關於數據庫連接的代碼進行相應的修改就可以了。Access數據庫名稱爲"db.mdb",在此數據庫中只定義了一張數據表"Table01",此表的結構如表01所示:
字段名稱
|
類型
|
說明
|
ID
|
自動編號
|
主鍵,遞增
|
YF
|
數字
|
銷售月份
|
SL
|
數字
|
銷量
|
在定義完"db.mdb"數據庫中的"Table01"數據表後,在Table01數據表中按照表02所示添加記錄:
ID
|
YF
|
SL
|
1
|
1
|
12
|
2
|
2
|
5
|
3
|
3
|
7
|
4
|
4
|
20
|
5
|
5
|
16
|
6
|
6
|
10
|
7
|
7
|
19
|
8
|
8
|
8
|
9
|
9
|
7
|
10
|
10
|
13
|
11
|
11
|
11
|
12
|
12
|
15
|
在Table01數據表中添加完這12條記錄後,保存"db.mdb"數據庫到C盤的根目錄中。
在ASP.NET頁面中實現數據Bar圖首先必須解決二大問題:
(1).首先要解決在ASP.NET頁面中實現數據庫連接和從數據庫中讀取數據的方法。
程序要實現從數據庫中一條條的讀取數據,則要使用OleDbDataReader類,OleDbDataReader類提供了從數據庫中逐條讀取數據的方法。下面代碼是連接C盤根目錄下的"db.mdb"數據庫,逐條讀取Table01數據表中的記錄,並把數據存放到定義的二個數組中:
string sRouter = "c://db.mdb" ;
//獲得當前Access數據庫在服務器端的絕對路徑 string strCon = " Provider = Microsoft.Jet.OLEDB.4.0; Data Source = " + sRouter ; //創建一個數據庫連接 OleDbConnection myConn = new OleDbConnection ( strCon ) ; string strCom = " SELECT YF ,SL FROM Table01 ORDER BY YF" ; myConn.Open ( ) ; OleDbCommand myCommand = new OleDbCommand ( strCom , myConn ) ; OleDbDataReader myOleDbDataReader = myCommand.ExecuteReader ( ) ; //創建OleDbDataReader實例,並以此實例來獲取數據庫中各條記錄數據 int [ ] iXiaoSH = new int [ 12 ] ; //定義一個數組,用以存放從數據庫中讀取的銷售數據 string [ ] sMoth = new string [ 12 ] ; //定義一個數組,用以存放從數據庫中讀取的銷售月份 int iIndex = 0 ; while ( myOleDbDataReader.Read ( ) ) { iXiaoSH [ iIndex ] = myOleDbDataReader.GetInt32 ( 1 ) ; sMoth [ iIndex ] = myOleDbDataReader.GetInt32 ( 0 ) . ToString ( ) + "月" ; iIndex++ ; } //讀取Table01數據表中的各條數據,並存放在先前定義的二個數組中 myConn . Close ( ) ; myOleDbDataReader . Close ( ) ; //關閉各種資源 |
(2).根據得到數據,繪製圖片,並顯示出來:
通過第一步,已經把從數據庫中的讀取的數據存放到"iXiaoSH"和"sMoth"數組中。下面就要解決依據這些數據繪製出Bar圖?首先先了解一下在ASP.NET頁面中將要實現的數據Bar圖的模樣。具體可如圖01所示:
1. 構建整個圖片
首先要創建一Bitmap實例,並以此來構建一個Graphics實例,Graphics實例提供了各種繪製方法,這樣才能按照數據的要求在Bitmap實例上繪製各種圖形。下面代碼是在ASP.NET中創建Bitmap實例,並以此實例來構建 Graphics實例的具體方法:
Bitmap bm = new Bitmap ( 600 , 250 ) ;
//創建一個長度爲600,寬帶爲250的Bitmap實例 Graphics g ; g = Graphics.FromImage ( bm ) ; //由此Bitmap實例創建Graphic實例 g . Clear ( Color . Snow ) ; //用Snow色彩爲背景色填充此繪畫圖面 |
2. 圖01中的標題部分文字:
這是通過Graphics實例中提供的DrawString方法以指定的字體、顏色、在指定的位置繪製指定的字符串。下面代碼的作用是繪製圖01中標題:
g . DrawString ( " ××公司××器件2002年度銷售情況一覽表" , new Font ( "宋體" , 16 ) , Brushes . Black , new Point ( 5 , 5 ) ) ;
//在繪畫圖面的指定位置,以指定的字體、指定的顏色繪製指定的字符串。即爲圖表標題 |
3. 圖01中的提示區域,即圖01中的右上角顯示的內容:
要繪製這部分內容首先要定位,可以把這部分要繪製的內容分成三個小部分:
其一,是圖01中的"單位:萬套"文字,這部分處理起來比較簡單,當選定要在圖片中輸出的文字座標後,調用Graphics實例中提供的DrawString方法就可以了;
其二,是繪製圖01中的小方塊,首先要調用Graphics實例中的DrawRectangle方法在指定位置,以指定的顏色,繪製指定大小的方塊,然後再條約Graphics實例中的FillRectangle填充這個小方塊就完成了;
其三,是繪製小方塊右邊的文字。同樣要使用Graphics實例中提供的DrawString方法,只不過位置座標和字體要進行相應改變罷了。下面代碼功能是繪製圖01右上角顯示的內容:
Point myRec = new Point ( 535 , 30 ) ;
Point myDec = new Point ( 560 , 26 ) ; //以上是在圖01中爲下面繪製定位 g . DrawString ( "單位:萬套" , new Font ( "宋體" , 9 ) , Brushes . Black , new Point ( 525 , 12 ) ) ; for ( int i = 0 ; i < sMoth.Length ; i++ ) { g . DrawRectangle ( Pens.Black , myRec . X , myRec . Y , 20 , 10 ) ; //繪製小方塊 g . FillRectangle ( new SolidBrush ( GetColor ( i ) ) , myRec . X , myRec . Y , 20 , 10 ) ; //填充小方塊 g . DrawString ( sMoth [ i ] . ToString ( ) , new Font ( "宋體" , 9 ) , Brushes . Black , myDec ) ; //繪製小方塊右邊的文字 myRec . Y += 15 ; myDec . Y += 15 ; } |
4. 根據從數據庫中讀取的數據,繪製數據Bar圖:
此部分與第三部分比較類似,最主要的區別在於,繪製的位置不相同,下面代碼是在圖01中繪製數據Bar圖,並提示Bar圖所代表的數量:
int iBarWidth = 40 ;
int scale = 10 ; for ( int i = 0 ; i < iXiaoSH . Length ; i++ ) { g . DrawRectangle ( Pens.Black , ( i * iBarWidth ) + 15 , 250 - ( iXiaoSH [ i ] * scale ) , 20 , ( iXiaoSH [ i ] * scale ) + 5 ) ; //繪製Bar圖 g . FillRectangle ( new SolidBrush ( GetColor ( i ) ) , ( i * iBarWidth ) + 15 , 250 - ( iXiaoSH [ i ] * scale ) , 20 , ( iXiaoSH [ i ] * scale ) + 5 ) ; //以指定的色彩填充Bar圖 g . DrawString ( iXiaoSH [ i ] . ToString ( ) , new Font ( "宋體" , 9 ) , Brushes . Black , ( i * iBarWidth ) + 20 , 235 - ( iXiaoSH [ i ] * scale ) ) ; //顯示Bar圖代表的數據 } |
5. 繪製圖片邊框,並形成Jpeg文件格式在客戶端顯示:
繪製圖片邊框,使用的Graphics實例中的DrawRectangle方法。至於採用Jpeg格式文件在客戶端顯示,是因爲Jpeg文件佔用的空間較小,利於網絡傳送。下面代碼是繪製圖01中的邊框,並形成Jpeg文件:
Pen p = new Pen ( Color.Black , 2 ) ;
g . DrawRectangle ( p , 1 , 1 , 598 , 248 ) ; bm.Save ( Response . OutputStream , ImageFormat . Jpeg ) ; |
四.ASP.NET頁面中實現數據Bar圖實現步驟:
掌握了上面的關鍵步驟及其解決方法後,在ASP.NET實現數據Bar相對就容易許多了,下面是ASP.NET頁面中實現數據Bar圖的具體實現步驟,在開發工具上選用的是Visual Stuido .Net企業構建版,採用的開發語言是C#。
1. 啓動Visual Studio .Net
2. 選擇菜單【文件】|【新建】|【項目】後,彈出【新建項目】對話框
3. 將【項目類型】設置爲【Visual C#項目】
4. 將【模板】設置爲【ASP.NET Web 應用程序】
5. 在【位置】的文本框中輸入"http://localhost/Bar"。然後單擊【確定】按鈕,這樣在Visual Studio .Net就會在當前項目文件所在目錄中建立一個名稱爲"Bar"文件夾,裏面存放是此項目的項目文件,項目中的其他文件存放的位置是計算機Internet信息服務的默認的Web站點所在的目錄中新建的一個名稱爲"Bar"的文件夾中。具體如圖02所示:
7. 在WebForm1.aspx.cs文件首部,用下列代碼替換WebForm1.aspx.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 System . Drawing . Imaging ; //下面程序中使用的ImageFormat類所在的命名空間 using System . Data . OleDb ; //下面程序中使用到關於數據庫方面的類所在的命名空間 |
string sRouter = "c://db.mdb" ;
//獲得當前Access數據庫在服務器端的絕對路徑 string strCon = " Provider = Microsoft.Jet.OLEDB.4.0; Data Source = " + sRouter ; //創建一個數據庫連接 OleDbConnection myConn = new OleDbConnection ( strCon ) ; string strCom = " SELECT YF ,SL FROM Table01 ORDER BY YF" ; myConn.Open ( ) ; OleDbCommand myCommand = new OleDbCommand ( strCom , myConn ) ; OleDbDataReader myOleDbDataReader = myCommand.ExecuteReader ( ) ; //創建OleDbDataReader實例,並以此實例來獲取數據庫中各條記錄數據 int [ ] iXiaoSH = new int [ 12 ] ; //定義一個數組,用以存放從數據庫中讀取的銷售數據 string [ ] sMoth = new string [ 12 ] ; //定義一個數組,用以存放從數據庫中讀取的銷售月份 int iIndex = 0 ; while ( myOleDbDataReader.Read ( ) ) { iXiaoSH [ iIndex ] = myOleDbDataReader.GetInt32 ( 1 ) ; sMoth [ iIndex ] = myOleDbDataReader.GetInt32 ( 0 ) . ToString ( ) + "月" ; iIndex++ ; } //讀取Table01數據表中的各條數據,並存放在先前定義的二個數組中 myConn . Close ( ) ; myOleDbDataReader . Close ( ) ; //關閉各種資源 Bitmap bm = new Bitmap ( 600 , 250 ) ; //創建一個長度爲600,寬帶爲250的Bitmap實例 Graphics g ; g = Graphics.FromImage ( bm ) ; //由此Bitmap實例創建Graphic實例 g . Clear ( Color . Snow ) ; //用Snow色彩爲背景色填充此繪畫圖面 g . DrawString ( " ××公司××器件2002年度銷售情況一覽表" , new Font ( "宋體" , 16 ) , Brushes . Black , new Point ( 5 , 5 ) ) ; //在繪畫圖面的指定位置,以指定的字體、指定的顏色繪製指定的字符串。即爲圖表標題 //以下代碼是是實現圖01中的右上部 Point myRec = new Point ( 535 , 30 ) ; Point myDec = new Point ( 560 , 26 ) ; //以上是在圖01中爲下面繪製定位 g . DrawString ( "單位:萬套" , new Font ( "宋體" , 9 ) , Brushes . Black , new Point ( 525 , 12 ) ) ; for ( int i = 0 ; i < sMoth.Length ; i++ ) { g . DrawRectangle ( Pens.Black , myRec . X , myRec . Y , 20 , 10 ) ; //繪製小方塊 g . FillRectangle ( new SolidBrush ( GetColor ( i ) ) , myRec . X , myRec . Y , 20 , 10 ) ; //填充小方塊 g . DrawString ( sMoth [ i ] . ToString ( ) , new Font ( "宋體" , 9 ) , Brushes . Black , myDec ) ; //繪製小方塊右邊的文字 myRec . Y += 15 ; myDec . Y += 15 ; } //以下代碼是繪製圖01中的Bar圖,及其銷售數量 int iBarWidth = 40 ; int scale = 10 ; for ( int i = 0 ; i < iXiaoSH . Length ; i++ ) { g . DrawRectangle ( Pens.Black , ( i * iBarWidth ) + 15 , 250 - ( iXiaoSH [ i ] * scale ) , 20 , ( iXiaoSH [ i ] * scale ) + 5 ) ; //繪製Bar圖 g . FillRectangle ( new SolidBrush ( GetColor ( i ) ) , ( i * iBarWidth ) + 15 , 250 - ( iXiaoSH [ i ] * scale ) , 20 , ( iXiaoSH [ i ] * scale ) + 5 ) ; //以指定的色彩填充Bar圖 g . DrawString ( iXiaoSH [ i ] . ToString ( ) , new Font ( "宋體" , 9 ) , Brushes . Black , ( i * iBarWidth ) + 20 , 235 - ( iXiaoSH [ i ] * scale ) ) ; //顯示Bar圖代表的數據 } //以下代碼是繪製圖01中的邊框,並形成Jpeg文件,供瀏覽器顯示出來 Pen p = new Pen ( Color.Black , 2 ) ; g . DrawRectangle ( p , 1 , 1 , 598 , 248 ) ; bm.Save ( Response . OutputStream , ImageFormat . Jpeg ) ; |
9. WebForm1.aspx.cs文件中的InitializeComponent過程之後,添加下列代碼,下列代碼的作用是定義一個名稱爲GetColor函數,此函數的功能根據索引號得到相應的系統顏色:
private Color GetColor ( int itemIndex )
{ Color MyColor ; int i = itemIndex ; switch ( i ) { case 0 : MyColor = Color . Cornsilk ; return MyColor ; case 1 : MyColor = Color . Red ; return MyColor ; case 2 : MyColor = Color . Yellow ; return MyColor ; case 3 : MyColor = Color . Peru ; return MyColor ; case 4 : MyColor = Color . Orange ; return MyColor ; case 5 : MyColor = Color . Coral ; return MyColor ; case 6: MyColor = Color . Gray ; return MyColor ; case 7: MyColor = Color . Maroon ; return MyColor ; case 8: MyColor = Color . Azure ; return MyColor ; case 9: MyColor = Color.AliceBlue ; return MyColor ; case 10: MyColor = Color . Bisque ; return MyColor ; case 11: MyColor = Color . BurlyWood ; return MyColor ; case 12: MyColor = Color . Chartreuse ; return MyColor ; default: MyColor = Color . Green ; return MyColor ; } } |
10. 至此,在上述步驟都正確執行後,在ASP.NET頁面中實現數據Bar圖的全部工作就完成了。在確定上面建立的Access數據庫"db.mdb"位於C盤的根目錄中之後,單擊快捷鍵F5,就可以得到如圖01所示的數據Bar圖了。
五.總結:
在ASP.NET頁面中實現各種圖表,其所使用的就是ASP.NET的繪圖功能,而這一功能是ASP.NET的前一個版本所不具備的。上面的這些介紹,不僅介紹了在ASP.NET繪製各種圖片的方法,還介紹了數據庫連接和從數據庫中逐條讀取記錄的方法。這些方法對您瞭解和掌握在ASP.NET中操作數據庫是非常有用的。在下一篇文章中,將介紹瀏覽器中經常看到的另外一種圖表--餅圖,在ASP.NET頁面中的實現方法。如果您感興趣,那就讓我們下一講再見吧!