生成柱状图饼状图.docx
《生成柱状图饼状图.docx》由会员分享，可在线阅读，更多相关《生成柱状图饼状图.docx（15页珍藏版）》请在冰豆网上搜索。
生成柱状图饼状图
在应用程序开发中，我们会经常遇到把从数据源动态取回的数据用统计图表现出来，在microsoft.netframework出现之前，我们采取的方法主要是编写组件来完成这一任务。
现在，利用microsoft.netframework提供的丰富的gdi+类和对象可以很轻松地实现这一功能。
在本文中，我们就来看看在中如何动态创建常用的柱状图和饼图。
数据源有许多种，在本文里我们就以数组来进行示例，但本例的方法很容易转换成数据库类型的数据源来进行。
查看例子
第一步：
创建一个新的项目。
打开microsoftvisualstudio.net，点击“文件（file）”-“新建（new）”-“项目（project）”，打开“新建项目（newproject）”对话框，在“项目类型（projecttypes）”里选择“visualbasic项目（projects）”，在“模板（templates）”里选择“应用程序（webapplication）”，在应用程序地址里输入：
http:
//localhost/aspcharts，点击“确定（ok）”按钮，microsoftvisualstudio.net将会自动在wwwroot目录下创建一个名为aspcharts的web工程。
第二步：
为默认起始页编写代码（aspxchart.aspx）。
我们要在这个页面里显示动态创建的图形，打开aspxchart.aspx的标签页的“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窗体设计器所必需的。
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;
usingsystem.collections;
usingponentmodel;
usingsystem.data;
usingsystem.drawing;
usingsystem.web;
usingsystem.web.sessionstate;
usingsystem.web.ui;
usingsystem.web.ui.webcontrols;
usingsystem.web.ui.htmlcontrols;
usingsystem.drawing.imaging;
namespaceemeng.exam
{
///
///chart的摘要说明。
///
publicclasschart:
system.web.ui.page
{
privatevoidpage_load（objectsender,system.eventargse）
{
//在此处放置用户代码以初始化页面
bitmapobjbitmap=newbitmap（400,200）;
graphicsobjgraphics;
objgraphics=graphics.fromimage（objbitmap）;
objgraphics.clear（color.white）;
int[]arrvalues={100,135,115,125,75,120};
string[]arrvaluenames=newstring[]{"一月","二月","三月","四月","五月","六月"};
objgraphics.drawstring（"x公司上半年销售情况",
newfont（"宋体",16）,brushes.black,newpointf（5,5））;
pointfsymbolleg=newpointf（335,20）;
pointfdescleg=newpointf（360,16）;
for（inti=0;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{
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];
}
for（inti=0;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;
}
#regionweb窗体设计器生成的代码
overrideprotectedvoidoninit（eventargse）
{
//
//codegen:
该调用是web窗体设计器所必需的。
//
initializecomponent（）;
base.oninit（e）;
}
///
///设计器支持所需的方法-不要使用代码编辑器修改
///此方法的内容。
///
privatevoidinitializecomponent（）
{
this.load+=newsystem.eventhandler（this.page_load）;
}
#endregion
}
}
本文评论（comments）：
为了保护您的电子邮件不被骚扰，地址中的个别符号转换成了全角字符！
评论人：
enjsky电子邮件：
gzj114＠163．com评论日期：
2004年08月31日04:
07:
45
在饼状图上如何标示数据的我已经解决了，发给大家看一下，学习....
c#代码如下：
namespaceper_mang
{
usingsystem;
usingsystem.collections;
usingponentmodel;
usingsystem.data;
usingsystem.drawing;
usingsystem.web;
usingsystem.web.sessionstate;
usingsystem.web.ui;
usingsystem.web.ui.webcontrols;
usingsystem.web.ui.htmlcontrols;
usingsystem.drawing.imaging;
///
///chart的摘要说明。
///
publicclasschart:
system.web.ui.page
{
privatevoidpage_load（objectsender,system.eventargse）
{
//在此处放置用户代码以初始化页面
bitmapobjbitmap=newbitmap（700,500）;
graphicsobjgraphics;
objgraphics=graphics.fromimage（objbitmap）;
objgraphics.clear（color.white）;
stringformatdrawformat=newsystem.drawing.stringformat（stringformatflags.directionvertical）;
stringformatdrawformat1=newsystem.drawing.stringformat（stringformatflags.displayformatcontrol）;
int[]arrvalues={300,135,115,125,75,120};
string[]arrvaluenames=newstring[]{"一月","二月","三月","四月","五月","六月"};
objgraphics.drawstring（"x公司上半年销售情况",
newfont（"宋体",16）,brushes.black,200,0,drawformat1）;
pointfsymbolleg
升级会员 