步骤如下：

1、

Chart控件（一）Chart控件在ASP.NET网站中的应用示例详解（C#语言）" title="VS2010 Chart控件（一）Chart控件在ASP.NET网站中的应用示例详解（C#语言）" action-data="http%3A%2F%2Fs8.sinaimg.cn%2Fmw690%2F6988593etx6DhZWSOATc7%26690" action-type="show-slide" style="margin: 0px; padding: 0px; list-style: none;">

2、

Chart控件（一）Chart控件在ASP.NET网站中的应用示例详解（C#语言）" title="VS2010 Chart控件（一）Chart控件在ASP.NET网站中的应用示例详解（C#语言）" action-data="http%3A%2F%2Fs12.sinaimg.cn%2Fmw690%2F6988593etx6DhZXKdIv5b%26690" action-type="show-slide" style="margin: 0px; padding: 0px; list-style: none;">

其中.NET Framework x.x中，从4版本开始新增Chart控件。（3.5及早期版本无Chart控件。）

3、直接拖动Chart控件到Default .aspx的之间（拖动过程中自动生成相应代码，根据需要自行修改）。

Chart控件（一）Chart控件在ASP.NET网站中的应用示例详解（C#语言）" title="VS2010 Chart控件（一）Chart控件在ASP.NET网站中的应用示例详解（C#语言）" style="margin: 0px; padding: 0px; list-style: none;">

示例如下：

<asp:Content ID="BodyContent" runat="server"ContentPlaceHolderID="MainContent" Height="400px" Width="500px">

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

<asp:SeriesName="Series1" ChartType="Column" ChartArea="ChartArea1">

</asp:Series>

<asp:Series Name="Series2" ChartType="Column"ChartArea="ChartArea1">

</asp:Series>

</Series>

<asp:ChartArea Name="ChartArea1">

</asp:ChartArea>

</ChartAreas>

</asp:Chart>

</asp:Content>

（代码中黄色部分为拖动Chart控件过程中在Default .aspx文件自动生成的代码。其中Height和Width为图表控件的高和宽属性，自行添加设置。成对的个数与后台代码“设置图表Y轴对应项”处的代码相关，此处设置为两个，最终体现在结果图中的两列对比数据显示）

…

debug="false" targetFramework="4.0">

…

（其中黄色部分为拖动Chart控件过程中Web .config文件中自动生成的代码，如果代码需要调试，将粉红色部分的debug状态设置为true）

4、在对应的Default.aspx.cs文件中添加相应的控件实现代码。

（1）首先在Default.Aspx.cs文件中添加命名空间：

using System.Data;// DataTable位于此命名空间中

（2）添加控件实现代码：

protected void Page_Load(object sender, EventArgs e)

{

DataTable dt = default(DataTable);

dt = CreateDataTable();

//设置图表的数据源

Chart1.DataSource = dt;

//设置图表Y轴对应项

Chart1.Series[0].YValueMembers = "Volume1";

Chart1.Series[1].YValueMembers = "Volume2";

//设置图表X轴对应项

Chart1.Series[0].XValueMember = "Date";

//绑定数据

Chart1.DataBind();

}

private DataTable CreateDataTable()

{

//Create a DataTable as the data source of the Chart control

DataTable dt = new DataTable();

//Add three columns to the DataTable

dt.Columns.Add("Date");

dt.Columns.Add("Volume1");

dt.Columns.Add("Volume2");

DataRow dr;

//Add rows to the table which contains some random data for demonstration

dr = dt.NewRow();

dr["Date"] = "Jan";

dr["Volume1"] = 3731;

dr["Volume2"] = 4101;

dt.Rows.Add(dr);

dr = dt.NewRow();

dr["Date"] = "Feb";

dr["Volume1"] = 6024;

dr["Volume2"] = 4324;

dt.Rows.Add(dr);

dr = dt.NewRow();

dr["Date"] = "Mar";

dr["Volume1"] = 4935;

dr["Volume2"] = 2935;

dt.Rows.Add(dr);

dr = dt.NewRow();

dr["Date"] = "Apr";

dr["Volume1"] = 4466;

dr["Volume2"] = 5644;

dt.Rows.Add(dr);

dr = dt.NewRow();

dr["Date"] = "May";

dr["Volume1"] = 5117;

dr["Volume2"] = 5671;

dt.Rows.Add(dr);

dr = dt.NewRow();

dr["Date"] = "Jun";

dr["Volume1"] = 3546;

dr["Volume2"] = 4646;

dt.Rows.Add(dr);

return dt;

}

5、调试结果如下（其中WebSite1为项目名称）

“/WebSite1”应用程序中的服务器错误。

为 ChartImg.axd 执行子请求时出错。

说明: 执行当前 Web 请求期间，出现未经处理的异常。请检查堆栈跟踪信息，以了解有关该错误以及代码中导致错误的出处的详细信息。
异常详细信息:

System.Web.HttpException: 为 ChartImg.axd 执行子请求时出错。
源错误:

执行当前 Web 请求期间生成了未经处理的异常。可以使用下面的异常堆栈跟踪信息确定有关异常原因和发生位置的信息。

堆栈跟踪:

[HttpException (0x80004005): 为 ChartImg.axd 执行子请求时出错。]

   System.Web.HttpServerUtility.ExecuteInternal(IHttpHandler handler, TextWriter writer, Boolean preserveForm, Boolean setPreviousPage, VirtualPath path, VirtualPath filePath, String physPath, Exception error, String queryStringOverride) +3059030

   System.Web.HttpServerUtility.Execute(String path, TextWriter writer, Boolean preserveForm) +851

   System.Web.UI.DataVisualization.Charting.ChartHttpHandler.EnsureInitialized(Boolean hardCheck) +316

   System.Web.UI.DataVisualization.Charting.Chart.GetImageStorageMode() +24

……

VS2010 Chart控件（一）Chart控件在ASP.NET网站中的应用示例详解（C#语言）

“/WebSite1”应用程序中的服务器错误。

为 ChartImg.axd 执行子请求时出错。

猜你喜欢