|
在应用程序开发中，我们会经常遇到把从数据源动态取回的数据用统计图表现出来，在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”视图，插入下面的代码：
<![CDATA[ <html>
<body>
<form id="form1" method="post" runat="server">
<table width="517" border="0" height="255">
<tr>
<td align="middle"><img src="http://dev.csdn.net/article/45/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)”，在代码的第一行添加下面二行：
<![CDATA[
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
]]>
本文关键：在ASP.NET中动态创建柱状图和饼图
本站最佳浏览方式为 分辨率 1024x768 IE 6.0（或更高版本的 IE浏览器） 
|