ASP.NET中制作各種3D圖表的方法
前言
大家都知道通過圖表控件,我們即能表示數(shù)據(jù)又能比較各種圖表的數(shù)據(jù),例如比較去年和今年的收入。圖表的類型也有很多,如柱狀圖、折線圖、條形圖、組合圖等等。
首先,我將展示如何繪制出一個簡單的圖表。
簡單圖表的步驟
步驟1
新建一個”ASP.NET Empty Web Site”。
步驟2
在Solution Explorer 中添加新項目,添加new form。
步驟3
工具欄—標(biāo)準(zhǔn)—項目。我們會看到在.Net Framework Component.中有兩個圖表選項,打勾并保存。.NET Framework 4.0 及以上版本將chart控件集成到了工具箱toolbox里面,3.5及早期版本中則需要此步驟。
步驟4
進(jìn)入工具欄—數(shù)據(jù)—圖表,從工具欄中拖到頁面。
步驟5
將chart控件拖到頁面以后,IDE會自動在web.config 文件中添加以下4個標(biāo)簽,同時在Default.aspx 的designer頁面也能看到一個普通圖表。
<appSettings> <add key="ChartImageHandler" value="storage=file;timeout=20;dir=c:\TempImageFiles\;" /> </appSettings>
<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" /> </httpHandlers>
<controls> <add tagPrefix="asp" namespace="System.Web.UI.DataVisualization.Charting" assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" /> </controls>
<assemblies> <add assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/> </assemblies>
步驟6
右擊圖表,進(jìn)入屬性。屬性窗口選擇并添加數(shù)據(jù)源。當(dāng)然我們也可以用代碼將數(shù)據(jù)綁定到圖表的方式,下文的3D圖表的代碼我就采用了綁定方法。
步驟7
成功添加數(shù)據(jù)源之后,返回屬性窗口,點擊系列,我們會看到這樣的一個窗口。
步驟8
在系列的數(shù)據(jù)源中設(shè)置X軸和Y的對應(yīng)項,這里我將X軸的對應(yīng)項的值設(shè)置為姓名, Y軸的對應(yīng)項的值設(shè)置為年齡。如果想要在圖表中分別為X和Y軸命名,那么返回屬性窗口,點擊圖表區(qū),你就會看到一個Axes的屬性。
步驟9
運(yùn)行程序,輸出結(jié)果如下圖。
圖表的類型
如果你想要各種類型的圖表,這很簡單,右擊圖表—顯示智能標(biāo)簽,就能選取各種圖表類型了。
3D 圖表
與其他圖表相比,3D圖表的優(yōu)勢在于看起來更清晰、更直觀?,F(xiàn)在我們就來討論如何制作3D圖表。
首先新建一個網(wǎng)站,將圖表拖到aspx頁面。如我上述所說,代碼會自動添加到web.config文件中。然后只有在aspx頁面中有一個圖表區(qū)標(biāo)簽。我們把3D改為true。我們也可以使用向?qū)?,右擊圖表—屬性—圖表區(qū)屬性,然后在3D圖表設(shè)置中將3D改為true,默認(rèn)情況下就會是false。
代碼:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ExamChart.aspx.cs" Inherits="ExamChart" %> <%@ Register Assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI.DataVisualization.Charting" TagPrefix="asp" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <div> <asp:Chart ID="ScoreChart" Width="600px" Height="320px" runat="server" BackColor="Silver" BackGradientStyle="LeftRight" BorderlineWidth="2" TabIndex="2" onload="ScoreChart_Load"> <Series> <asp:Series Name="RunSeries" ChartArea="ChartArea1"> </asp:Series> </Series> <ChartAreas> <asp:ChartArea Name="ChartArea1"> <AxisY Title="得分"> </AxisY> <AxisX Title="姓名"> </AxisX> <Area3DStyle Enable3D="True" WallWidth="10"></Area3DStyle> </asp:ChartArea> </ChartAreas> <Titles> <asp:Title Name="Title1" Text="得分情況"> </asp:Title> </Titles> </asp:Chart> </div> </form> </body> </html>
然后新建一個類:
public class run { public string Name { get; set; } public int Point { get; set; } }
創(chuàng)建數(shù)據(jù)源,將數(shù)據(jù)源綁定到圖表中,綁定方法的代碼如下:
using System; using System.Collections.Generic; using System.Web.UI; using System.Web.UI.DataVisualization.Charting; public partial class ExamChart : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { BindData(); } } private void BindData() { var runs = new List<run>() { new run() { Name = "王利", Point = 200}, new run() { Name = "張明", Point = 32 }, new run() { Name = "孫超", Point = 78 }, new run() { Name = "李飛", Point = 50 }, new run() { Name = "趙越", Point = 32 }, new run() { Name = "王洪", Point = 155}, new run() { Name = "宋偉", Point = 22 } }; var series = ScoreChart.Series["RunSeries"]; foreach (var exam in runs) { var point = new DataPoint(); point.SetValueXY(exam.Name, exam.Point); point.Label = exam.Point.ToString(); series.Points.Add(point); } ScoreChart.DataSource = runs; ScoreChart.DataBind(); } protected void ScoreChart_Load(object sender, EventArgs e) { } }
運(yùn)行程序,效果圖:
我們知道,生效3D后我們就可以創(chuàng)建一個3D圖表,它是一個布爾類型可能是為true也可能是為false,默認(rèn)情況下通常為false。此外,在ASP.NET中,3D圖表的角度也可以調(diào)整,介于90度到-90度之間。-90度會使圖表會完全處于置底,90度則會完全置頂。有一個屬性被稱為“Is clustered”屬性是一個布爾值,即使使用具有相同類型和性質(zhì)的多個圖表,它也能展現(xiàn)良好的視圖效果。
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。
相關(guān)文章
ASP.NET web.config中 數(shù)據(jù)庫連接字符串加密解密
本文主要介紹利用aspnet_regiis.exe工具對web.config中connectionStrings節(jié)點進(jìn)行加密和解密的過程,希望對大家有所幫助。2016-05-05asp.net下用Aspose.Words for .NET動態(tài)生成word文檔中的圖片或水印的方法
本文詳細(xì)講解如何使用Aspose.Words for .NET的組件來生成word文檔與水印的方法,請看本文內(nèi)容。2010-04-04.Net 下區(qū)別使用 ByRef/ByVal 的重要性 分享
這篇文章介紹了.Net 下區(qū)別使用 ByRef/ByVal 的重要性,有需要的朋友可以參考一下2013-07-07ASP.NET中DataTable與DataSet之間的轉(zhuǎn)換示例
如果你的數(shù)據(jù)不需要做關(guān)系映射,直接用DataTable效率比較高,下面有個不錯的示例,感興趣的朋友可以參考下2013-09-09"PageMethods未定義"或"對象不支持此屬性或方法"解決方法分享
PageMethods未定義或?qū)ο蟛恢С执藢傩曰蚍椒ń鉀Q方法,需要的朋友可以參考下。2010-12-12MVC使用極驗驗證制作登錄驗證碼學(xué)習(xí)筆記7
這篇文章主要介紹了MVC使用極驗驗證制作登錄驗證碼學(xué)習(xí)筆記,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-09-09.Net?core?Blazor+自定義日志提供器實現(xiàn)實時日志查看器的原理解析
我們經(jīng)常遠(yuǎn)程連接服務(wù)器去查看日志,比較麻煩,如果直接訪問項目的某個頁面就能實時查看日志就比較奈斯了,結(jié)合blazor實現(xiàn)了基本效果,這篇文章主要介紹了.Net?core?Blazor+自定義日志提供器實現(xiàn)實時日志查看器,需要的朋友可以參考下2022-10-10