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

luliangok

浏览: 816910 次

最近访客更多访客>>

mianjifen_mianjifen

当流量成为永恒

i221bci

mr_zhang2011

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1463)

社区版块

存档分类

在应用程序开发中，我们会经常遇到把从数据源动态取回的数据用统计图表现出来，在Microsoft.NETFramework出现之前，我们采取的方法主要是编写组件来完成这一任务。现在，利用Microsoft.NETFramework提供的丰富的GDI+类和对象可以很轻松地实现这一功能。在本文中，我们就来看看在ASP.NET中如何动态创建常用的柱状图和饼图。数据源有许多种，在本文里我们就以数组来进行示例，但本例的方法很容易转换成数据库类型的数据源来进行。

第一步：创建一个新的ASP.NET项目。

打开MicrosoftVisualStudio.NET，点击“文件(File)”-“新建(New)”-“项目(Project)”，打开“新建项目(NewProject)”对话框，在“项目类型(ProjectTypes)”里选择“VisualBasic项目(Projects)”，在“模板(Templates)”里选择“ASP.NET应用程序(WebApplication)”，在应用程序地址里输入：http://localhost/aspCharts，点击“确定(OK)”按钮，MicrosoftVisualStudio.NET将会自动在wwwroot目录下创建一个名为aspCharts的Web工程。

第二步：为默认起始页编写代码（AspxChart.aspx）。

我们要在这个页面里显示动态创建的图形，打开AspxChart.aspx的标签页的“HTML”视图，插入下面的代码：

<html>
<body>
<formid="Form1"method="post"runat="server">
<tablewidth="517"border="0"height="255">
<tr>
<tdalign="middle"><imgsrc="Chart.aspx"></td>
</tr>
<tr>
<tdheight="20"align="middle">ASP.NET中动态创建图形范例</td>
</tr>
</table>
</form>
</body>
</html>

第三步：添加名为Chart.aspx的Web窗体页。

打开“解决方案资源管理器(SolutionExplorer)”，在“aspCharts项目”上点击右键，选择“添加(Add)”-“添加新项(AddNewItem)”，弹出“添加新项(AddNewItem)”对话框，在右边的“模板”里选择“Web窗体”，在底下的名字输入框了输入“Chart.aspx”，点击“打开”按钮。

第四步：为“Chart.aspx”Web窗体页添加代码。

在“Chart.aspx”窗体上点击右键，选择“查看代码(ViewCode)”，在代码的第一行添加下面二行：

ImportsSystem.Drawing
ImportsSystem.Drawing.Imaging
PublicClassChart
InheritsSystem.Web.UI.Page

#Region"Web窗体设计器生成的代码"

'该调用是Web窗体设计器所必需的。
<System.Diagnostics.DebuggerStepThrough()>PrivateSubInitializeComponent()

EndSub

PrivateSubPage_Init(ByValsenderAsSystem.Object,ByValeAsSystem.EventArgs)HandlesMyBase.Init
'CODEGEN:此方法调用是Web窗体设计器所必需的
'不要使用代码编辑器修改它。
InitializeComponent()
EndSub

#EndRegion

'创建页面事件
PrivateSubPage_Load(ByValsenderAsSystem.Object,_
ByValeAsSystem.EventArgs)HandlesMyBase.Load

'声明整型变量i，
DimiAsInteger

'创建一个位图对象，用来放置柱形图，我们可以把它看作是一块画布。
'这里宽、高分别是400和200，当然，你也可以根据需要把它们做为参数来进行传递。
DimobjBitMapAsNewBitmap(400,200)

'声明一个图形对象，在上面创建的位图上画图。
DimobjGraphicsAsGraphics

'从指定的objBitMap对象创建新图形对象objGraphics。
objGraphics=Graphics.FromImage(objBitMap)

'清除整个绘图面并以指定白色为背景色进行填充。
objGraphics.Clear(Color.White)

