ASP.NET 3.5圖表控件親密接觸
譯文【51CTO快譯】圖表是一種直觀易懂的顯示信息的方式,為了在.Net應用程序中支持圖表,微軟在.Net SP1和Visual Studio 2008中提供了一個插件以支持強壯的圖表,再也不用花錢購買昂貴的、有專利權的軟件了。為了能夠創建本文所說的圖表,你需要安裝Microsoft Chart Controls for Microsoft .NET Framework 3.5和Microsoft Chart Controls add-on for Microsoft Visual Studio 2008。如果你對圖表還不熟悉,那就仔細閱讀本文吧。
ChartAreas
ChartAreas屬性是ChartArea對象的集合,ChartArea負責顯示容器的屬性或圖表的背景,由于不止一個,這就意味著MSChart控件可以包含多個圖表。
在使用多個ChartAreas時理解下面幾點內容非常重要:
在技術上可以控制ChartArea的位置,因此多個ChartArea可以疊加,但不推薦這么做,建議在MSChart控件內的獨立區域內繪制它們,為了合并或覆蓋數據點,推薦在一個ChartArea內使用多個序列,后面將會有介紹。默認情況下,控件會為你自動調整大小和位置。
單個ChartArea將會獨立調整以適應數據,正如上圖所顯示的,第二個ChartArea中的Y值更大,數據點也更少。
多個ChartArea允許你使用多個不相容的ChartTypes(序列對象屬性,控制圖表的顯示類型,如條形、柱狀和餅狀)顯示圖表,圖表任然顯示在相同的MSChart控件內。
對于單個ChartArea,有許多獨立的屬性可以設置和調整,這樣你就可以自行調整圖表區域以滿足不同的需要,它的大部分屬性和面板控件的屬性都差不多,因此這里我們就不多說了,只說一下ChartArea唯一的屬性,下面是這些唯一屬性的清單:
3D樣式:使用ChartArea的Area3DStyle屬性和子屬性,我們可以創建漂亮的、十分搶眼的3D圖表,無論是在設計器中還是在代碼中都必需將Enable3D屬性設置為TRUE,其余的參數可以通過調整旋轉、視角、照明方式和其它3D元素,讓一個圖像看起來具有3D效果。
坐標軸控制和樣式:坐標軸集合包括x軸和y軸,以及第二個x軸和y軸,這四個項目的屬性允許你設置樣式、設置標簽、定義間隔、設置工具提示、設置縮放等,如果你的圖標要求精確的間隔、標簽或其它特殊的顯示需要,你可以使用這些屬性。例如,你可以顛倒坐標軸的值,或控制如何在x軸上顯示標簽。如果你使用圖表顯示實時信息,可以使用IntervalType屬性來配置基于日期和時間顯示數據點。
選擇光標:如果你對用戶使用鼠標選擇數據點或點擊和拖拉范圍非常感興趣,這個時候就要用到CursorX和CursorY屬性了,你可以啟用選擇,并設置最初的光標位置或范圍。
Series
和ChartAreas屬性一樣,Series屬性是一個集合。單個ChartAreas實例包括3個重要的屬性:ChartArea屬性、ChartType屬性和Points集合屬性。
ChartArea:識別使用哪個ChartArea。
ChartType:識別表示數據時使用的圖標類型,基本的類型有條形、柱狀、餅狀和線狀,還有一些高級選項,如K線圖、曲線圖、追星圖等。
Points:它是DataPoint對象的集合,包括x值和y值,它們是繪在圖表上的序列的一部分,數據綁定時最常用的增加數據點的方法,本文后面會做介紹。
Series實例上的其他常用屬性和人們廣泛了解的還包括:
Color:這個屬性用于單獨設置每個數據點序列的顏色,默認情況下,這個屬性是空白的,控件會自動改變顏色,以保證將多個序列區分開來。
IsValueShownAsLabel:將這個屬性的值設為TRUE后(默認是FLASE),圖表將顯示每個數據點的Y值。
在講多個序列實例合并到一個ChartArea中時,例如下面兩個獨立的圖表,每個圖表都包括6個數據點。
假設你想比較這兩個圖表中的數據點,你可以將這兩個MSChart控件放在一起,相互挨著,也可以在一個圖表中使用兩個ChartAreas,這兩種方式都沒問題,但都不能給你很好的視覺比較效果,這就是為什么MSChart要合并數據點,讓你可以肩并肩地對比數據。將第二個圖表中的數據作為第二個序列實例添加到第一個圖表中,一下子就從視覺上改善了對比的效果。
使用多個序列實例時,記住每個序列使用的ChartType非常重要,不是所有ChartType選項放在一起都是兼容的。
總的說來,圖表控件的層次如下:MSChart控件有零到多個ChartAreas,一個ChartAreas有零到多個序列(Series),一個序列有零到多個數據點(DataPoints)。
#p#
數據綁定
數據可以在設計時或運行時綁定,在設計時綁定要使用到數據源配置向導,在MSChart控件數據源屬性下拉按鈕中可以找到它,如果你已經配置過數據源,你可以在下拉列表中進行選擇。
圖表函數
DataBind():綁定數據源的基礎函數。
DataBindTable():綁定圖表到特定的數據表,但不允許綁定多個Y值,每個序列不同的數據源或x值、y值有不同的數據源。
DataBindCrossTab():將圖表綁定到一個數據源,并允許基于一個數據列進行分組,在具體指定的列上每個唯一的值將自動創建一個單獨的序列。
數據點函數
DataBind():綁定一個序列到單一的數據源,并允許其它屬性綁定到同一個數據源(如標簽、工具提示、圖例文本等)。
DataBindXY():允許將x值和y值綁定到獨立的數據源,它也用于為每個序列綁定單獨的數據源。
DataBindY():僅綁定序列中數據點的Y值。
數據源配置好后,MSChart控件可以綁定所有的實現了IEnumerable接口的對象,包括但不限于DataReader、DataSet、Array和List。也允許綁定SqlCommand、OleDbCommand、SqlDataAdapters和OleDbDataAdapter對象。
圖例
圖例屬性也是一個集合(叫做圖例對象),為了快速理解使用圖例可以做什么,可以把它想象成一個簡單的表,假設你有一個表格,默認有兩列,你可以從前面的例子看出,使用序列實例名的默認設置和序列的顏色,圖例可以通過添加額外的單元列到CellColumn集合上進行擴展,還可以添加列標題,便于更好地理解圖例。在下面的例子,標題“Name”和“Color”已經添加到默認圖例實例上。
每個序列的圖例文本由序列自身控制,在每個序列實例上使用LegendText屬性以改變圖表上圖例的文本,你也可以給圖例一個標題。在下面的例子,圖例被標題為“圖例”,除此之外,你還可以輸入文本,你也可以設置屬性來處理標題的對齊、顏色和字體,你會發現大部分MSChart屬性這類操作和自定義,只要你愿意。
最后,圖表的圖例有兩種放置方法,默認是在ChartArea外部,位于右側,緊挨ChartArea。另一種是通過坐標進行精確控制,停靠在ChartArea內,通過設置ChartArea對象的DockedToChartArea屬性實現。
標題
標題和前面討論到的其它屬性類似,為每個標題創建獨立的實例時,圖表控件會在標題集合中保留這些標題實例,理解標題的最好方法是將其認為是一個標簽控件,這意味著標題可以頂端居中、左端居中、頂端居左和底部居右。
在下面的例子中,圖表擁有一個字體大小,頂端居中的標題,叫做“My First Chart”。
提示和技巧
3D透明性:可以在序列上使用一些透明屬性讓3D圖表看起來更漂亮,在設計時,可以將Alpha值添加到要使用的顏色的RGB代碼中,在屬性窗口中,選擇序列集,選擇一個序列,在該序列的屬性窗口上,在現有的3個RGB值前添加一個Alpha值,你可以使用下面的代碼完成同樣的任務:
chart1.Series["Series1"].Color = Color.FromArgb(220, 123, 123, 123); |
利用設計器:在大多數時候,在代碼運行時才配置圖表控件的屬性和配置選項是很愚蠢的,當你的應用程序以靜態的方式使用圖表時(如一直都是兩個序列的條形圖),在設計時,設計器允許你配置和查看圖表。另一方面,如果你傾向于動態使用圖表(如一會兒是餅圖,一會兒是線狀圖,用戶在運行時可以自行修改),這種情況需要代碼在運行時修改設計,不用為每種圖表類型都手動創建代碼,使用設計器創建后,從設計文件中去除多余的代碼,這樣可以節約你編碼和決定使用哪個屬性的時間。
邏輯名:這是一個通用的優秀編程習慣,在創建ChartAreas、Series和Titles等時,請確定都給它們取了名字,并且是容易記住的,例如,chart1.Series["Series1"]…, chart1.Series["Series2"]…就比chart1.Series["salesrepearningquarter"]…, chart1.Series["salesrepcomdatabyquarter"]…更容易引入錯誤。
小結
微軟的圖表控件提供了強壯的、靈活的和可自定義的圖表控件,為顯示提供給用戶的信息提供了一種更簡單可接受的方法,本文講了圖表的高級屬性,現在你可以開始創建好看的圖表贏得客戶的歡心。
原文:Microsoft Charts Overview 作者:Matt Goebel,Rachel Baker
【編輯推薦】