知识大全在ASP.NET页面中实现数据棒图

Posted 2022-07-18 知

篇首语：当筵意气临九霄，星离雨散不终朝。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全在ASP.NET页面中实现数据棒图相关的知识，希望对你有一定的参考价值。

在ASP.NET页面中实现数据棒图 以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！

棒图有时又称为 Bar 图在我的上一篇文章《在ASP NET实现数据图表》中已经介绍了在浏览器看到的图表一般都是图片文件那么在ASP NET中是否也可以生成这些图表？答案是肯定的因为在ASP NET中拥有了一个新功能绘图功能通过此功能就能够按照要实现的图表的模样来绘制最后在客户端的浏览器中形成一个图片从而显示出图表来　　本文就在上一篇文章的基础上进一步介绍在ASP NET页面中实现Bar图的具体方法希望本篇文章不仅能够让您领会到ASP NET中强大的绘图功能更希望能够弥补上一篇文章的一个缺憾就是上一篇实现的图表的数据来自固定数值而我们知道图表只有在和数据库关联以后才能够显示出更强大的优势下面就来介绍在ASP NET页面中从数据库中提起数据并以此数据形成Bar图的具体实现方法　　 一．本文程序设计和运行的软件环境 　　（）微软公司视窗服务器版　　（） Visual Studio Net正式版 Net FrameWork SDK版本号　　（） MDAC （Microsoft Data Acess Component）以上版本　　 二．建立数据源　　为了方便起见本文选择的数据库类型为本地数据库 Access 如果你使用的是其他数据库类型只需对下面介绍的程序中的关于数据库连接的代码进行相应的修改就可以了 Access数据库名称为 db mdb 在此数据库中只定义了一张数据表 Table 此表的结构如表所示字段名称类型说明 ID 自动编号主键递增 YF 数字销售月份 SL 数字销量　　　　　　　　　表 Table 数据表的结构　　在定义完 db mdb 数据库中的 Table 数据表后在Table 数据表中按照表所示添加记录 ID YF SL

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

　　三．ASP NET页面中实现数据Bar图的关键步骤及其实现方法 　　在ASP NET页面中实现数据Bar图首先必须解决二大问题　　（）首先要解决在ASP NET页面中实现数据库连接和从数据库中读取数据的方法　　程序要实现从数据库中一条条的读取数据则要使用OleDbDataReader类 OleDbDataReader类提供了从数据库中逐条读取数据的方法下面代码是连接C盘根目录下的 db mdb 数据库逐条读取Table 数据表中的记录并把数据存放到定义的二个数组中

　　 string sRouter = c:\\\\db mdb ;//获得当前Access数据库在服务器端的绝对路径string strCon = Provider = Microsoft Jet OLEDB ; Data Source = + sRouter ;//创建一个数据库连接OleDbConnection myConn = new OleDbConnection ( strCon ) ;string strCom = SELECT YF SL FROM Table ORDER BY YF ;myConn Open ( ) ;OleDbCommand myCommand = new OleDbCommand ( strCom myConn ) ;OleDbDataReader myOleDbDataReader = myCommand ExecuteReader ( ) ;//创建OleDbDataReader实例并以此实例来获取数据库中各条记录数据int [ ] iXiaoSH = new int [ ] ;//定义一个数组用以存放从数据库中读取的销售数据string [ ] sMoth = new string [ ] ;//定义一个数组用以存放从数据库中读取的销售月份int iIndex = ;while ( myOleDbDataReader Read ( ) ) 　iXiaoSH [ iIndex ] = myOleDbDataReader GetInt ( ) ;　sMoth [ iIndex ] = myOleDbDataReader GetInt ( ) ToString ( ) + 月 ;　iIndex++ ;//读取Table 数据表中的各条数据并存放在先前定义的二个数组中myConn Close ( ) ;myOleDbDataReader Close ( ) ;//关闭各种资源

　　（）根据得到数据绘制图片并显示出来　　通过第一步已经把从数据库中的读取的数据存放到 iXiaoSH 和 sMoth 数组中下面就要解决依据这些数据绘制出Bar图？首先先了解一下在ASP NET页面中将要实现的数据Bar图的模样具体可如图所示　　　　图在ASP NET中实现的数据Bar图　　程序中把图所示各个元素按照区域分成了五个部分这五个部分将在后面介绍的程序中分别实现

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

