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

来源：互联网发布：里贾纳大学知乎编辑：程序博客网时间：2024/05/16 19:18

第一步：创建一个新的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.DrawingImports System.Drawing.ImagingPublic Class ChartInherits System.Web.UI.Page#Region " Web 窗体设计器生成的代码 "'该调用是 Web 窗体设计器所必需的。<System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent()End SubPrivate 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 IntegerarrValues(0) = 100arrValues(1) = 135arrValues(2) = 115arrValues(3) = 125arrValues(4) = 75arrValues(5) = 120'定义数组对象，用来描述图例。Dim arrValueNames(5) As StringarrValueNames(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 += 15descLeg.Y += 15Next 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 = 0Dim sglTotalAngle As Single = 0'定义一个变量，代表总的销售额。Dim sglTotalValues As Single = 0'计算总销售额。For i = 0 To arrValues.Length - 1sglTotalValues += arrValues(i)Nexti = 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 += sglCurrentAngleNext i'将objGraphics对象以指定的图形格式（这里是Gif）保存到指定的Stream对象，并输出到客户端。objBitMap.Save(Response.OutputStream, ImageFormat.Gif)End Sub'下面这段函数用来根据不同的月份返回不同的颜色值。Private Function GetColor(ByVal itemIndex As Integer) As ColorDim objColor As ColorSelect Case itemIndexCase 0objColor = Color.BlueCase 1objColor = Color.RedCase 2objColor = Color.YellowCase 3objColor = Color.PurpleCase 4objColor = Color.OrangeCase 5objColor = Color.BrownCase 6objColor = Color.GrayCase 7objColor = Color.MaroonCase 8objColor = Color.MaroonCase ElseobjColor = Color.BlueEnd SelectReturn objColorEnd FunctionEnd 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}}

//////////////////事例二带数据的图

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;

/// <summary>
/// Chart 的摘要说明。
/// </summary>
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);
}

/// <summary>
/// 设计器支持所需的方法 - 不要使用代码编辑器修改
/// 此方法的内容。
/// </summary>
private void InitializeComponent()
{
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
}
}