IDC资讯中心
在应用程序开发中，我们会经常遇到把从数据源动态取回的数据用统计图表现出来，在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;
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
}
}
