在ASP.NET中動態建立柱狀圖和餅圖

時間 2021-08-15

標籤 html web 數據庫數組框架編輯器 ide 函數 post 字體欄目 ASP 简体版

原文原文鏈接

本文來自： [url]http://www.webwoo.net/bc/bencandy-17-35292-1.htm[/url]，做者不詳。

    在應用程序開發中，咱們會常常遇到把從數據源動態取回的數據用統計圖表現出來，在Microsoft .net Framework出現以前，咱們採起的方法主要是編寫組件來完成這一任務。如今，利用Microsoft .NET Framework提供的豐富的GDI+類和對象能夠很輕鬆地實現這一功能。在本文中，咱們就來看看在ASP.NET中如何動態建立經常使用的柱狀圖和餅圖。數據源有許多種，在本文裏咱們就以數組來進行示例，但本例的方法很容易轉換成數據庫類型的數據源來進行。

  查看例子

  第一步：建立一個新的ASP.NET項目。

  打開Microsoft Visual Studio .NET，點擊「文件(File)」-「新建(New)」-「項目(Project)」，打開「新建項目(New Project)」對話框，在「項目類型(Project Types)」裏選擇「Visual Basic 項目(Projects)」，在「模板(Templates)」裏選擇「ASP.NET應用程序(Web Application)」，在應用程序地址裏輸入：[url]http://localhost/aspCharts[/url]，點擊「肯定(OK)」按鈕，Microsoft Visual Studio .NET將會自動在wwwroot目錄下建立一個名爲aspCharts的Web工程。

  第二步：爲默認起始頁編寫代碼（Aspxhttp://www.webwoo.net/upload_files/17/YwR9Xs10107.jpg）。

  咱們要在這個頁面裏顯示動態建立的圖形，打開Aspxhttp://www.webwoo.net/upload_files/17/YwR9Xs10107.jpg的標籤頁的「HTML」視圖，插入下面的代碼：



   <html>
   <body>
   <form id="Form1" method="post" runat="server">
   <table width="517" border="0" height="255">
   <tr>
   <td align="middle"><img src="http://www.webwoo.net/upload_files/17/YwR9Xs10107.jpg"></td>
   </tr>
   <tr>
   <td height="20" align="middle">ASP.NET 中動態建立圖形範例</td>
   </tr>
   </table>
   </form>
   </body>
  </html>

  第三步：添加名爲[url]http://www.webwoo.net/upload_files/17/YwR9Xs10107.jpg[/url]的Web窗體頁。

  打開「解決方案資源管理器(Solution Explorer)」，在「aspCharts項目」上點擊右鍵，選擇「添加(Add)」-「添加新項(Add New Item)」，彈出「添加新項(Add New Item)」對話框，在右邊的「模板」裏選擇「Web 窗體」，在底下的名字輸入框了輸入「[url]http://www.webwoo.net/upload_files/17/YwR9Xs10107.jpg[/url]」，點擊「打開」按鈕。

  第四步：爲「[url]http://www.webwoo.net/upload_files/17/YwR9Xs10107.jpg[/url]」Web 窗體頁添加代碼。

  在「[url]http://www.webwoo.net/upload_files/17/YwR9Xs10107.jpg[/url]」窗體上點擊右鍵，選擇「查看代碼(View Code)」，在代碼的第一行添加下面二行：




  Imports System.Drawing
  Imports System.Drawing.Imaging
  Public Class Chart
   Inherits System.Web.UI.Page

  #Region " Web 窗體設計器生成的代碼 "

   '該調用是 Web 窗體設計器所必需的。
   <System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent()

   End Sub

   Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init
   'CODEGEN: 此方法調用是 Web 窗體設計器所必需的
   '不要使用代碼編輯器修改它。
   InitializeComponent()
   End Sub

  #End Region

   '建立頁面事件
   Private Sub Page_Load(ByVal sender As System.Object, _
   ByVal e As System.EventArgs) Handles MyBase.Load

   '聲明整型變量i，
   Dim i As Integer

   '建立一個位圖對象，用來放置柱形圖，咱們能夠把它看做是一塊畫布。
   '這裏寬、高分別是400和200，固然，你也能夠根據須要把它們作爲參數來進行傳遞。
   Dim objBitMap As New Bitmap(400, 200)

   '聲明一個圖形對象，在上面建立的位圖上畫圖。
   Dim objGraphics As Graphics

   '從指定的objBitMap對象建立新圖形對象objGraphics。
   objGraphics = Graphics.FromImage(objBitMap)

   '清除整個繪圖面並以指定白色爲背景色進行填充。
   objGraphics.Clear(Color.White)

   '建立一個數據源，這裏咱們爲了方便其間，採用數組作爲柱形圖和餅圖的數據源。
   Dim arrValues(5) As Integer
   arrValues(0) = 100
   arrValues(1) = 135
   arrValues(2) = 115
   arrValues(3) = 125
   arrValues(4) = 75
   arrValues(5) = 120

   '定義數組對象，用來描述圖例。
   Dim arrValueNames(5) As String
   arrValueNames(0) = "一月"
   arrValueNames(1) = "二月"
   arrValueNames(2) = "三月"
   arrValueNames(3) = "四月"
   arrValueNames(4) = "五月"
   arrValueNames(5) = "六月"

   '在畫布（objBitMap對象）的座標5，5處，用指定的Brush（畫筆）對象和Font（字體）對象繪製統計圖標題。
   objGraphics.DrawString(" X 公司上半年銷售狀況", _
   New Font("宋體", 16), Brushes.Black, New PointF(5, 5))

   '建立圖例文字。
   Dim symbolLeg As PointF = New PointF(335, 20)
   Dim descLeg As PointF = New PointF(360, 16)

   '畫出圖例。利用objGraphics圖形對象的三個方法畫出圖例：
   'FillRectangle()方法畫出填充矩形，DrawRectangle()方法畫出矩形的邊框，
   'DrawString()方法畫出說明文字。這三個圖形對象的方法在 .NET 框架類庫類庫中均已重載，
   '能夠很方便根據不一樣的參數來畫出圖形。
   For i = 0 To arrValueNames.Length - 1

   '畫出填充矩形。
   objGraphics.FillRectangle(New SolidBrush(GetColor(i)), symbolLeg.X, symbolLeg.Y, 20, 10)

   '畫出矩形邊框。
   objGraphics.DrawRectangle(Pens.Black, symbolLeg.X, symbolLeg.Y, 20, 10)

   '畫出圖例說明文字。
   objGraphics.DrawString(arrValueNames(i).ToString, New Font("宋體", 10), Brushes.Black, descLeg)

   '移動座標位置，只移動Y方向的值便可。
   symbolLeg.Y += 15
   descLeg.Y += 15

   Next i

   '遍歷數據源的每一項數據，並根據數據的大小畫出矩形圖（即柱形圖的柱）。

   For i = 0 To arrValues.Length - 1

   '畫出填充矩形。
   objGraphics.FillRectangle(New SolidBrush(GetColor(i)), _
   (i * 35) + 15, 200 - arrValues(i), 20, arrValues(i) + 5)
   '畫出矩形邊框線。
   objGraphics.DrawRectangle(Pens.Black, (i * 35) + 15, 200 - arrValues(i), 20, arrValues(i) + 5)

   Next

    '下面畫餅圖。先定義兩個變量，表明當前角度和總角度，以便於畫圖時將角度進行按比例換算。
   Dim sglCurrentAngle As Single = 0
   Dim sglTotalAngle As Single = 0

   '定義一個變量，表明總的銷售額。
   Dim sglTotalValues As Single = 0

   '計算總銷售額。
   For i = 0 To arrValues.Length - 1
   sglTotalValues += arrValues(i)
   Next

   i = 0

   '遍歷數據源的每一項數據，並根據數據的大小畫出餅圖。
   '圖形對象的FillPie()方法和DrawPie()在.NET 框架類庫中已重載。
   For i = 0 To arrValues.Length - 1

   '計算當前角度值：當月銷售額 / 總銷售額 * 360，獲得餅圖中當月所佔的角度大小。
   sglCurrentAngle = arrValues(i) / sglTotalValues * 360

   '畫出填充圓弧。
   objGraphics.FillPie(New SolidBrush(GetColor(i)), _
   220, 95, 100, 100, sglTotalAngle, sglCurrentAngle)

   '畫出圓弧線。
   objGraphics.DrawPie(Pens.Black, 220, 95, 100, 100, sglTotalAngle, sglCurrentAngle)

   '把當前圓弧角度加到總角度上。
   sglTotalAngle += sglCurrentAngle

   Next i

   '將objGraphics對象以指定的圖形格式（這裏是Gif）保存到指定的Stream對象，並輸出到客戶端。
   objBitMap.Save(Response.OutputStream, ImageFormat.Gif)

   End Sub

   '下面這段函數用來根據不一樣的月份返回不一樣的顏色值。
   Private Function GetColor(ByVal itemIndex As Integer) As Color

   Dim objColor As Color

   Select Case itemIndex
   Case 0
   objColor = Color.Blue
   Case 1
   objColor = Color.Red
   Case 2
   objColor = Color.Yellow
   Case 3
   objColor = Color.Purple
   Case 4
   objColor = Color.Orange
   Case 5
   objColor = Color.Brown
   Case 6
   objColor = Color.Gray
   Case 7
   objColor = Color.Maroon
   Case 8
   objColor = Color.Maroon
   Case Else
   objColor = Color.Blue
   End Select
   Return objColor
   End Function

  End Class


  好了，咱們的代碼已經寫完，點擊「所有保存」按鈕，而後按「F5」執行，看看最好的結果。若是沒有錯誤的話，您將會看到以下的結果：

