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：在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 ) ;
[1] [2] 下一页
