在ASP.NET頁面中實現資料棒圖

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] 下一頁