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

棒图有时又称为Bar图在我的上一篇文章《在ASPNET实现数据图表》中已经介绍了在浏览器看到的图表一般都是图片文件 那么在ASPNET中是否也可以生成这些图表？答案是肯定的因为在ASPNET中拥有了一个新功能绘图功能通过此功能就能够按照要实现的图表的模样来绘制最后在客户端的浏览器中形成一个图片从而显示出图表来

本文就在上一篇文章的基础上进一步介绍在ASPNET页面中实现Bar图的具体方法希望本篇文章不仅能够让您领会到ASPNET中强大的绘图功能更希望能够弥补上一篇文章的一个缺憾就是上一篇实现的图表的数据来自固定数值而我们知道图表只有在和数据库关联以后才能够显示出更强大的优势下面就来介绍在ASPNET页面中从数据库中提起数据并以此数据形成Bar图的具体实现方法

一．本文程序设计和运行的软件环境

（）微软公司视窗服务器版

（）Visual Studio Net正式版Net FrameWork SDK版本号

（）MDAC （Microsoft Data Acess Component）以上版本

二．建立数据源

为了方便起见本文选择的数据库类型为本地数据库Access 如果你使用的是其他数据库类型只需对下面介绍的程序中的关于数据库连接的代码进行相应的修改就可以了Access数据库名称为dbmdb在此数据库中只定义了一张数据表Table此表的结构如表所示

            字段名称      类型       说明              ID      自动编号       主键 递增              YF       数字      销售月份              SL      数字       销量      表Table数据表的结构

在定义完dbmdb数据库中的Table数据表后在Table数据表中按照表所示添加记录

            ID       YF       SL                                                                                                                                                                                                                                                                                                                                                  

表Table数据表中的记录情况

在Table数据表中添加完这条记录后保存dbmdb数据库到C盘的根目录中

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

在ASPNET页面中实现数据Bar图首先必须解决二大问题

（）首先要解决在ASPNET页面中实现数据库连接和从数据库中读取数据的方法

程序要实现从数据库中一条条的读取数据则要使用OleDbDataReader类OleDbDataReader类提供了从数据库中逐条读取数据的方法下面代码是连接C盘根目录下的dbmdb数据库逐条读取Table数据表中的记录并把数据存放到定义的二个数组中

          string sRouter = c:\\dbmdb ;

//获得当前Access数据库在服务器端的绝对路径

string strCon = Provider = MicrosoftJetOLEDB; Data Source = + sRouter ;

//创建一个数据库连接

OleDbConnection myConn = new OleDbConnection ( strCon ) ;

string strCom = SELECT YF SL FROM Table ORDER BY YF ;

myConnOpen ( ) ;

OleDbCommand myCommand = new OleDbCommand ( strCom myConn ) ;

OleDbDataReader myOleDbDataReader = myCommandExecuteReader ( ) ;

//创建OleDbDataReader实例并以此实例来获取数据库中各条记录数据

int [ ] iXiaoSH = new int [ ] ;

//定义一个数组用以存放从数据库中读取的销售数据

string [ ] sMoth = new string [ ] ;

//定义一个数组用以存放从数据库中读取的销售月份

int iIndex = ;

while ( myOleDbDataReaderRead ( ) )

{

iXiaoSH [ iIndex ] = myOleDbDataReaderGetInt ( ) ;

sMoth [ iIndex ] = myOleDbDataReaderGetInt ( ) ToString ( ) + 月 ;

iIndex++ ;

}

//读取Table数据表中的各条数据并存放在先前定义的二个数组中

myConn Close ( ) ;

myOleDbDataReader Close ( ) ;

//关闭各种资源      

（）根据得到数据绘制图片并显示出来

通过第一步已经把从数据库中的读取的数据存放到iXiaoSH和sMoth数组中下面就要解决依据这些数据绘制出Bar图？首先先了解一下在ASPNET页面中将要实现的数据Bar图的模样具体可如图所示

图在ASPNET中实现的数据Bar图

程序中把图所示各个元素按照区域分成了五个部分这五个部分将在后面介绍的程序中分别实现

构建整个图片

首先要创建一Bitmap实例并以此来构建一个Graphics实例Graphics实例提供了各种绘制方法这样才能按照数据的要求在Bitmap实例上绘制各种图形下面代码是在ASPNET中创建Bitmap实例并以此实例来构建 Graphics实例的具体方法

          Bitmap bm = new Bitmap ( ) ;

//创建一个长度为宽带为的Bitmap实例

Graphics g ;

g = GraphicsFromImage ( bm ) ;

//由此Bitmap实例创建Graphic实例

g Clear ( Color Snow ) ;

//用Snow色彩为背景色填充此绘画图面      

图中的标题部分文字

这是通过Graphics实例中提供的DrawString方法以指定的字体颜色在指定的位置绘制指定的字符串下面代码的作用是绘制图中标题

          g DrawString ( ××公司××器件年度销售情况一览表 new Font ( 宋体 ) Brushes Black new Point ( ) ) ;

//在绘画图面的指定位置以指定的字体指定的颜色绘制指定的字符串即为图表标题      

