在ASP.NET页面中实现数据棒图

 

棒图有时又称为 "Bar" 图。在我的上一篇文章《在 ASP.NET 实现数据图表》中已经介绍了在浏览器看到的图表，一般都是图片文件。那么在 ASP.NET 中是否也可以生成这些图表？答案是肯定的，因为在 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 数据库名称为 "db.mdb" ，在此数据库中只定义了一张数据表 "Table01" ，此表的结构如表 01 所示：

字段名称	类型	说明
ID	自动编号	主键 ，递增
YF	数字	销售月份
SL	数字	销量

　　　　　　　　　表 01 ： Table01 数据表的结构

　　在定义完 "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

　　　　　　表 02 ： Table01 数据表中的记录情况

　　在 Table01 数据表中添加完这 12 条记录后，保存 "db.mdb" 数据库到 C 盘的根目录中。

三． ASP.NET 页面中实现数据 Bar 图的关键步骤及其实现方法：

　　在 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所示：

程序中把图 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所示：

6. 把 Visual Studio .Net 的当前窗口切换到 WebForm 的代码编辑窗口，即： WebForm1.aspx.cs 文件的编辑窗口。

　　 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 ; // 下面程序中使用到关于数据库方面的类所在的命名空间

8. WebForm1.aspx.cs 文件中的 Page_Load 事件处理代码中添加下列代码，下列代码的作用是打开数据库，读取数据，并以此数据形成数据 Bar 图：

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 页面中的实现方法。如果您感兴趣，那就让我们下一讲再见吧！