值得說明的是，上面只是簡單地示例瞭如何利用.NET 框架類庫中的圖形類建立簡單的圖形，但.NET 框架類庫中還提供了更高級的二維和矢量圖形功能，利用這些高級功能，咱們能夠建立出二維或矢量的圖形，那時，咱們的圖形看起來會更加形象。本文全部代碼在簡體中文Windows 2000 + .NET FrameWork 1.0（英文正式版）+ .NET FrameWork SP1和Windows XP + .NET FrameWork 1.0（中文版）下調試經過。 C#代碼 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.<a href="http://dev.21tx.com/dotnet/aspnet/webcontrols/" target="_blank">WebControls</a>; using System.Web.UI.HtmlControls; using System.Drawing.Imaging; namespace eMeng.Exam { /// <summary> /// Chart 的摘要說明。 /// </summary> public class Chart : System.Web.UI.Page { private void Page_Load(object sender, System.EventArgs e) { // 在此處放置用戶代碼以初始化頁面 Bitmap objBitMap = new Bitmap(400, 200); Graphics objGraphics; objGraphics = Graphics.FromImage(objBitMap); objGraphics.Clear(Color.White); int[] arrValues = {100,135,115,125,75,120}; string[] arrValueNames = new string[]{"一月","二月","三月","四月","五月","六月"}; objGraphics.DrawString(" X 公司上半年銷售狀況", new Font("宋體", 16), Brushes.Black, new PointF(5, 5)); PointF symbolLeg = new PointF(335, 20); PointF descLeg = new PointF(360, 16); for (int i = 0; i < arrValueNames.Length; i++) { objGraphics.FillRectangle(new SolidBrush(GetColor(i)), symbolLeg.X, symbolLeg.Y, 20, 10); objGraphics.DrawRectangle(Pens.Black, symbolLeg.X, symbolLeg.Y, 20, 10); objGraphics.DrawString(arrValueNames[i].ToString(), new Font("宋體", 10), Brushes.Black, descLeg); symbolLeg.Y += 15; descLeg.Y += 15; } for (int i = 0; i < arrValues.Length; i++) { objGraphics.FillRectangle(new SolidBrush(GetColor(i)), (i * 35) + 15, 200 - arrValues[i], 20, arrValues[i] + 5); objGraphics.DrawRectangle(Pens.Black, (i * 35) + 15, 200 - arrValues[i], 20, arrValues[i] + 5); } float sglCurrentAngle = 0; float sglTotalAngle = 0; float sglTotalValues = 0; for (int i = 0; i <= arrValues.Length - 1; i++) { sglTotalValues += arrValues[i]; } for (int i = 0; i < arrValues.Length; i++) { sglCurrentAngle = arrValues[i] / sglTotalValues * 360; objGraphics.FillPie(new SolidBrush(GetColor(i)), 220, 95, 100, 100, sglTotalAngle, sglCurrentAngle); objGraphics.DrawPie(Pens.Black, 220, 95, 100, 100, sglTotalAngle, sglCurrentAngle); sglTotalAngle += sglCurrentAngle; } objBitMap.Save(Response.OutputStream, ImageFormat.Gif); } private Color GetColor(int itemIndex) { Color objColor; if (itemIndex == 0) { objColor = Color.Blue; } else if (itemIndex == 1) { objColor = Color.Red; } else if (itemIndex == 2) { objColor = Color.Yellow; } else if (itemIndex == 3) { objColor = Color.Purple; } else if (itemIndex == 4) { objColor = Color.Orange; } else if (itemIndex == 5) { objColor = Color.Brown; } else if (itemIndex == 6) { objColor = Color.Gray; } else if (itemIndex == 7) { objColor = Color.Maroon; } else if (itemIndex == 8) { objColor = Color.Maroon; } else { objColor = Color.Blue; } return objColor; } #region Web 窗體設計器生成的代碼 override protected void OnInit(EventArgs e) { // // CODEGEN: 該調用是 ASP.NET Web 窗體設計器所必需的。 // InitializeComponent(); base.OnInit(e); } /// <summary> /// 設計器支持所需的方法 - 不要使用代碼編輯器修改 /// 此方法的內容。 /// </summary> private void InitializeComponent() { this.Load += new System.EventHandler(this.Page_Load); } #endregion } }