在ASP.NET中动态创建柱状图和饼图

来源:互联网 发布:软件二次开发合同范本 编辑:程序博客网 时间:2024/05/17 23:18
在应用程序开发中,我们会经常遇到把从数据源动态取回的数据用统计图表现出来,在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)”,在应用程序地址里输入:
http://localhost/aspCharts,点击“确定(OK)”按钮,Microsoft Visual Studio .NET将会自动在wwwroot目录下创建一个名为aspCharts的Web工程。

第二步:为默认起始页编写代码(AspxChart.aspx)。

我们要在这个页面里显示动态创建的图形,打开AspxChart.aspx的标签页的“HTML”视图,插入下面的代码:



  <html>
  <body>
    <form id="Form1" method="post" runat="server">
      <table width="517" border="0" height="255">
        <tr>
          <td align="middle"><img src="Chart.aspx"></td>
        </tr>
        <tr>
          <td height="20" align="middle">ASP.NET 中动态创建图形范例</td>
        </tr>
      </table>
    </form>
  </body>
</html>
  
第三步:添加名为Chart.aspx的Web窗体页。

打开“解决方案资源管理器(Solution Explorer)”,在“aspCharts项目”上点击右键,选择“添加(Add)”-“添加新项(Add New Item)”,弹出“添加新项(Add New Item)”对话框,在右边的“模板”里选择“Web 窗体”,在底下的名字输入框了输入“Chart.aspx”,点击“打开”按钮。

第四步:为“Chart.aspx”Web 窗体页添加代码。

在“Chart.aspx”窗体上点击右键,选择“查看代码(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.Drawing; 
using System.Drawing.Imaging; 
public class Chart : System.Web.UI.Page 


 [System.Diagnostics.DebuggerStepThrough()] 
 private void InitializeComponent() 
 { 
 } 

 private void Page_Init(object sender, System.EventArgs e) 
 { 
   InitializeComponent(); 
 } 

 private void Page_Load(object sender, System.EventArgs e) 
 { 
   int i; 
   Bitmap objBitMap = new Bitmap(400, 200); 
   Graphics objGraphics; 
   objGraphics = Graphics.FromImage(objBitMap); 
   objGraphics.Clear(Color.White); 
   int[5] arrValues; 
   arrValues(0) = 100; 
   arrValues(1) = 135; 
   arrValues(2) = 115; 
   arrValues(3) = 125; 
   arrValues(4) = 75; 
   arrValues(5) = 120; 
   string[5] arrValueNames; 
   arrValueNames(0) = "一月"; 
   arrValueNames(1) = "二月"; 
   arrValueNames(2) = "三月"; 
   arrValueNames(3) = "四月"; 
   arrValueNames(4) = "五月"; 
   arrValueNames(5) = "六月"; 
   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 - 1; 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 - 1; 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); 
   } 
   i = 0; 
   for (int i = 0; i <= arrValues.Length - 1; 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; 
 } 
}
原创粉丝点击
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防,我是瞎子 小米6音量键进水怎么办 考驾照怕过不了怎么办 学车对车没感觉怎么办 居住证到期2个月怎么办 生育险差一个月怎么办 驾照扣了38分怎么办 新疆转入山东上学怎么办手续 驾照过日期换证怎么办 机动车被扣24分怎么办 车辆被扣24分怎么办 现在深圳牌十年老车怎么办? 护士证过期4年了怎么办 护士资格证延续注册过期了怎么办 护士资格证过期没注册怎么办 护士资格证注册时间过期怎么办 辅警体检视力不行怎么办 护士延续注册体检怀孕怎么办 护士资格证没有延续注册怎么办 申请信用卡没有座机号码怎么办 网上申请信用卡没有座机号码怎么办 我叫上门服务被骗了怎么办 上门服务被骗了3000多怎么办 微信被骗9000元怎么办 奥迪a8气囊灯亮怎么办 驾考站岗迟到了怎么办 老板欠员工工资不给怎么办 如果有一天我没头发了怎么办 苏州公积金密码忘了怎么办 科二考试第二把怎么办 科一老是记不住怎么办 科目二考试没去怎么办 网约车驾龄不到怎么办 科四预约不上怎么办 教练不退钱怎么办找谁 驾考出入证丢了怎么办 科二成绩单丢了怎么办 考驾照的准考证丢了怎么办 驾考预约去不了怎么办 科目一预约没去怎么办 打狂犬疫苗期间感冒了怎么办 公司社保欠费不交怎么办