在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 } }