　　 Bitmap bm = new Bitmap ( ) ;//创建一个长度为宽带为的Bitmap实例Graphics g ;g = Graphics FromImage ( 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 < sMoth Length ; i++ ) g DrawRectangle ( Pens Black 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 ( Pens Black ( 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 ( Color Black ) ;g DrawRectangle ( p ) ;bm Save ( Response OutputStream ImageFormat Jpeg ) ;

　　四．ASP NET页面中实现数据Bar图实现步骤　　掌握了上面的关键步骤及其解决方法后在ASP NET实现数据Bar相对就容易许多了下面是ASP NET页面中实现数据Bar图的具体实现步骤在开发工具上选用的是Visual Stuido Net企业构建版采用的开发语言是C＃　　启动Visual Studio Net　　选择菜单【文件】|【新建】|【项目】后弹出【新建项目】对话框　　将【项目类型】设置为【Visual C＃项目】　　将【模板】设置为【ASP NET Web 应用程序】　　在【位置】的文本框中输入//localhost/Bar 然后单击【确定】按钮这样在Visual Studio Net就会在当前项目文件所在目录中建立一个名称为 Bar 文件夹里面存放是此项目的项目文件项目中的其他文件存放的位置是计算机Internet信息服务的默认的Web站点所在的目录中新建的一个名称为 Bar 的文件夹中具体如图所示　　　　　　图新建一个ASP NET项目对话框　　把Visual Studio Net的当前窗口切换到WebForm的代码编辑窗口即 WebForm aspx cs文件的编辑窗口　　在WebForm aspx cs文件首部用下列代码替换WebForm 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 ;//下面程序中使用到关于数据库方面的类所在的命名空间

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

　　string sRouter = c:\\\\db mdb ;//获得当前Access数据库在服务器端的绝对路径string strCon = Provider = Microsoft Jet OLEDB ; Data Source = + sRouter ;//创建一个数据库连接OleDbConnection myConn = new OleDbConnection ( strCon ) ;string strCom = SELECT YF SL FROM Table ORDER BY YF ;myConn Open ( ) ;OleDbCommand myCommand = new OleDbCommand ( strCom myConn ) ;OleDbDataReader myOleDbDataReader = myCommand ExecuteReader ( ) ;//创建OleDbDataReader实例并以此实例来获取数据库中各条记录数据int [ ] iXiaoSH = new int [ ] ;//定义一个数组用以存放从数据库中读取的销售数据string [ ] sMoth = new string [ ] ;//定义一个数组用以存放从数据库中读取的销售月份int iIndex = ;while ( myOleDbDataReader Read ( ) ) iXiaoSH [ iIndex ] = myOleDbDataReader GetInt ( ) ;sMoth [ iIndex ] = myOleDbDataReader GetInt ( ) ToString ( ) + 月 ;iIndex++ ;//读取Table 数据表中的各条数据并存放在先前定义的二个数组中myConn Close ( ) ;myOleDbDataReader Close ( ) ;//关闭各种资源Bitmap bm = new Bitmap ( ) ;//创建一个长度为宽带为的Bitmap实例Graphics g ;g = Graphics FromImage ( 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 < sMoth Length ; i++ ) g DrawRectangle ( Pens Black 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 ( Pens Black ( 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 ( Color Black ) ;g DrawRectangle ( p ) ;bm Save ( Response OutputStream ImageFormat Jpeg ) ;

　　 WebForm aspx cs文件中的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 = Color AliceBlue ;　　　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 ;　　　至此在上述步骤都正确执行后在ASP NET页面中实现数据Bar图的全部工作就完成了在确定上面建立的Access数据库 db mdb 位于C盘的根目录中之后单击快捷键F 就可以得到如图所示的数据Bar图了　　五．总结　　在ASP NET页面中实现各种图表其所使用的就是ASP NET的绘图功能而这一功能是ASP NET的前一个版本所不具备的上面的这些介绍不仅介绍了在ASP NET绘制各种图片的方法还介绍了数据库连接和从数据库中逐条读取记录的方法这些方法对您了解和掌握在ASP NET中操作数据库是非常有用的在下一篇文章中将介绍浏览器中经常看到的另外一种图表饼图在ASP NET页面中的实现方法如果您感兴趣那就让我们下一讲再见吧！ cha138/Article/program/net/201311/11633

知识大全 在ASP.NET页面中实现数据棒图

知识大全在ASP.NET页面中实现数据棒图