论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > Asp.net教程
Tag:静态页面,treeview,gridview,repeater,dataset,sqldatareader,ado.net,上传,三层,ajax,xml,留言本,新闻发布,商城,注入,存储过程,分页,安全,优化,xmlhttp,fso,jmail,application,session,防盗链,stream,无组件,组件,md5,乱码,缓存,加密,验证码,算法,cookies,ubb,正则表达式,水印,索引,日志,压缩,base64,url重写,控件,Web.config,JDBC,函数,内存,PDF,迁移,结构,破解,编译,配置,进程,分词,IIS,触发器,socket,form认证,登录,视频教程

ASP.NET教程:ASP.NET页面中实现数据棒图的方法二

文章类别:Asp.net | 发表日期:12-07-30

ASP.NET教程:ASP.NET页面中实现数据棒图的方法二


三、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图的模样。

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、标题中部分文字:
   
这是通过Graphics实例中提供的DrawString方法以指定的字体、颜色、在指定的位置绘制指定的字符串。下面代码的作用是绘制图01中标题:

g . DrawString ( " ××公司××器件2002年度销售情况一览表" , new Font ( "宋体" , 16 ) , Brushes . Black , new Point ( 5 , 5 ) ) ;
//在绘画图面的指定位置,以指定的字体、指定的颜色绘制指定的字符串。即为图表标题

3、提示区域,即图01中的右上角显示的内容:
   
要绘制这部分内容首先要定位,可以把这部分要绘制的内容分成三个小部分:
    a、是图01中的"单位:万套"文字,这部分处理起来比较简单,当选定要在图片中输出的文字坐标后,调用Graphics实例中提供的DrawString方法就可以了;
    b、是绘制图01中的小方块,首先要调用Graphics实例中的DrawRectangle方法在指定位置,以指定的颜色,绘制指定大小的方块,然后再条约Graphics实例中的FillRectangle填充这个小方块就完成了;
    c、是绘制小方块右边的文字。同样要使用Graphics实例中提供的DrawString方法,只不过位置坐标和字体要进行相应改变罢了。下面代码功能是绘制图右上角显示的内容:

Point myRec = new Point ( 535 , 30 ) ;
Point myDec = new Point ( 560 , 26 ) ;
//以上是为下面绘制定位
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图:
   
此部分与第三部分比较类似,最主要的区别在于,绘制的位置不相同,下面代码是绘制数据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"的文件夹中。

       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,就实现数据Bar图了。

五、总结
   
在ASP.NET页面中实现各种图表,其所使用的就是ASP.NET的绘图功能,而这一功能是ASP.NET的前一个版本所不具备的。上面的这些介绍,不仅介绍了在ASP.NET绘制各种图片的方法,还介绍了数据库连接和从数据库中逐条读取记录的方法,这些方法对大家了解和掌握在ASP.NET中操作数据库是非常有用的。


 

视频教程列表
文章教程搜索
 
Asp.net推荐教程
Asp.net热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058
处理 SSI 文件时出错