在ASP.NET中动态创建柱状图和饼图
日期：2013-12-12 浏览次数：20542 次
在应用程序开发中，我们会经常遇到把从数据源动态取回的数据用统计图表现出来，在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
查看例子
第一步：创建一个新的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
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