'创建一个数据源，这里我们为了方便其间，采用数组做为柱形图和饼图的数据源。
DimarrValues(5)AsInteger
arrValues(0)=100
arrValues(1)=135
arrValues(2)=115
arrValues(3)=125
arrValues(4)=75
arrValues(5)=120

'定义数组对象，用来描述图例。
DimarrValueNames(5)AsString
arrValueNames(0)="一月"
arrValueNames(1)="二月"
arrValueNames(2)="三月"
arrValueNames(3)="四月"
arrValueNames(4)="五月"
arrValueNames(5)="六月"

'在画布（objBitMap对象）的坐标5，5处，用指定的Brush（画笔）对象和Font（字体）对象绘制统计图标题。
objGraphics.DrawString("X公司上半年销售情况",_
NewFont("宋体",16),Brushes.Black,NewPointF(5,5))

'创建图例文字。
DimsymbolLegAsPointF=NewPointF(335,20)
DimdescLegAsPointF=NewPointF(360,16)

'画出图例。利用objGraphics图形对象的三个方法画出图例：
'FillRectangle()方法画出填充矩形，DrawRectangle()方法画出矩形的边框，
'DrawString()方法画出说明文字。这三个图形对象的方法在.NET框架类库类库中均已重载，
'可以很方便根据不同的参数来画出图形。
Fori=0ToarrValueNames.Length-1

'画出填充矩形。
objGraphics.FillRectangle(NewSolidBrush(GetColor(i)),symbolLeg.X,symbolLeg.Y,20,10)

'画出矩形边框。
objGraphics.DrawRectangle(Pens.Black,symbolLeg.X,symbolLeg.Y,20,10)

'画出图例说明文字。
objGraphics.DrawString(arrValueNames(i).ToString,NewFont("宋体",10),Brushes.Black,descLeg)

'移动坐标位置，只移动Y方向的值即可。
symbolLeg.Y+=15
descLeg.Y+=15

Nexti

'遍历数据源的每一项数据，并根据数据的大小画出矩形图（即柱形图的柱）。

Fori=0ToarrValues.Length-1

