Visual Studio 2010 入门开发 Windows .NET ASP.NET C#

ASP.NET 4.0 图表控件

Christoph Keller

4.86/5 (50投票s)

2011年8月2日

CPOL

3分钟阅读

475143

18947

简要介绍 ASP.NET 4.0 新增的图表控件

下载源代码 - 15.5 KB

新功能：查看上述图表测试器代码的实时演示，地址：http://dotnetcorner.ch/tools/aspnetcharts/default.aspx。

Charts Tester

今天，我想介绍 ASP.NET 4.0 框架中新增的图表控件。有了这个图表控件，您可以在几分钟内创建出色的图形图表。

我们的起点是使用 Visual Studio 2010 创建的一个新的 ASP.NET Web 应用程序。

将控件集成到您的页面

如果您打开您的default.aspx 文件，查看工具箱，您会在“数据”部分找到“图表”控件。

将图表控件拖放到设计界面上后，Visual Studio 会自动向 web.config 文件添加一些设置。这是自动完成的，因此以下内容仅作解释说明这些更改。

Web.config 更改

ChartImage 设置

在 <appSettings> 节点下，将创建以下条目：

<add key="ChartImageHandler" value="storage=file;timeout=20;dir=c:\TempImageFiles\;" />

这是临时存储的配置，用于存放生成的图表文件。请注意，根据生成的图表数量，此存储会占用大量空间。

ChartImage.axd 处理程序

在 <system.web><httpHandlers> 下，将添加以下条目：

<add path="ChartImg.axd" verb="GET,HEAD,POST" 
type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler,
System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, 
PublicKeyToken=31bf3856ad364e35" validate="false" />

chartimage.axd 是图表控件的主要组件。每次生成图表图像时都会调用此处理程序。

控件定义

在 <system.web><pages><controls> 节点下，将添加标签定义：

<add tagPrefix="asp" namespace="System.Web.UI.DataVisualization.Charting" 

assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, 
PublicKeyToken=31bf3856ad364e35" />

这将添加标签支持，以便我们可以在 aspx 页面中使用 <asp:chart /> 标签。

引用 DataVisualization 程序集

最后，在 <system.web><compilation><assemblies> 下会添加对 DataVisualization 程序集的引用。

<add assembly="System.Web.DataVisualization, Version=4.0.0.0, 
Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

aspx 页面中的默认图表元素

在您拖入控件的 aspx 页面中，Visual Studio 会将默认的图表控件添加到代码中：

<asp:Chart ID="Chart1" runat="server">

	<Series>
		<asp:Series Name="Series1">
		</asp:Series>
	</Series>
	<ChartAreas>
		<asp:ChartArea Name="ChartArea1">

		</asp:ChartArea>
	</ChartAreas>
</asp:Chart>

图表快速入门

在我们开始使用图表控件之前，我想解释一下“Series”（系列）和“ChartAreas”（图表区域）属性。

系列文章

系列文章	`Series` 集合包含一个或多个数据系列的[数据点]。基本上，图表中的每一条线（由多个数据点组成）都需要一个数据系列。每个系列都可以拥有自己的 `ChartType`（图表类型）。此外，每个系列都可以分配到任何一个 `ChartArea`（图表区域），并且每个系列还可以拥有自己的渲染属性（例如颜色、标签等）。
图表区域	`ChartArea` 集合可以包含一个或多个控制图表渲染的配置。重要提示：必须至少有一个 `ChartArea` 定义才能执行渲染！

Series 集合包含一个或多个数据系列的[数据点]。基本上，图表中的每一条线（由多个数据点组成）都需要一个数据系列。
每个系列都可以拥有自己的 ChartType（图表类型）。此外，每个系列都可以分配到任何一个 ChartArea（图表区域），并且每个系列还可以拥有自己的渲染属性（例如颜色、标签等）。

图表区域 ChartArea 集合可以包含一个或多个控制图表渲染的配置。
重要提示：必须至少有一个 ChartArea 定义才能执行渲染！

现在我们知道，我们必须在 <series> 属性中添加一个包含我们数据点的 <asp:Series>。我们还必须确保在 <ChartAreas> 中至少定义了一个 <asp:ChartArea>，否则只会得到一个空白的图像。

将图表控件代码更改为以下内容后：

<asp:Chart ID="cTestChart" runat="server">
	<Series>
		<asp:Series Name="Testing" YValueType="Int32">

			<Points>
				<asp:DataPoint AxisLabel="Test 1" YValues="10" />
				<asp:DataPoint AxisLabel="Test 2" YValues="20" />

				<asp:DataPoint AxisLabel="Test 3" YValues="30" />
				<asp:DataPoint AxisLabel="Test 4" YValues="40" />

			</Points>
		</asp:Series>
	</Series>
	<ChartAreas>
		<asp:ChartArea Name="ChartArea1">
		</asp:ChartArea>

	</ChartAreas>
</asp:Chart>

在渲染后的页面输出中，我们将得到以下结果：

我们成功创建了第一个图表！