日期:2012-03-01  浏览次数:20371 次

    棒图有时又称为"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. 构建整个图片