'画出填充矩形。
objGraphics.FillRectangle(NewSolidBrush(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

'下面画饼图。先定义两个变量，代表当前角度和总角度，以便于画图时将角度进行按比例换算。
DimsglCurrentAngleAsSingle=0
DimsglTotalAngleAsSingle=0

'定义一个变量，代表总的销售额。
DimsglTotalValuesAsSingle=0

'计算总销售额。
Fori=0ToarrValues.Length-1
sglTotalValues+=arrValues(i)
Next

i=0

'遍历数据源的每一项数据，并根据数据的大小画出饼图。
'图形对象的FillPie()方法和DrawPie()在.NET框架类库中已重载。
Fori=0ToarrValues.Length-1

'计算当前角度值：当月销售额/总销售额*360，得到饼图中当月所占的角度大小。
sglCurrentAngle=arrValues(i)/sglTotalValues*360

'画出填充圆弧。
objGraphics.FillPie(NewSolidBrush(GetColor(i)),_
220,95,100,100,sglTotalAngle,sglCurrentAngle)

'画出圆弧线。
objGraphics.DrawPie(Pens.Black,220,95,100,100,sglTotalAngle,sglCurrentAngle)

'把当前圆弧角度加到总角度上。
sglTotalAngle+=sglCurrentAngle

Nexti

'将objGraphics对象以指定的图形格式（这里是Gif）保存到指定的Stream对象，并输出到客户端。
objBitMap.Save(Response.OutputStream,ImageFormat.Gif)

EndSub

'下面这段函数用来根据不同的月份返回不同的颜色值。
PrivateFunctionGetColor(ByValitemIndexAsInteger)AsColor

DimobjColorAsColor

SelectCaseitemIndex
Case0
objColor=Color.Blue
Case1
objColor=Color.Red
Case2
objColor=Color.Yellow
Case3
objColor=Color.Purple
Case4
objColor=Color.Orange
Case5
objColor=Color.Brown
Case6
objColor=Color.Gray
Case7
objColor=Color.Maroon
Case8
objColor=Color.Maroon
CaseElse
objColor=Color.Blue
EndSelect
ReturnobjColor
EndFunction

EndClass

好了，我们的代码已经写完，点击“全部保存”按钮，然后按“F5”执行，看看最好的结果。如果没有错误的话，您将会看到如下的结果：

值得说明的是，上面只是简单地示例了如何利用.NET框架类库中的图形类创建简单的图形，但.NET框架类库中还提供了更高级的二维和矢量图形功能，利用这些高级功能，我们可以创建出二维或矢量的图形，那时，我们的图形看起来会更加形象。

本文所有代码在简体中文Windows2000+.NETFrameWork1.0（英文正式版）+.NETFrameWorkSP1和WindowsXP+.NETFrameWork1.0（中文版）下调试通过。

C#代码

usingSystem.Drawing;
usingSystem.Drawing.Imaging;
publicclassChart:System.Web.UI.Page
{

[System.Diagnostics.DebuggerStepThrough()]
privatevoidInitializeComponent()
{
}

privatevoidPage_Init(objectsender,System.EventArgse)
{
InitializeComponent();
}

privatevoidPage_Load(objectsender,System.EventArgse)
{
inti;
BitmapobjBitMap=newBitmap(400,200);
GraphicsobjGraphics;
objGraphics=Graphics.FromImage(objBitMap);
objGraphics.Clear(Color.White);
int[5]arrValues;
arrValues(0)=100;
arrValues(1)=135;
arrValues(2)=115;
arrValues(3)=125;
arrValues(4)=75;
arrValues(5)=120;
string[5]arrValueNames;
arrValueNames(0)="一月";
arrValueNames(1)="二月";
arrValueNames(2)="三月";
arrValueNames(3)="四月";
arrValueNames(4)="五月";
arrValueNames(5)="六月";
objGraphics.DrawString("X公司上半年销售情况",newFont("宋体",16),Brushes.Black,newPointF(5,5));
PointFsymbolLeg=newPointF(335,20);
PointFdescLeg=newPointF(360,16);
for(inti=0;i<=arrValueNames.Length-1;i++){
objGraphics.FillRectangle(newSolidBrush(GetColor(i)),symbolLeg.X,symbolLeg.Y,20,10);
objGraphics.DrawRectangle(Pens.Black,symbolLeg.X,symbolLeg.Y,20,10);
objGraphics.DrawString(arrValueNames(i).ToString,newFont("宋体",10),Brushes.Black,descLeg);
symbolLeg.Y+=15;
descLeg.Y+=15;
}
for(inti=0;i<=arrValues.Length-1;i++){
objGraphics.FillRectangle(newSolidBrush(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);
}
floatsglCurrentAngle=0;
floatsglTotalAngle=0;
floatsglTotalValues=0;
for(inti=0;i<=arrValues.Length-1;i++){
sglTotalValues+=arrValues(i);
}
i=0;
for(inti=0;i<=arrValues.Length-1;i++){
sglCurrentAngle=arrValues(i)/sglTotalValues*360;
objGraphics.FillPie(newSolidBrush(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);
}

privateColorGetColor(intitemIndex)
{
ColorobjColor;
if(itemIndex==0){
objColor=Color.Blue;
}elseif(itemIndex==1){
objColor=Color.Red;
}elseif(itemIndex==2){
objColor=Color.Yellow;
}elseif(itemIndex==3){
objColor=Color.Purple;
}elseif(itemIndex==4){
objColor=Color.Orange;
}elseif(itemIndex==5){
objColor=Color.Brown;
}elseif(itemIndex==6){
objColor=Color.Gray;
}elseif(itemIndex==7){
objColor=Color.Maroon;
}elseif(itemIndex==8){
objColor=Color.Maroon;
}else{
objColor=Color.Blue;
}
returnobjColor;
}
}