生成柱状图饼状图.docx
- 文档编号:9662175
- 上传时间:2023-02-05
- 格式:DOCX
- 页数:15
- 大小:19.26KB
生成柱状图饼状图.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窗体设计器所必需的。
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
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 生成 柱状图 饼状图
![提示](https://static.bdocx.com/images/bang_tan.gif)