步驟如下:
1、
其中.NET Framework x.x中,從4版本開始新增Chart控件。(3.5及早期版本無Chart控件。)
3、直接拖動Chart控件到Default .aspx的 之間(拖動過程中自動生成相應代碼,根據需要自行修改)。
示例如下:
<<SPAN style="FONT-SIZE: 9.5pt; FONT-FAMILY: nsimsun; BACKGROUND: yellow; COLOR: maroon; mso-bidi-font-family: nsimsun; mso-font-kerning: 0pt; mso-highlight: yellow">asp:Content ID="BodyContent" runat="server"ContentPlaceHolderID="MainContent" Height="400px" Width="500px">
<<SPAN style="BACKGROUND: yellow; COLOR: maroon; mso-highlight: yellow">asp:Chart ID="Chart1"runat="server">
<<SPAN style="COLOR: maroon">Series>
<<SPAN style="BACKGROUND: yellow; COLOR: maroon; mso-highlight: yellow">asp:SeriesName="Series1" ChartType="Column" ChartArea="ChartArea1">
</<SPAN style="BACKGROUND: yellow; COLOR: maroon; mso-highlight: yellow">asp:Series>
<<SPAN style="COLOR: maroon">asp:Series Name="Series2" ChartType="Column"ChartArea="ChartArea1">
</<SPAN style="COLOR: maroon">asp:Series>
</<SPAN style="COLOR: maroon">Series>
<<SPAN style="COLOR: maroon">ChartAreas>
<<SPAN style="COLOR: maroon">asp:ChartArea Name="ChartArea1">
</<SPAN style="COLOR: maroon">asp:ChartArea>
</<SPAN style="COLOR: maroon">ChartAreas>
</<SPAN style="COLOR: maroon">asp:Chart>
</<SPAN style="FONT-SIZE: 9.5pt; FONT-FAMILY: nsimsun; COLOR: maroon; mso-bidi-font-family: nsimsun; mso-font-kerning: 0pt">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 執行子請求時出錯。
源錯誤:
|
|
堆棧跟蹤:
[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 …… |