图中的提示区域即图中的右上角显示的内容

要绘制这部分内容首先要定位可以把这部分要绘制的内容分成三个小部分

其一是图中的单位万套文字这部分处理起来比较简单当选定要在图片中输出的文字坐标后调用Graphics实例中提供的DrawString方法就可以了

其二是绘制图中的小方块首先要调用Graphics实例中的DrawRectangle方法在指定位置以指定的颜色绘制指定大小的方块然后再条约Graphics实例中的FillRectangle填充这个小方块就完成了

其三是绘制小方块右边的文字同样要使用Graphics实例中提供的DrawString方法只不过位置坐标和字体要进行相应改变罢了下面代码功能是绘制图右上角显示的内容

          Point myRec = new Point ( ) ;

Point myDec = new Point ( ) ;

//以上是在图中为下面绘制定位

g DrawString ( 单位万套 new Font ( 宋体 ) Brushes Black new Point ( ) ) ;

for ( int i = ; i < sMothLength ; i++ )

{

g DrawRectangle ( PensBlack myRec X myRec Y ) ;

//绘制小方块

g FillRectangle ( new SolidBrush ( GetColor ( i ) ) myRec X myRec Y ) ;

//填充小方块

g DrawString ( sMoth [ i ] ToString ( ) new Font ( 宋体 ) Brushes Black myDec ) ;

//绘制小方块右边的文字

myRec Y += ;

myDec Y += ;

}      

根据从数据库中读取的数据绘制数据Bar图

此部分与第三部分比较类似最主要的区别在于绘制的位置不相同下面代码是在图中绘制数据Bar图并提示Bar图所代表的数量

          int iBarWidth = ;

int scale = ;

for ( int i = ; i < iXiaoSH Length ; i++ )

{

g DrawRectangle ( PensBlack ( i * iBarWidth ) + ( iXiaoSH [ i ] * scale ) ( iXiaoSH [ i ] * scale ) + ) ;

//绘制Bar图

g FillRectangle ( new SolidBrush ( GetColor ( i ) ) ( i * iBarWidth ) + ( iXiaoSH [ i ] * scale ) ( iXiaoSH [ i ] * scale ) + ) ;

//以指定的色彩填充Bar图

g DrawString ( iXiaoSH [ i ] ToString ( ) new Font ( 宋体 ) Brushes Black ( i * iBarWidth ) + ( iXiaoSH [ i ] * scale ) ) ;

//显示Bar图代表的数据

}      

绘制图片边框并形成Jpeg文件格式在客户端显示

绘制图片边框使用的Graphics实例中的DrawRectangle方法至于采用Jpeg格式文件在客户端显示是因为Jpeg文件占用的空间较小利于网络传送下面代码是绘制图中的边框并形成Jpeg文件

          Pen p = new Pen ( ColorBlack ) ;

g DrawRectangle ( p ) ;

bmSave ( Response OutputStream ImageFormat Jpeg ) ;      

四．ASPNET页面中实现数据Bar图实现步骤

掌握了上面的关键步骤及其解决方法后在ASPNET实现数据Bar相对就容易许多了下面是ASPNET页面中实现数据Bar图的具体实现步骤在开发工具上选用的是Visual Stuido Net企业构建版采用的开发语言是C＃

启动Visual Studio Net

选择菜单【文件】|【新建】|【项目】后弹出【新建项目】对话框

将【项目类型】设置为【Visual C＃项目】

将【模板】设置为【ASPNET Web 应用程序】

在【位置】的文本框中输入//localhost/Bar然后单击【确定】按钮这样在Visual Studio Net就会在当前项目文件所在目录中建立一个名称为Bar文件夹里面存放是此项目的项目文件项目中的其他文件存放的位置是计算机Internet信息服务的默认的Web站点所在的目录中新建的一个名称为Bar的文件夹中具体如图所示

图新建一个ASPNET项目对话框

把Visual Studio Net的当前窗口切换到WebForm的代码编辑窗口即WebFormaspxcs文件的编辑窗口

在WebFormaspxcs文件首部用下列代码替换WebFormaspxcs中导入命名空间的代码

          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 ;

//下面程序中使用到关于数据库方面的类所在的命名空间      

WebFormaspxcs文件中的Page_Load事件处理代码中添加下列代码下列代码的作用是打开数据库读取数据并以此数据形成数据Bar图

            

string sRouter = c:\\dbmdb ;

//获得当前Access数据库在服务器端的绝对路径

string strCon = Provider = MicrosoftJetOLEDB; Data Source = + sRouter ;

//创建一个数据库连接

OleDbConnection myConn = new OleDbConnection ( strCon ) ;

string strCom = SELECT YF SL FROM Table ORDER BY YF ;

myConnOpen ( ) ;

OleDbCommand myCommand = new OleDbCommand ( strCom myConn ) ;

OleDbDataReader myOleDbDataReader = myCommandExecuteReader ( ) ;

//创建OleDbDataReader实例并以此实例来获取数据库中各条记录数据

int [ ] iXiaoSH = new int [ ] ;

