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

在 应用程序开发中,我们会经常遇到把从数据源动态取回的数据用统计图表现出来,在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="center"><img src="Chart.aspx"></td>

</tr>

<tr>

<td height="20" align="center">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;

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.WebControls;

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

}

}







本文评论(Comments):为了保护您的电子邮件不被骚扰,地址中的个别符号转换成了全角字符! 

评论人:enjsky 电子邮件:gzj114@163.com 评论日期:2004年08月31日 04:07:45 

在饼状图上如何标示数据 的我已经解决了,发给大家看一下,学习....



C#代码如下:

namespace per_mang 

{

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.WebControls;

using System.Web.UI.HtmlControls;

using System.Drawing.Imaging;





/// 

/// Chart 的摘要说明。

/// 

public class Chart : System.Web.UI.Page

{

private void Page_Load(object sender, System.EventArgs e)

{

// 在此处放置用户代码以初始化页面

Bitmap objBitMap = new Bitmap(700, 500); 

Graphics objGraphics; 

objGraphics = Graphics.FromImage(objBitMap); 

objGraphics.Clear(Color.White); 

StringFormat drawFormat = new System.Drawing.StringFormat(StringFormatFlags.DirectionVertical);

StringFormat drawFormat1 = new System.Drawing.StringFormat(StringFormatFlags.DisplayFormatControl);

int[] arrValues = {300,135,115,125,75,120};

string[] arrValueNames = new string[]{"一月","二月","三月","四月","五月","六月"}; 

objGraphics.DrawString(" X 公司上半年销售情况", 

new Font("宋体", 16), Brushes.Black,200,0,drawFormat1); 

PointF symbolLeg = new PointF(500, 20); 

PointF descLeg = new PointF(560, 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, 400 - arrValues[i], 20, 

arrValues[i] + 5); 

objGraphics.DrawRectangle(Pens.Black, (i * 35) + 15, 400 - arrValues[i], 20, arrValues[i] + 5); 

objGraphics.DrawString(arrValueNames[i].ToString() + "【"+ arrValues[i].ToString()+"】", new Font("宋体", 10), Brushes.Black,(i * 35) + 15,310 - arrValues[i], drawFormat); 





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)), 420, 300, 100, 100, sglTotalAngle, sglCurrentAngle); 

objGraphics.DrawPie(Pens.Black, 420, 300, 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);

}



/// 

/// 设计器支持所需的方法 - 不要使用代码编辑器修改

/// 此方法的内容。

/// 

private void InitializeComponent()



this.Load += new System.EventHandler(this.Page_Load);

}

#endregion

}

}
posted @ 2009-02-16 16:56  litao6664  阅读(144)  评论(0编辑  收藏  举报