转至繁体中文版     | 网站首页 | 图文教程 | 资源下载 | 站长博客 | 图片素材 | 武汉seo | 武汉网站优化 | 
最新公告:     敏韬网|教学资源学习资料永久免费分享站!  [mintao  2008年9月2日]        
您现在的位置: 学习笔记 >> 图文教程 >> 站长学院 >> Web开发 >> 正文
在ASP.NET中动态创建柱状图和饼图         ★★★★

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

作者:闵涛 文章来源:闵涛的学习笔记 点击数:1915 更新时间:2009/4/23 10:41:53
在应用程序开发中,我们会经常遇到把从数据源动态取回的数据用统计图表现出来,在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

[1] [2]  下一页


[C语言系列]NET 中C#的switch语句的语法  [系统软件]托拽Explore中的文件到VB.net的窗口
[系统软件]Boost库在XP+Visual C++.net中的安装  [常用软件]新配色面板:Paint.Net3.0RC1官方下载
[常用软件]用内建的“Net Meeting”聊天  [VB.NET程序]Henry的VB.NET之旅(三)—共享成员
[VB.NET程序]Henry的VB.NET之旅(二)—构造与析构  [VB.NET程序]Henry的VB.NET之旅(一)—失踪的窗体
[VB.NET程序]在托盘上显示Balloon Tooltip(VB.NET)  [VB.NET程序]Henry手记-VB.NET中动态加载Treeview节点(二)
教程录入:mintao    责任编辑:mintao 
  • 上一篇教程:

  • 下一篇教程:
  • 【字体: 】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
      注:本站部分文章源于互联网,版权归原作者所有!如有侵权,请原作者与本站联系,本站将立即删除! 本站文章除特别注明外均可转载,但需注明出处! [MinTao学以致用网]
      网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)

    同类栏目
    · Web开发  · 网页制作
    · 平面设计  · 网站运营
    · 网站推广  · 搜索优化
    · 建站心得  · 站长故事
    · 互联动态
    更多内容
    热门推荐 更多内容
  • 没有教程
  • 赞助链接
    更多内容
    闵涛博文 更多关于武汉SEO的内容
    500 - 内部服务器错误。

    500 - 内部服务器错误。

    您查找的资源存在问题,因而无法显示。

    | 设为首页 |加入收藏 | 联系站长 | 友情链接 | 版权申明 | 广告服务
    MinTao学以致用网

    Copyright @ 2007-2012 敏韬网(敏而好学,文韬武略--MinTao.Net)(学习笔记) Inc All Rights Reserved.
    闵涛 投放广告、内容合作请Q我! E_mail:admin@mintao.net(欢迎提供学习资源)

    站长:MinTao ICP备案号:鄂ICP备11006601号-18

    闵涛站盟:医药大全-武穴网A打造BCD……
    咸宁网络警察报警平台