在ASP.NET页面中实现数据柱状图
生活随笔
收集整理的這篇文章主要介紹了
在ASP.NET页面中实现数据柱状图
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
棒圖有時又稱為"Bar"圖,在ASP.NET中擁有了一個新功能--繪圖功能,通過此功能就能夠按照要實現的圖表的模樣來繪制,最后在客戶端的瀏覽器中形成一個圖片,從而顯示出圖表來。
本文就是介紹在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數據庫名稱為"db2.mdb",在此數據庫中只定義了一張數據表"MonthSale",此表的結構如表01所示:
表01:MonthSale數據表的結構
在定義完"db2.mdb"數據庫中的"MonthSale"數據表后,在MonthSale數據表中按照表02所示添加記錄:
表02:Table01數據表中的記錄情況
在MonthSale數據表中添加完這12條記錄后,保存"db2.mdb"數據庫到C盤的根目錄中。
三.ASP.NET頁面中實現數據Bar圖的關鍵步驟及其實現方法:
在ASP.NET頁面中實現數據Bar圖首先必須解決二大問題:
(1).首先要解決在ASP.NET頁面中實現數據庫連接和從數據庫中讀取數據的方法。
程序要實現從數據庫中一條條的讀取數據,則要使用OleDbDataReader類,OleDbDataReader類提供了從數據庫中逐條讀取數據的方法。下面代碼是連接C盤根目錄下的"db2.mdb"數據庫,逐條讀取MonthSale數據表中的記錄,并把數據存放到定義的二個數組中:
?1string?sRouter?=?"c:\\db2.mdb"?;
?2????????????//獲得當前Access數據庫在服務器端的絕對路徑
?3
?4????????????string?strCon?=?"?Provider?=?Microsoft.Jet.OLEDB.4.0;?Data?Source?=?"?+?sRouter?;
?5????????????//創建一個數據庫連接
?6
?7????????????OleDbConnection?myConn?=?new?OleDbConnection?(?strCon?)?;
?8????????????string?strCom?=?"?SELECT?YF?,SL?FROM?MonthSale?ORDER?BY?YF"?;
?9????????????myConn.Open?(?)?;
10????????????OleDbCommand?myCommand?=?new?OleDbCommand?(?strCom?,?myConn?)?;
11????????????OleDbDataReader?myOleDbDataReader?=?myCommand.ExecuteReader?(?)?;
12????????????//創建OleDbDataReader實例,并以此實例來獲取數據庫中各條記錄數據
13
14????????????int?[?]?iXiaoSH?=?new?int?[?12?]?;
15????????????//定義一個數組,用以存放從數據庫中讀取的銷售數據
16
17????????????string?[?]?sMoth?=?new?string?[?12?]?;
18????????????//定義一個數組,用以存放從數據庫中讀取的銷售月份
19
20????????????int?iIndex?=?0?;
21????????????while?(?myOleDbDataReader.Read?(?)?)?
22????????????{
23????????????????iXiaoSH?[?iIndex?]?=?myOleDbDataReader.GetInt32?(?1?)?;
24????????????????sMoth?[?iIndex?]?=?myOleDbDataReader.GetInt32?(?0?)?.?ToString?(?)?+?"月"?;
25????????????????iIndex++?;
26????????????}
27????????????//讀取Table01數據表中的各條數據,并存放在先前定義的二個數組中
28
29????????????myConn?.?Close?(?)?;
30????????????myOleDbDataReader?.?Close?(?)?;
31????????????//關閉各種資源
(2).根據得到數據,繪制圖片,并顯示出來:
通過第一步,已經把從數據庫中的讀取的數據存放到"iXiaoSH"和"sMoth"數組中。下面就要解決依據這些數據繪制出Bar圖?首先先了解一下在ASP.NET頁面中將要實現的數據Bar圖的模樣。具體可如圖01所示:
圖01:在ASP.NET中實現的數據Bar圖
程序中把圖01所示各個元素,按照區域分成了五個部分,這五個部分將在后面介紹的程序中分別實現:
1. 構建整個圖片
首先要創建一Bitmap實例,并以此來構建一個Graphics實例,Graphics實例提供了各種繪制方法,這樣才能按照數據的要求在Bitmap實例上繪制各種圖形。下面代碼是在ASP.NET中創建Bitmap實例,并以此實例來構建 Graphics實例的具體方法:
1Bitmap?bm?=?new?Bitmap?(?600?,?250?)?;
2????????????//創建一個長度為600,寬帶為250的Bitmap實例
3
4????????????Graphics?g?;
5????????????g?=?Graphics.FromImage?(?bm?)?;
6????????????//由此Bitmap實例創建Graphic實例
7
8????????????g?.?Clear?(?Color.Snow)?;
9????????????//用Snow色彩為背景色填充此繪畫圖面2. 圖01中的標題部分文字:
這是通過Graphics實例中提供的DrawString方法以指定的字體、顏色、在指定的位置繪制指定的字符串。下面代碼的作用是繪制圖01中標題:
1g?.?DrawString?(?"?××公司××××年度銷售情況統計表"?,?new?Font?(?"黑體"?,?16?)?,?Brushes?.?Black?,?new?Point?(?5?,?5?)?)?;
2????????????//在繪畫圖面的指定位置,以指定的字體、指定的顏色繪制指定的字符串。即為圖表標題
33. 圖01中的提示區域,即圖01中的右上角顯示的內容:
要繪制這部分內容首先要定位,可以把這部分要繪制的內容分成三個小部分:
其一,是圖01中的"單位:萬套"文字,這部分處理起來比較簡單,當選定要在圖片中輸出的文字坐標后,調用Graphics實例中提供的DrawString方法就可以了;
其二,是繪制圖01中的小方塊,首先要調用Graphics實例中的DrawRectangle方法在指定位置,以指定的顏色,繪制指定大小的方塊,然后再條約Graphics實例中的FillRectangle填充這個小方塊就完成了;
其三,是繪制小方塊右邊的文字。同樣要使用Graphics實例中提供的DrawString方法,只不過位置坐標和字體要進行相應改變罷了。下面代碼功能是繪制圖01右上角顯示的內容:
?1//以下代碼是是實現圖右上部
?2????????????Point?myRec?=?new?Point?(?535?,?30?)?;
?3????????????Point?myDec?=?new?Point?(?560?,?26?)?;
?4
?5????????????//以上是在圖01中為下面繪制定位
?6????????????g?.?DrawString?(?"單位:萬套"?,?new?Font?(?"宋體"?,?9?)?,?Brushes?.?Black?,?new?Point?(?525?,?12?)?)?;
?7???
?8???
?9????????????for?(?int?i?=?0?;?i?<?sMoth.Length?;?i++?)?
10????????????{
11????????????????g?.?DrawRectangle?(?Pens.Black?,?myRec?.?X?,?myRec?.?Y?,?20?,?10?)?;
12????????????????//繪制小方塊
13
14????????????????g?.?FillRectangle?(?new?SolidBrush?(?GetColor?(?i?)?)?,?myRec.X?,?myRec.Y?,?20?,?10?)?;
15????????????????//填充小方塊
16
17????????????????g?.?DrawString?(?sMoth?[?i?]?.?ToString?(?)?,?new?Font?(?"宋體"?,?9?)?,?Brushes?.?Black?,?myDec?)?;
18????????????????//繪制小方塊右邊的文字
19
20????????????????myRec?.?Y?+=?15?;
21????????????????myDec?.?Y?+=?15?;
22????????????}
?2????????????int?iBarWidth?=?40?;
?3????????????int?scale?=?10?;
?4????????????for?(?int?i?=?0?;?i?<?iXiaoSH?.?Length?;?i++?)?
?5????????????{
?6????????????????g?.?DrawRectangle?(?Pens.Black,?(?i?*?iBarWidth?)?+?15?,?250?-?(?iXiaoSH?[?i?]?*?scale?)?,?20?,?(?iXiaoSH?[?i?]?*?scale?)?+?5?)?;
?7????????????????//繪制Bar圖
?8
?9????????????????g?.?FillRectangle?(?new?SolidBrush?(GetColor?(?i?))?,?(?i?*?iBarWidth?)?+?15?,?250?-?(?iXiaoSH?[?i?]?*?scale?)?,?20?,?(?iXiaoSH?[?i?]?*?scale?)?+?5?)?;
10????????????????//以指定的色彩填充Bar圖
11
12????????????????g?.?DrawString?(?iXiaoSH?[?i?]?.?ToString?(?)?,?new?Font?(?"宋體"?,?9?)?,?Brushes?.?Black?,?(?i?*?iBarWidth?)?+?20?,?235?-?(?iXiaoSH?[?i?]?*?scale?)?)?;
13????????????????//顯示Bar圖代表的數據
14????????????}5. 繪制圖片邊框,并形成Jpeg文件格式在客戶端顯示:
繪制圖片邊框,使用的Graphics實例中的DrawRectangle方法。至于采用Jpeg格式文件在客戶端顯示,是因為Jpeg文件占用的空間較小,利于網絡傳送。下面代碼是繪制圖01中的邊框,并形成Jpeg文件:
1//以下代碼是繪制邊框,并形成Jpeg文件,供瀏覽器顯示出來
2????????????Pen?p?=?new?Pen?(?Color.Black?,?2?)?;
3????????????g?.?DrawRectangle?(?p?,?1?,?1?,?598?,?248?)?;
4????????????bm.Save?(?Response?.?OutputStream?,?ImageFormat.Gif)?;
四.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就會在當前項目文件所在目錄中建立一個名稱為"WebBarDemo"文件夾,里面存放是此項目的項目文件,項目中的其他文件存放的位置是計算機Internet信息服務的默認的Web站點所在的目錄中新建的一個名稱為"WebBarDemo"的文件夾中。具體如圖02所示:
圖02:新建一個ASP.NET項目對話框
6. 把Visual Studio .Net的當前窗口切換到WebForm的代碼編輯窗口,即:WebForm1.aspx.cs文件的編輯窗口。
7. 在WebForm1.aspx.cs文件首部,用下列代碼替換WebForm1.aspx.cs中導入命名空間的代碼
1//下面程序中使用的ImageFormat類所在的命名空間
2using?System.Drawing.Imaging;
3//下面程序中使用到關于數據庫方面的類所在的命名空間
4using?System.Data.OleDb; 8. WebForm1.aspx.cs文件中的Page_Load事件處理代碼中添加下列代碼,下列代碼的作用是打開數據庫,讀取數據,并以此數據形成數據Bar圖:
?1private?void?Page_Load(object?sender,?System.EventArgs?e)
?2????????{
?3????????????//?在此處放置用戶代碼以初始化頁面
?4
?5????????????string?sRouter?=?"c:\\db2.mdb"?;
?6????????????//獲得當前Access數據庫在服務器端的絕對路徑
?7
?8????????????string?strCon?=?"?Provider?=?Microsoft.Jet.OLEDB.4.0;?Data?Source?=?"?+?sRouter?;
?9????????????//創建一個數據庫連接
10
11????????????OleDbConnection?myConn?=?new?OleDbConnection?(?strCon?)?;
12????????????string?strCom?=?"?SELECT?YF?,SL?FROM?MonthSale?ORDER?BY?YF"?;
13????????????myConn.Open?(?)?;
14????????????OleDbCommand?myCommand?=?new?OleDbCommand?(?strCom?,?myConn?)?;
15????????????OleDbDataReader?myOleDbDataReader?=?myCommand.ExecuteReader?(?)?;
16????????????//創建OleDbDataReader實例,并以此實例來獲取數據庫中各條記錄數據
17
18????????????int?[?]?iXiaoSH?=?new?int?[?12?]?;
19????????????//定義一個數組,用以存放從數據庫中讀取的銷售數據
20
21????????????string?[?]?sMoth?=?new?string?[?12?]?;
22????????????//定義一個數組,用以存放從數據庫中讀取的銷售月份
23
24????????????int?iIndex?=?0?;
25????????????while?(?myOleDbDataReader.Read?(?)?)?
26????????????{
27????????????????iXiaoSH?[?iIndex?]?=?myOleDbDataReader.GetInt32?(?1?)?;
28????????????????sMoth?[?iIndex?]?=?myOleDbDataReader.GetInt32?(?0?)?.?ToString?(?)?+?"月"?;
29????????????????iIndex++?;
30????????????}
31????????????//讀取Table01數據表中的各條數據,并存放在先前定義的二個數組中
32
33????????????myConn?.?Close?(?)?;
34????????????myOleDbDataReader?.?Close?(?)?;
35????????????//關閉各種資源
36
37????????????Bitmap?bm?=?new?Bitmap?(?600?,?250?)?;
38????????????//創建一個長度為600,寬帶為250的Bitmap實例
39
40????????????Graphics?g?;
41????????????g?=?Graphics.FromImage?(?bm?)?;
42????????????//由此Bitmap實例創建Graphic實例
43
44????????????g?.?Clear?(?Color.Snow)?;
45????????????//用Snow色彩為背景色填充此繪畫圖面
46
47????????????g?.?DrawString?(?"?××公司××××年度銷售情況統計表"?,?new?Font?(?"黑體"?,?16?)?,?Brushes?.?Black?,?new?Point?(?5?,?5?)?)?;
48????????????//在繪畫圖面的指定位置,以指定的字體、指定的顏色繪制指定的字符串。即為圖表標題
49
50????????????//以下代碼是是實現圖右上部
51????????????Point?myRec?=?new?Point?(?535?,?30?)?;
52????????????Point?myDec?=?new?Point?(?560?,?26?)?;
53
54????????????//以上是在圖01中為下面繪制定位
55????????????g?.?DrawString?(?"單位:萬套"?,?new?Font?(?"宋體"?,?9?)?,?Brushes?.?Black?,?new?Point?(?525?,?12?)?)?;
56???
57???
58????????????for?(?int?i?=?0?;?i?<?sMoth.Length?;?i++?)?
59????????????{
60????????????????g?.?DrawRectangle?(?Pens.Black?,?myRec?.?X?,?myRec?.?Y?,?20?,?10?)?;
61????????????????//繪制小方塊
62
63????????????????g?.?FillRectangle?(?new?SolidBrush?(?GetColor?(?i?)?)?,?myRec.X?,?myRec.Y?,?20?,?10?)?;
64????????????????//填充小方塊
65
66????????????????g?.?DrawString?(?sMoth?[?i?]?.?ToString?(?)?,?new?Font?(?"宋體"?,?9?)?,?Brushes?.?Black?,?myDec?)?;
67????????????????//繪制小方塊右邊的文字
68
69????????????????myRec?.?Y?+=?15?;
70????????????????myDec?.?Y?+=?15?;
71????????????}
72
73????????????//以下代碼是繪制Bar圖,及其銷售數量
74????????????int?iBarWidth?=?40?;
75????????????int?scale?=?10?;
76????????????for?(?int?i?=?0?;?i?<?iXiaoSH?.?Length?;?i++?)?
77????????????{
78????????????????g?.?DrawRectangle?(?Pens.Black,?(?i?*?iBarWidth?)?+?15?,?250?-?(?iXiaoSH?[?i?]?*?scale?)?,?20?,?(?iXiaoSH?[?i?]?*?scale?)?+?5?)?;
79????????????????//繪制Bar圖
80
81????????????????g?.?FillRectangle?(?new?SolidBrush?(GetColor?(?i?))?,?(?i?*?iBarWidth?)?+?15?,?250?-?(?iXiaoSH?[?i?]?*?scale?)?,?20?,?(?iXiaoSH?[?i?]?*?scale?)?+?5?)?;
82????????????????//以指定的色彩填充Bar圖
83
84????????????????g?.?DrawString?(?iXiaoSH?[?i?]?.?ToString?(?)?,?new?Font?(?"宋體"?,?9?)?,?Brushes?.?Black?,?(?i?*?iBarWidth?)?+?20?,?235?-?(?iXiaoSH?[?i?]?*?scale?)?)?;
85????????????????//顯示Bar圖代表的數據
86????????????}
87
88????????????//以下代碼是繪制邊框,并形成Jpeg文件,供瀏覽器顯示出來
89????????????Pen?p?=?new?Pen?(?Color.Black?,?2?)?;
90????????????g?.?DrawRectangle?(?p?,?1?,?1?,?598?,?248?)?;
91????????????bm.Save?(?Response?.?OutputStream?,?ImageFormat.Gif)?;
92????????}
9. WebForm1.aspx.cs文件中的InitializeComponent過程之后,添加下列代碼,下列代碼的作用是定義一個名稱為GetColor函數,此函數的功能根據索引號得到相應的系統顏色:
?1/**////?<summary>
?2????????///?獲取顏色
?3????????///?</summary>
?4????????///?<param?name="itemIndex">數組的索引</param>
?5????????///?<returns></returns>
?6????????private?Color?GetColor?(?int?itemIndex?)?
?7????????{
?8 ????????????Color?MyColor?;
?9 ????????????int?i?=?itemIndex?;
10????????????switch?(i)?
11 ????????????{
12 ????????????????case?0?:
13 ????????????????MyColor?=?Color.Green;
14 ????????????????return?MyColor;
15 ????????????????case?1?:
16 ????????????????MyColor?=?Color.Red;
17 ?????????????????return?MyColor;
18 ????????????????case?2:
19 ????????????????MyColor?=?Color.Yellow;
20 ????????????????return?MyColor;
21 ????????????????case?3?:
22 ????????????????MyColor?=?Color.Blue;
23 ????????????????return?MyColor;
24 ????????????????case?4?:
25 ????????????????MyColor?=?Color.Orange;
26 ????????????????return?MyColor;
27??????? ????????case?5?:
28 ????????????????MyColor?=?Color.Aqua;
29 ????????????????return?MyColor;
30 ????????????????case?6:
31 ????????????????MyColor?=?Color.SkyBlue;
32 ????????????????return?MyColor;
33 ????????????????case?7:
34 ????????????????MyColor?=?Color.DeepPink;
35 ????????????????return?MyColor;
36 ????????????????case?8:
37 ????????????????MyColor?=?Color.Azure;
38 ????????????????return?MyColor;
39 ????????????????case?9:
40 ????????????????MyColor?=?Color.Brown;
41 ????????????????return?MyColor;
42 ????????????????case?10:
43 ????????????????MyColor?=?Color.Pink;
44 ????????????????return?MyColor;
45 ????????????????case?11:
46 ????????????????MyColor?=?Color.BurlyWood;
47 ????????????????return?MyColor;
48 ????????????????case?12:
49 ????????????????MyColor?=?Color.Chartreuse;
50 ????????????????return?MyColor;
51 ????????????????default:
52 ????????????????MyColor?=?Color.Pink;
53 ????????????????return?MyColor;
54????????????}
55????????}
10. 至此,在上述步驟都正確執行后,在ASP.NET頁面中實現數據Bar圖的全部工作就完成了。在確定上面建立的Access數據庫"db.mdb"位于C盤的根目錄中之后,單擊快捷鍵F5,就可以得到如圖01所示的數據Bar圖了。
五.總結:
在ASP.NET頁面中實現各種圖表,其所使用的就是ASP.NET的繪圖功能,而這一功能是ASP.NET的前一個版本所不具備的。上面的這些介紹,不僅介紹了在ASP.NET繪制各種圖片的方法,還介紹了數據庫連接和從數據庫中逐條讀取記錄的方法。這些方法對您了解和掌握在ASP.NET中操作數據庫是非常有用的。
完整的例子程序:
??1using?System;
??2using?System.Collections;
??3using?System.ComponentModel;
??4using?System.Data;
??5using?System.Drawing;
??6using?System.Web;
??7using?System.Web.SessionState;
??8using?System.Web.UI;
??9using?System.Web.UI.WebControls;
?10using?System.Web.UI.HtmlControls;
?11
?12//下面程序中使用的ImageFormat類所在的命名空間
?13using?System.Drawing.Imaging;
?14//下面程序中使用到關于數據庫方面的類所在的命名空間
?15using?System.Data.OleDb;
?16
?17namespace?WebBarDemo
?18{
?19????/**////?<summary>
?20????///?WebForm1?的摘要說明。
?21????///?</summary>
?22????public?class?WebForm1?:?System.Web.UI.Page
?23????{
?24????????private?void?Page_Load(object?sender,?System.EventArgs?e)
?25????????{
?26????????????//?在此處放置用戶代碼以初始化頁面
?27
?28????????????string?sRouter?=?"c:\\db2.mdb"?;
?29????????????//獲得當前Access數據庫在服務器端的絕對路徑
?30
?31????????????string?strCon?=?"?Provider?=?Microsoft.Jet.OLEDB.4.0;?Data?Source?=?"?+?sRouter?;
?32????????????//創建一個數據庫連接
?33
?34????????????OleDbConnection?myConn?=?new?OleDbConnection?(?strCon?)?;
?35????????????string?strCom?=?"?SELECT?YF?,SL?FROM?MonthSale?ORDER?BY?YF"?;
?36????????????myConn.Open?(?)?;
?37????????????OleDbCommand?myCommand?=?new?OleDbCommand?(?strCom?,?myConn?)?;
?38????????????OleDbDataReader?myOleDbDataReader?=?myCommand.ExecuteReader?(?)?;
?39????????????//創建OleDbDataReader實例,并以此實例來獲取數據庫中各條記錄數據
?40
?41????????????int?[?]?iXiaoSH?=?new?int?[?12?]?;
?42????????????//定義一個數組,用以存放從數據庫中讀取的銷售數據
?43
?44????????????string?[?]?sMoth?=?new?string?[?12?]?;
?45????????????//定義一個數組,用以存放從數據庫中讀取的銷售月份
?46
?47????????????int?iIndex?=?0?;
?48????????????while?(?myOleDbDataReader.Read?(?)?)?
?49????????????{
?50????????????????iXiaoSH?[?iIndex?]?=?myOleDbDataReader.GetInt32?(?1?)?;
?51????????????????sMoth?[?iIndex?]?=?myOleDbDataReader.GetInt32?(?0?)?.?ToString?(?)?+?"月"?;
?52????????????????iIndex++?;
?53????????????}
?54????????????//讀取Table01數據表中的各條數據,并存放在先前定義的二個數組中
?55
?56????????????myConn?.?Close?(?)?;
?57????????????myOleDbDataReader?.?Close?(?)?;
?58????????????//關閉各種資源
?59
?60????????????Bitmap?bm?=?new?Bitmap?(?600?,?250?)?;
?61????????????//創建一個長度為600,寬帶為250的Bitmap實例
?62
?63????????????Graphics?g?;
?64????????????g?=?Graphics.FromImage?(?bm?)?;
?65????????????//由此Bitmap實例創建Graphic實例
?66
?67????????????g?.?Clear?(?Color.Snow)?;
?68????????????//用Snow色彩為背景色填充此繪畫圖面
?69
?70????????????g?.?DrawString?(?"?××公司××××年度銷售情況統計表"?,?new?Font?(?"黑體"?,?16?)?,?Brushes?.?Black?,?new?Point?(?5?,?5?)?)?;
?71????????????//在繪畫圖面的指定位置,以指定的字體、指定的顏色繪制指定的字符串。即為圖表標題
?72
?73????????????//以下代碼是是實現圖右上部
?74????????????Point?myRec?=?new?Point?(?535?,?30?)?;
?75????????????Point?myDec?=?new?Point?(?560?,?26?)?;
?76
?77????????????//以上是在圖01中為下面繪制定位
?78????????????g?.?DrawString?(?"單位:萬套"?,?new?Font?(?"宋體"?,?9?)?,?Brushes?.?Black?,?new?Point?(?525?,?12?)?)?;
?79???
?80???
?81????????????for?(?int?i?=?0?;?i?<?sMoth.Length?;?i++?)?
?82????????????{
?83????????????????g?.?DrawRectangle?(?Pens.Black?,?myRec?.?X?,?myRec?.?Y?,?20?,?10?)?;
?84????????????????//繪制小方塊
?85
?86????????????????g?.?FillRectangle?(?new?SolidBrush?(?GetColor?(?i?)?)?,?myRec.X?,?myRec.Y?,?20?,?10?)?;
?87????????????????//填充小方塊
?88
?89????????????????g?.?DrawString?(?sMoth?[?i?]?.?ToString?(?)?,?new?Font?(?"宋體"?,?9?)?,?Brushes?.?Black?,?myDec?)?;
?90????????????????//繪制小方塊右邊的文字
?91
?92????????????????myRec?.?Y?+=?15?;
?93????????????????myDec?.?Y?+=?15?;
?94????????????}
?95
?96????????????//以下代碼是繪制Bar圖,及其銷售數量
?97????????????int?iBarWidth?=?40?;
?98????????????int?scale?=?10?;
?99????????????for?(?int?i?=?0?;?i?<?iXiaoSH?.?Length?;?i++?)?
100????????????{
101????????????????g?.?DrawRectangle?(?Pens.Black,?(?i?*?iBarWidth?)?+?15?,?250?-?(?iXiaoSH?[?i?]?*?scale?)?,?20?,?(?iXiaoSH?[?i?]?*?scale?)?+?5?)?;
102????????????????//繪制Bar圖
103
104????????????????g?.?FillRectangle?(?new?SolidBrush?(GetColor?(?i?))?,?(?i?*?iBarWidth?)?+?15?,?250?-?(?iXiaoSH?[?i?]?*?scale?)?,?20?,?(?iXiaoSH?[?i?]?*?scale?)?+?5?)?;
105????????????????//以指定的色彩填充Bar圖
106
107????????????????g?.?DrawString?(?iXiaoSH?[?i?]?.?ToString?(?)?,?new?Font?(?"宋體"?,?9?)?,?Brushes?.?Black?,?(?i?*?iBarWidth?)?+?20?,?235?-?(?iXiaoSH?[?i?]?*?scale?)?)?;
108????????????????//顯示Bar圖代表的數據
109????????????}
110
111????????????//以下代碼是繪制邊框,并形成Jpeg文件,供瀏覽器顯示出來
112????????????Pen?p?=?new?Pen?(?Color.Black?,?2?)?;
113????????????g?.?DrawRectangle?(?p?,?1?,?1?,?598?,?248?)?;
114????????????bm.Save?(?Response?.?OutputStream?,?ImageFormat.Gif)?;
115????????}
116
117????????Web?窗體設計器生成的代碼#region?Web?窗體設計器生成的代碼
118????????override?protected?void?OnInit(EventArgs?e)
119????????{
120????????????//
121????????????//?CODEGEN:?該調用是?ASP.NET?Web?窗體設計器所必需的。
122????????????//
123????????????InitializeComponent();
124????????????base.OnInit(e);
125????????}
126????????
127????????/**////?<summary>
128????????///?設計器支持所需的方法?-?不要使用代碼編輯器修改
129????????///?此方法的內容。
130????????///?</summary>
131????????private?void?InitializeComponent()
132????????{????
133????????????this.Load?+=?new?System.EventHandler(this.Page_Load);
134????????}
135????????#endregion
136????????
137????????/**////?<summary>
138????????///?獲取顏色
139????????///?</summary>
140????????///?<param?name="itemIndex">數組的索引</param>
141????????///?<returns></returns>
142????????private?Color?GetColor?(?int?itemIndex?)?
143????????{
144 ????????????Color?MyColor?;
145 ????????????int?i?=?itemIndex?;
146????????????switch?(i)?
147 ????????????{
148 ????????????????case?0?:
149 ????????????????MyColor?=?Color.Green;
150 ????????????????return?MyColor;
151 ????????????????case?1?:
152 ????????????????MyColor?=?Color.Red;
153 ?????????????????return?MyColor;
154 ????????????????case?2:
155 ????????????????MyColor?=?Color.Yellow;
156 ????????????????return?MyColor;
157 ????????????????case?3?:
158 ????????????????MyColor?=?Color.Blue;
159 ????????????????return?MyColor;
160 ????????????????case?4?:
161 ????????????????MyColor?=?Color.Orange;
162 ????????????????return?MyColor;
163??????? ????????case?5?:
164 ????????????????MyColor?=?Color.Aqua;
165 ????????????????return?MyColor;
166 ????????????????case?6:
167 ????????????????MyColor?=?Color.SkyBlue;
168 ????????????????return?MyColor;
169 ????????????????case?7:
170 ????????????????MyColor?=?Color.DeepPink;
171 ????????????????return?MyColor;
172 ????????????????case?8:
173 ????????????????MyColor?=?Color.Azure;
174 ????????????????return?MyColor;
175 ????????????????case?9:
176 ????????????????MyColor?=?Color.Brown;
177 ????????????????return?MyColor;
178 ????????????????case?10:
179 ????????????????MyColor?=?Color.Pink;
180 ????????????????return?MyColor;
181 ????????????????case?11:
182 ????????????????MyColor?=?Color.BurlyWood;
183 ????????????????return?MyColor;
184 ????????????????case?12:
185 ????????????????MyColor?=?Color.Chartreuse;
186 ????????????????return?MyColor;
187 ????????????????default:
188 ????????????????MyColor?=?Color.Pink;
189 ????????????????return?MyColor;
190????????????}
191????????}
192
193????}
194}
195
本文就是介紹在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數據庫名稱為"db2.mdb",在此數據庫中只定義了一張數據表"MonthSale",此表的結構如表01所示:
| 字段名稱 | 類型 | 說明 |
| ID | 自動編號 | 主鍵 ,遞增 |
| YF | 數字 | 銷售月份 |
| SL | 數字 | 銷量 |
在定義完"db2.mdb"數據庫中的"MonthSale"數據表后,在MonthSale數據表中按照表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 |
在MonthSale數據表中添加完這12條記錄后,保存"db2.mdb"數據庫到C盤的根目錄中。
三.ASP.NET頁面中實現數據Bar圖的關鍵步驟及其實現方法:
在ASP.NET頁面中實現數據Bar圖首先必須解決二大問題:
(1).首先要解決在ASP.NET頁面中實現數據庫連接和從數據庫中讀取數據的方法。
程序要實現從數據庫中一條條的讀取數據,則要使用OleDbDataReader類,OleDbDataReader類提供了從數據庫中逐條讀取數據的方法。下面代碼是連接C盤根目錄下的"db2.mdb"數據庫,逐條讀取MonthSale數據表中的記錄,并把數據存放到定義的二個數組中:
?1string?sRouter?=?"c:\\db2.mdb"?;
?2????????????//獲得當前Access數據庫在服務器端的絕對路徑
?3
?4????????????string?strCon?=?"?Provider?=?Microsoft.Jet.OLEDB.4.0;?Data?Source?=?"?+?sRouter?;
?5????????????//創建一個數據庫連接
?6
?7????????????OleDbConnection?myConn?=?new?OleDbConnection?(?strCon?)?;
?8????????????string?strCom?=?"?SELECT?YF?,SL?FROM?MonthSale?ORDER?BY?YF"?;
?9????????????myConn.Open?(?)?;
10????????????OleDbCommand?myCommand?=?new?OleDbCommand?(?strCom?,?myConn?)?;
11????????????OleDbDataReader?myOleDbDataReader?=?myCommand.ExecuteReader?(?)?;
12????????????//創建OleDbDataReader實例,并以此實例來獲取數據庫中各條記錄數據
13
14????????????int?[?]?iXiaoSH?=?new?int?[?12?]?;
15????????????//定義一個數組,用以存放從數據庫中讀取的銷售數據
16
17????????????string?[?]?sMoth?=?new?string?[?12?]?;
18????????????//定義一個數組,用以存放從數據庫中讀取的銷售月份
19
20????????????int?iIndex?=?0?;
21????????????while?(?myOleDbDataReader.Read?(?)?)?
22????????????{
23????????????????iXiaoSH?[?iIndex?]?=?myOleDbDataReader.GetInt32?(?1?)?;
24????????????????sMoth?[?iIndex?]?=?myOleDbDataReader.GetInt32?(?0?)?.?ToString?(?)?+?"月"?;
25????????????????iIndex++?;
26????????????}
27????????????//讀取Table01數據表中的各條數據,并存放在先前定義的二個數組中
28
29????????????myConn?.?Close?(?)?;
30????????????myOleDbDataReader?.?Close?(?)?;
31????????????//關閉各種資源
(2).根據得到數據,繪制圖片,并顯示出來:
通過第一步,已經把從數據庫中的讀取的數據存放到"iXiaoSH"和"sMoth"數組中。下面就要解決依據這些數據繪制出Bar圖?首先先了解一下在ASP.NET頁面中將要實現的數據Bar圖的模樣。具體可如圖01所示:
圖01:在ASP.NET中實現的數據Bar圖
程序中把圖01所示各個元素,按照區域分成了五個部分,這五個部分將在后面介紹的程序中分別實現:
1. 構建整個圖片
首先要創建一Bitmap實例,并以此來構建一個Graphics實例,Graphics實例提供了各種繪制方法,這樣才能按照數據的要求在Bitmap實例上繪制各種圖形。下面代碼是在ASP.NET中創建Bitmap實例,并以此實例來構建 Graphics實例的具體方法:
1Bitmap?bm?=?new?Bitmap?(?600?,?250?)?;
2????????????//創建一個長度為600,寬帶為250的Bitmap實例
3
4????????????Graphics?g?;
5????????????g?=?Graphics.FromImage?(?bm?)?;
6????????????//由此Bitmap實例創建Graphic實例
7
8????????????g?.?Clear?(?Color.Snow)?;
9????????????//用Snow色彩為背景色填充此繪畫圖面2. 圖01中的標題部分文字:
這是通過Graphics實例中提供的DrawString方法以指定的字體、顏色、在指定的位置繪制指定的字符串。下面代碼的作用是繪制圖01中標題:
1g?.?DrawString?(?"?××公司××××年度銷售情況統計表"?,?new?Font?(?"黑體"?,?16?)?,?Brushes?.?Black?,?new?Point?(?5?,?5?)?)?;
2????????????//在繪畫圖面的指定位置,以指定的字體、指定的顏色繪制指定的字符串。即為圖表標題
33. 圖01中的提示區域,即圖01中的右上角顯示的內容:
要繪制這部分內容首先要定位,可以把這部分要繪制的內容分成三個小部分:
其一,是圖01中的"單位:萬套"文字,這部分處理起來比較簡單,當選定要在圖片中輸出的文字坐標后,調用Graphics實例中提供的DrawString方法就可以了;
其二,是繪制圖01中的小方塊,首先要調用Graphics實例中的DrawRectangle方法在指定位置,以指定的顏色,繪制指定大小的方塊,然后再條約Graphics實例中的FillRectangle填充這個小方塊就完成了;
其三,是繪制小方塊右邊的文字。同樣要使用Graphics實例中提供的DrawString方法,只不過位置坐標和字體要進行相應改變罷了。下面代碼功能是繪制圖01右上角顯示的內容:
?1//以下代碼是是實現圖右上部
?2????????????Point?myRec?=?new?Point?(?535?,?30?)?;
?3????????????Point?myDec?=?new?Point?(?560?,?26?)?;
?4
?5????????????//以上是在圖01中為下面繪制定位
?6????????????g?.?DrawString?(?"單位:萬套"?,?new?Font?(?"宋體"?,?9?)?,?Brushes?.?Black?,?new?Point?(?525?,?12?)?)?;
?7???
?8???
?9????????????for?(?int?i?=?0?;?i?<?sMoth.Length?;?i++?)?
10????????????{
11????????????????g?.?DrawRectangle?(?Pens.Black?,?myRec?.?X?,?myRec?.?Y?,?20?,?10?)?;
12????????????????//繪制小方塊
13
14????????????????g?.?FillRectangle?(?new?SolidBrush?(?GetColor?(?i?)?)?,?myRec.X?,?myRec.Y?,?20?,?10?)?;
15????????????????//填充小方塊
16
17????????????????g?.?DrawString?(?sMoth?[?i?]?.?ToString?(?)?,?new?Font?(?"宋體"?,?9?)?,?Brushes?.?Black?,?myDec?)?;
18????????????????//繪制小方塊右邊的文字
19
20????????????????myRec?.?Y?+=?15?;
21????????????????myDec?.?Y?+=?15?;
22????????????}
4. 根據從數據庫中讀取的數據,繪制數據Bar圖:
此部分與第三部分比較類似,最主要的區別在于,繪制的位置不相同,下面代碼是在圖01中繪制數據Bar圖,并提示Bar圖所代表的數量:
?
?1//以下代碼是繪制Bar圖,及其銷售數量?2????????????int?iBarWidth?=?40?;
?3????????????int?scale?=?10?;
?4????????????for?(?int?i?=?0?;?i?<?iXiaoSH?.?Length?;?i++?)?
?5????????????{
?6????????????????g?.?DrawRectangle?(?Pens.Black,?(?i?*?iBarWidth?)?+?15?,?250?-?(?iXiaoSH?[?i?]?*?scale?)?,?20?,?(?iXiaoSH?[?i?]?*?scale?)?+?5?)?;
?7????????????????//繪制Bar圖
?8
?9????????????????g?.?FillRectangle?(?new?SolidBrush?(GetColor?(?i?))?,?(?i?*?iBarWidth?)?+?15?,?250?-?(?iXiaoSH?[?i?]?*?scale?)?,?20?,?(?iXiaoSH?[?i?]?*?scale?)?+?5?)?;
10????????????????//以指定的色彩填充Bar圖
11
12????????????????g?.?DrawString?(?iXiaoSH?[?i?]?.?ToString?(?)?,?new?Font?(?"宋體"?,?9?)?,?Brushes?.?Black?,?(?i?*?iBarWidth?)?+?20?,?235?-?(?iXiaoSH?[?i?]?*?scale?)?)?;
13????????????????//顯示Bar圖代表的數據
14????????????}5. 繪制圖片邊框,并形成Jpeg文件格式在客戶端顯示:
繪制圖片邊框,使用的Graphics實例中的DrawRectangle方法。至于采用Jpeg格式文件在客戶端顯示,是因為Jpeg文件占用的空間較小,利于網絡傳送。下面代碼是繪制圖01中的邊框,并形成Jpeg文件:
1//以下代碼是繪制邊框,并形成Jpeg文件,供瀏覽器顯示出來
2????????????Pen?p?=?new?Pen?(?Color.Black?,?2?)?;
3????????????g?.?DrawRectangle?(?p?,?1?,?1?,?598?,?248?)?;
4????????????bm.Save?(?Response?.?OutputStream?,?ImageFormat.Gif)?;
四.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就會在當前項目文件所在目錄中建立一個名稱為"WebBarDemo"文件夾,里面存放是此項目的項目文件,項目中的其他文件存放的位置是計算機Internet信息服務的默認的Web站點所在的目錄中新建的一個名稱為"WebBarDemo"的文件夾中。具體如圖02所示:
圖02:新建一個ASP.NET項目對話框
6. 把Visual Studio .Net的當前窗口切換到WebForm的代碼編輯窗口,即:WebForm1.aspx.cs文件的編輯窗口。
7. 在WebForm1.aspx.cs文件首部,用下列代碼替換WebForm1.aspx.cs中導入命名空間的代碼
1//下面程序中使用的ImageFormat類所在的命名空間
2using?System.Drawing.Imaging;
3//下面程序中使用到關于數據庫方面的類所在的命名空間
4using?System.Data.OleDb; 8. WebForm1.aspx.cs文件中的Page_Load事件處理代碼中添加下列代碼,下列代碼的作用是打開數據庫,讀取數據,并以此數據形成數據Bar圖:
?1private?void?Page_Load(object?sender,?System.EventArgs?e)
?2????????{
?3????????????//?在此處放置用戶代碼以初始化頁面
?4
?5????????????string?sRouter?=?"c:\\db2.mdb"?;
?6????????????//獲得當前Access數據庫在服務器端的絕對路徑
?7
?8????????????string?strCon?=?"?Provider?=?Microsoft.Jet.OLEDB.4.0;?Data?Source?=?"?+?sRouter?;
?9????????????//創建一個數據庫連接
10
11????????????OleDbConnection?myConn?=?new?OleDbConnection?(?strCon?)?;
12????????????string?strCom?=?"?SELECT?YF?,SL?FROM?MonthSale?ORDER?BY?YF"?;
13????????????myConn.Open?(?)?;
14????????????OleDbCommand?myCommand?=?new?OleDbCommand?(?strCom?,?myConn?)?;
15????????????OleDbDataReader?myOleDbDataReader?=?myCommand.ExecuteReader?(?)?;
16????????????//創建OleDbDataReader實例,并以此實例來獲取數據庫中各條記錄數據
17
18????????????int?[?]?iXiaoSH?=?new?int?[?12?]?;
19????????????//定義一個數組,用以存放從數據庫中讀取的銷售數據
20
21????????????string?[?]?sMoth?=?new?string?[?12?]?;
22????????????//定義一個數組,用以存放從數據庫中讀取的銷售月份
23
24????????????int?iIndex?=?0?;
25????????????while?(?myOleDbDataReader.Read?(?)?)?
26????????????{
27????????????????iXiaoSH?[?iIndex?]?=?myOleDbDataReader.GetInt32?(?1?)?;
28????????????????sMoth?[?iIndex?]?=?myOleDbDataReader.GetInt32?(?0?)?.?ToString?(?)?+?"月"?;
29????????????????iIndex++?;
30????????????}
31????????????//讀取Table01數據表中的各條數據,并存放在先前定義的二個數組中
32
33????????????myConn?.?Close?(?)?;
34????????????myOleDbDataReader?.?Close?(?)?;
35????????????//關閉各種資源
36
37????????????Bitmap?bm?=?new?Bitmap?(?600?,?250?)?;
38????????????//創建一個長度為600,寬帶為250的Bitmap實例
39
40????????????Graphics?g?;
41????????????g?=?Graphics.FromImage?(?bm?)?;
42????????????//由此Bitmap實例創建Graphic實例
43
44????????????g?.?Clear?(?Color.Snow)?;
45????????????//用Snow色彩為背景色填充此繪畫圖面
46
47????????????g?.?DrawString?(?"?××公司××××年度銷售情況統計表"?,?new?Font?(?"黑體"?,?16?)?,?Brushes?.?Black?,?new?Point?(?5?,?5?)?)?;
48????????????//在繪畫圖面的指定位置,以指定的字體、指定的顏色繪制指定的字符串。即為圖表標題
49
50????????????//以下代碼是是實現圖右上部
51????????????Point?myRec?=?new?Point?(?535?,?30?)?;
52????????????Point?myDec?=?new?Point?(?560?,?26?)?;
53
54????????????//以上是在圖01中為下面繪制定位
55????????????g?.?DrawString?(?"單位:萬套"?,?new?Font?(?"宋體"?,?9?)?,?Brushes?.?Black?,?new?Point?(?525?,?12?)?)?;
56???
57???
58????????????for?(?int?i?=?0?;?i?<?sMoth.Length?;?i++?)?
59????????????{
60????????????????g?.?DrawRectangle?(?Pens.Black?,?myRec?.?X?,?myRec?.?Y?,?20?,?10?)?;
61????????????????//繪制小方塊
62
63????????????????g?.?FillRectangle?(?new?SolidBrush?(?GetColor?(?i?)?)?,?myRec.X?,?myRec.Y?,?20?,?10?)?;
64????????????????//填充小方塊
65
66????????????????g?.?DrawString?(?sMoth?[?i?]?.?ToString?(?)?,?new?Font?(?"宋體"?,?9?)?,?Brushes?.?Black?,?myDec?)?;
67????????????????//繪制小方塊右邊的文字
68
69????????????????myRec?.?Y?+=?15?;
70????????????????myDec?.?Y?+=?15?;
71????????????}
72
73????????????//以下代碼是繪制Bar圖,及其銷售數量
74????????????int?iBarWidth?=?40?;
75????????????int?scale?=?10?;
76????????????for?(?int?i?=?0?;?i?<?iXiaoSH?.?Length?;?i++?)?
77????????????{
78????????????????g?.?DrawRectangle?(?Pens.Black,?(?i?*?iBarWidth?)?+?15?,?250?-?(?iXiaoSH?[?i?]?*?scale?)?,?20?,?(?iXiaoSH?[?i?]?*?scale?)?+?5?)?;
79????????????????//繪制Bar圖
80
81????????????????g?.?FillRectangle?(?new?SolidBrush?(GetColor?(?i?))?,?(?i?*?iBarWidth?)?+?15?,?250?-?(?iXiaoSH?[?i?]?*?scale?)?,?20?,?(?iXiaoSH?[?i?]?*?scale?)?+?5?)?;
82????????????????//以指定的色彩填充Bar圖
83
84????????????????g?.?DrawString?(?iXiaoSH?[?i?]?.?ToString?(?)?,?new?Font?(?"宋體"?,?9?)?,?Brushes?.?Black?,?(?i?*?iBarWidth?)?+?20?,?235?-?(?iXiaoSH?[?i?]?*?scale?)?)?;
85????????????????//顯示Bar圖代表的數據
86????????????}
87
88????????????//以下代碼是繪制邊框,并形成Jpeg文件,供瀏覽器顯示出來
89????????????Pen?p?=?new?Pen?(?Color.Black?,?2?)?;
90????????????g?.?DrawRectangle?(?p?,?1?,?1?,?598?,?248?)?;
91????????????bm.Save?(?Response?.?OutputStream?,?ImageFormat.Gif)?;
92????????}
9. WebForm1.aspx.cs文件中的InitializeComponent過程之后,添加下列代碼,下列代碼的作用是定義一個名稱為GetColor函數,此函數的功能根據索引號得到相應的系統顏色:
?1/**////?<summary>
?2????????///?獲取顏色
?3????????///?</summary>
?4????????///?<param?name="itemIndex">數組的索引</param>
?5????????///?<returns></returns>
?6????????private?Color?GetColor?(?int?itemIndex?)?
?7????????{
?8 ????????????Color?MyColor?;
?9 ????????????int?i?=?itemIndex?;
10????????????switch?(i)?
11 ????????????{
12 ????????????????case?0?:
13 ????????????????MyColor?=?Color.Green;
14 ????????????????return?MyColor;
15 ????????????????case?1?:
16 ????????????????MyColor?=?Color.Red;
17 ?????????????????return?MyColor;
18 ????????????????case?2:
19 ????????????????MyColor?=?Color.Yellow;
20 ????????????????return?MyColor;
21 ????????????????case?3?:
22 ????????????????MyColor?=?Color.Blue;
23 ????????????????return?MyColor;
24 ????????????????case?4?:
25 ????????????????MyColor?=?Color.Orange;
26 ????????????????return?MyColor;
27??????? ????????case?5?:
28 ????????????????MyColor?=?Color.Aqua;
29 ????????????????return?MyColor;
30 ????????????????case?6:
31 ????????????????MyColor?=?Color.SkyBlue;
32 ????????????????return?MyColor;
33 ????????????????case?7:
34 ????????????????MyColor?=?Color.DeepPink;
35 ????????????????return?MyColor;
36 ????????????????case?8:
37 ????????????????MyColor?=?Color.Azure;
38 ????????????????return?MyColor;
39 ????????????????case?9:
40 ????????????????MyColor?=?Color.Brown;
41 ????????????????return?MyColor;
42 ????????????????case?10:
43 ????????????????MyColor?=?Color.Pink;
44 ????????????????return?MyColor;
45 ????????????????case?11:
46 ????????????????MyColor?=?Color.BurlyWood;
47 ????????????????return?MyColor;
48 ????????????????case?12:
49 ????????????????MyColor?=?Color.Chartreuse;
50 ????????????????return?MyColor;
51 ????????????????default:
52 ????????????????MyColor?=?Color.Pink;
53 ????????????????return?MyColor;
54????????????}
55????????}
10. 至此,在上述步驟都正確執行后,在ASP.NET頁面中實現數據Bar圖的全部工作就完成了。在確定上面建立的Access數據庫"db.mdb"位于C盤的根目錄中之后,單擊快捷鍵F5,就可以得到如圖01所示的數據Bar圖了。
五.總結:
在ASP.NET頁面中實現各種圖表,其所使用的就是ASP.NET的繪圖功能,而這一功能是ASP.NET的前一個版本所不具備的。上面的這些介紹,不僅介紹了在ASP.NET繪制各種圖片的方法,還介紹了數據庫連接和從數據庫中逐條讀取記錄的方法。這些方法對您了解和掌握在ASP.NET中操作數據庫是非常有用的。
完整的例子程序:
??1using?System;
??2using?System.Collections;
??3using?System.ComponentModel;
??4using?System.Data;
??5using?System.Drawing;
??6using?System.Web;
??7using?System.Web.SessionState;
??8using?System.Web.UI;
??9using?System.Web.UI.WebControls;
?10using?System.Web.UI.HtmlControls;
?11
?12//下面程序中使用的ImageFormat類所在的命名空間
?13using?System.Drawing.Imaging;
?14//下面程序中使用到關于數據庫方面的類所在的命名空間
?15using?System.Data.OleDb;
?16
?17namespace?WebBarDemo
?18{
?19????/**////?<summary>
?20????///?WebForm1?的摘要說明。
?21????///?</summary>
?22????public?class?WebForm1?:?System.Web.UI.Page
?23????{
?24????????private?void?Page_Load(object?sender,?System.EventArgs?e)
?25????????{
?26????????????//?在此處放置用戶代碼以初始化頁面
?27
?28????????????string?sRouter?=?"c:\\db2.mdb"?;
?29????????????//獲得當前Access數據庫在服務器端的絕對路徑
?30
?31????????????string?strCon?=?"?Provider?=?Microsoft.Jet.OLEDB.4.0;?Data?Source?=?"?+?sRouter?;
?32????????????//創建一個數據庫連接
?33
?34????????????OleDbConnection?myConn?=?new?OleDbConnection?(?strCon?)?;
?35????????????string?strCom?=?"?SELECT?YF?,SL?FROM?MonthSale?ORDER?BY?YF"?;
?36????????????myConn.Open?(?)?;
?37????????????OleDbCommand?myCommand?=?new?OleDbCommand?(?strCom?,?myConn?)?;
?38????????????OleDbDataReader?myOleDbDataReader?=?myCommand.ExecuteReader?(?)?;
?39????????????//創建OleDbDataReader實例,并以此實例來獲取數據庫中各條記錄數據
?40
?41????????????int?[?]?iXiaoSH?=?new?int?[?12?]?;
?42????????????//定義一個數組,用以存放從數據庫中讀取的銷售數據
?43
?44????????????string?[?]?sMoth?=?new?string?[?12?]?;
?45????????????//定義一個數組,用以存放從數據庫中讀取的銷售月份
?46
?47????????????int?iIndex?=?0?;
?48????????????while?(?myOleDbDataReader.Read?(?)?)?
?49????????????{
?50????????????????iXiaoSH?[?iIndex?]?=?myOleDbDataReader.GetInt32?(?1?)?;
?51????????????????sMoth?[?iIndex?]?=?myOleDbDataReader.GetInt32?(?0?)?.?ToString?(?)?+?"月"?;
?52????????????????iIndex++?;
?53????????????}
?54????????????//讀取Table01數據表中的各條數據,并存放在先前定義的二個數組中
?55
?56????????????myConn?.?Close?(?)?;
?57????????????myOleDbDataReader?.?Close?(?)?;
?58????????????//關閉各種資源
?59
?60????????????Bitmap?bm?=?new?Bitmap?(?600?,?250?)?;
?61????????????//創建一個長度為600,寬帶為250的Bitmap實例
?62
?63????????????Graphics?g?;
?64????????????g?=?Graphics.FromImage?(?bm?)?;
?65????????????//由此Bitmap實例創建Graphic實例
?66
?67????????????g?.?Clear?(?Color.Snow)?;
?68????????????//用Snow色彩為背景色填充此繪畫圖面
?69
?70????????????g?.?DrawString?(?"?××公司××××年度銷售情況統計表"?,?new?Font?(?"黑體"?,?16?)?,?Brushes?.?Black?,?new?Point?(?5?,?5?)?)?;
?71????????????//在繪畫圖面的指定位置,以指定的字體、指定的顏色繪制指定的字符串。即為圖表標題
?72
?73????????????//以下代碼是是實現圖右上部
?74????????????Point?myRec?=?new?Point?(?535?,?30?)?;
?75????????????Point?myDec?=?new?Point?(?560?,?26?)?;
?76
?77????????????//以上是在圖01中為下面繪制定位
?78????????????g?.?DrawString?(?"單位:萬套"?,?new?Font?(?"宋體"?,?9?)?,?Brushes?.?Black?,?new?Point?(?525?,?12?)?)?;
?79???
?80???
?81????????????for?(?int?i?=?0?;?i?<?sMoth.Length?;?i++?)?
?82????????????{
?83????????????????g?.?DrawRectangle?(?Pens.Black?,?myRec?.?X?,?myRec?.?Y?,?20?,?10?)?;
?84????????????????//繪制小方塊
?85
?86????????????????g?.?FillRectangle?(?new?SolidBrush?(?GetColor?(?i?)?)?,?myRec.X?,?myRec.Y?,?20?,?10?)?;
?87????????????????//填充小方塊
?88
?89????????????????g?.?DrawString?(?sMoth?[?i?]?.?ToString?(?)?,?new?Font?(?"宋體"?,?9?)?,?Brushes?.?Black?,?myDec?)?;
?90????????????????//繪制小方塊右邊的文字
?91
?92????????????????myRec?.?Y?+=?15?;
?93????????????????myDec?.?Y?+=?15?;
?94????????????}
?95
?96????????????//以下代碼是繪制Bar圖,及其銷售數量
?97????????????int?iBarWidth?=?40?;
?98????????????int?scale?=?10?;
?99????????????for?(?int?i?=?0?;?i?<?iXiaoSH?.?Length?;?i++?)?
100????????????{
101????????????????g?.?DrawRectangle?(?Pens.Black,?(?i?*?iBarWidth?)?+?15?,?250?-?(?iXiaoSH?[?i?]?*?scale?)?,?20?,?(?iXiaoSH?[?i?]?*?scale?)?+?5?)?;
102????????????????//繪制Bar圖
103
104????????????????g?.?FillRectangle?(?new?SolidBrush?(GetColor?(?i?))?,?(?i?*?iBarWidth?)?+?15?,?250?-?(?iXiaoSH?[?i?]?*?scale?)?,?20?,?(?iXiaoSH?[?i?]?*?scale?)?+?5?)?;
105????????????????//以指定的色彩填充Bar圖
106
107????????????????g?.?DrawString?(?iXiaoSH?[?i?]?.?ToString?(?)?,?new?Font?(?"宋體"?,?9?)?,?Brushes?.?Black?,?(?i?*?iBarWidth?)?+?20?,?235?-?(?iXiaoSH?[?i?]?*?scale?)?)?;
108????????????????//顯示Bar圖代表的數據
109????????????}
110
111????????????//以下代碼是繪制邊框,并形成Jpeg文件,供瀏覽器顯示出來
112????????????Pen?p?=?new?Pen?(?Color.Black?,?2?)?;
113????????????g?.?DrawRectangle?(?p?,?1?,?1?,?598?,?248?)?;
114????????????bm.Save?(?Response?.?OutputStream?,?ImageFormat.Gif)?;
115????????}
116
117????????Web?窗體設計器生成的代碼#region?Web?窗體設計器生成的代碼
118????????override?protected?void?OnInit(EventArgs?e)
119????????{
120????????????//
121????????????//?CODEGEN:?該調用是?ASP.NET?Web?窗體設計器所必需的。
122????????????//
123????????????InitializeComponent();
124????????????base.OnInit(e);
125????????}
126????????
127????????/**////?<summary>
128????????///?設計器支持所需的方法?-?不要使用代碼編輯器修改
129????????///?此方法的內容。
130????????///?</summary>
131????????private?void?InitializeComponent()
132????????{????
133????????????this.Load?+=?new?System.EventHandler(this.Page_Load);
134????????}
135????????#endregion
136????????
137????????/**////?<summary>
138????????///?獲取顏色
139????????///?</summary>
140????????///?<param?name="itemIndex">數組的索引</param>
141????????///?<returns></returns>
142????????private?Color?GetColor?(?int?itemIndex?)?
143????????{
144 ????????????Color?MyColor?;
145 ????????????int?i?=?itemIndex?;
146????????????switch?(i)?
147 ????????????{
148 ????????????????case?0?:
149 ????????????????MyColor?=?Color.Green;
150 ????????????????return?MyColor;
151 ????????????????case?1?:
152 ????????????????MyColor?=?Color.Red;
153 ?????????????????return?MyColor;
154 ????????????????case?2:
155 ????????????????MyColor?=?Color.Yellow;
156 ????????????????return?MyColor;
157 ????????????????case?3?:
158 ????????????????MyColor?=?Color.Blue;
159 ????????????????return?MyColor;
160 ????????????????case?4?:
161 ????????????????MyColor?=?Color.Orange;
162 ????????????????return?MyColor;
163??????? ????????case?5?:
164 ????????????????MyColor?=?Color.Aqua;
165 ????????????????return?MyColor;
166 ????????????????case?6:
167 ????????????????MyColor?=?Color.SkyBlue;
168 ????????????????return?MyColor;
169 ????????????????case?7:
170 ????????????????MyColor?=?Color.DeepPink;
171 ????????????????return?MyColor;
172 ????????????????case?8:
173 ????????????????MyColor?=?Color.Azure;
174 ????????????????return?MyColor;
175 ????????????????case?9:
176 ????????????????MyColor?=?Color.Brown;
177 ????????????????return?MyColor;
178 ????????????????case?10:
179 ????????????????MyColor?=?Color.Pink;
180 ????????????????return?MyColor;
181 ????????????????case?11:
182 ????????????????MyColor?=?Color.BurlyWood;
183 ????????????????return?MyColor;
184 ????????????????case?12:
185 ????????????????MyColor?=?Color.Chartreuse;
186 ????????????????return?MyColor;
187 ????????????????default:
188 ????????????????MyColor?=?Color.Pink;
189 ????????????????return?MyColor;
190????????????}
191????????}
192
193????}
194}
195
總結
以上是生活随笔為你收集整理的在ASP.NET页面中实现数据柱状图的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 数据到入到excel和打印功能
- 下一篇: 在Asp.net页面中实现数据饼图