//定义一个数组用以存放从数据库中读取的销售数据

string [ ] sMoth = new string [ ] ;

//定义一个数组用以存放从数据库中读取的销售月份

int iIndex = ;

while ( myOleDbDataReaderRead ( ) )

{

iXiaoSH [ iIndex ] = myOleDbDataReaderGetInt ( ) ;

sMoth [ iIndex ] = myOleDbDataReaderGetInt ( ) ToString ( ) + 月 ;

iIndex++ ;

}

//读取Table数据表中的各条数据并存放在先前定义的二个数组中

myConn Close ( ) ;

myOleDbDataReader Close ( ) ;

//关闭各种资源

Bitmap bm = new Bitmap ( ) ;

//创建一个长度为宽带为的Bitmap实例

Graphics g ;

g = GraphicsFromImage ( bm ) ;

//由此Bitmap实例创建Graphic实例

g Clear ( Color Snow ) ;

//用Snow色彩为背景色填充此绘画图面

g DrawString ( ××公司××器件年度销售情况一览表 new Font ( 宋体 ) Brushes Black new Point ( ) ) ;

                       

//在绘画图面的指定位置以指定的字体指定的颜色绘制指定的字符串即为图表标题

//以下代码是是实现图中的右上部

Point myRec = new Point ( ) ;

Point myDec = new Point ( ) ;

//以上是在图中为下面绘制定位

g DrawString ( 单位万套 new Font ( 宋体 ) Brushes Black new Point ( ) ) ;

for ( int i = ; i < sMothLength ; i++ )

{

g DrawRectangle ( PensBlack myRec X myRec Y ) ;

//绘制小方块

g FillRectangle ( new SolidBrush ( GetColor ( i ) ) myRec X myRec Y ) ;

//填充小方块

g DrawString ( sMoth [ i ] ToString ( ) new Font ( 宋体 ) Brushes Black myDec ) ;

//绘制小方块右边的文字

myRec Y += ;

myDec Y += ;

}

//以下代码是绘制图中的Bar图及其销售数量

int iBarWidth = ;

int scale = ;

for ( int i = ; i < iXiaoSH Length ; i++ )

{

g DrawRectangle ( PensBlack ( i * iBarWidth ) + ( iXiaoSH [ i ] * scale ) ( iXiaoSH [ i ] * scale ) + ) ;

//绘制Bar图

g FillRectangle ( new SolidBrush ( GetColor ( i ) ) ( i * iBarWidth ) + ( iXiaoSH [ i ] * scale ) ( iXiaoSH [ i ] * scale ) + ) ;

//以指定的色彩填充Bar图

g DrawString ( iXiaoSH [ i ] ToString ( ) new Font ( 宋体 ) Brushes Black ( i * iBarWidth ) + ( iXiaoSH [ i ] * scale ) ) ;

//显示Bar图代表的数据

}

//以下代码是绘制图中的边框并形成Jpeg文件供浏览器显示出来

Pen p = new Pen ( ColorBlack ) ;

g DrawRectangle ( p ) ;

bmSave ( Response OutputStream ImageFormat Jpeg ) ;

      

WebFormaspxcs文件中的InitializeComponent过程之后添加下列代码下列代码的作用是定义一个名称为GetColor函数此函数的功能根据索引号得到相应的系统颜色

            private Color GetColor ( int itemIndex )

{

Color MyColor ;

int i = itemIndex ;

switch ( i )

{

case :

MyColor = Color Cornsilk ;

return MyColor ;

case :

MyColor = Color Red ;

return MyColor ;

case :

MyColor = Color Yellow ;

return MyColor ;

case :

MyColor = Color Peru ;

return MyColor ;

case :

MyColor = Color Orange ;

return MyColor ;

case :

MyColor = Color Coral ;

return MyColor ;

case :

MyColor = Color Gray ;

return MyColor ;

case :

MyColor = Color Maroon ;

return MyColor ;

case :

MyColor = Color Azure ;

return MyColor ;

case :

MyColor = ColorAliceBlue ;

return MyColor ;

case :

MyColor = Color Bisque ;

return MyColor ;

case :

MyColor = Color BurlyWood ;

return MyColor ;

case :

MyColor = Color Chartreuse ;

return MyColor ;

default:

MyColor = Color Green ;

return MyColor ;

}

}      

至此在上述步骤都正确执行后在ASPNET页面中实现数据Bar图的全部工作就完成了在确定上面建立的Access数据库dbmdb位于C盘的根目录中之后单击快捷键F就可以得到如图所示的数据Bar图了

五．总结

在ASPNET页面中实现各种图表其所使用的就是ASPNET的绘图功能而这一功能是ASPNET的前一个版本所不具备的上面的这些介绍不仅介绍了在ASPNET绘制各种图片的方法还介绍了数据库连接和从数据库中逐条读取记录的方法这些方法对您了解和掌握在ASPNET中操作数据库是非常有用的在下一篇文章中将介绍浏览器中经常看到的另外一种图表饼图在ASPNET页面中的实现方法如果您感兴趣那就让我们下一讲再见吧！