vs2008mschart使用說明

1、本來在考慮是否繼續(xù)寫圖表控件的使用文章，畢竟，微軟自帶的例子已經(jīng)非常詳細(xì)了，花點(diǎn)時(shí)間參考一下基本上可以了解用法和使用特性，不過后來想想，還是寫一下咯，抽出其中大家關(guān)心的內(nèi)容，寫出其中常用的使用方法，可以省去大家的時(shí)間，在需要深入的時(shí)候再去詳細(xì)查看例子，也當(dāng)是學(xué)習(xí)筆記吧:)(BTW:我也是邊學(xué)習(xí)邊寫的，因此，寫的文章中難免有不足或失誤的地方，希望各位朋友指正出來咯，大家一起提高本文中基本上只會(huì)寫出最簡(jiǎn)單常用的功能，復(fù)雜的數(shù)據(jù)操作請(qǐng)參考微軟詳細(xì)的例程)一.數(shù)據(jù)源說到繪制圖表，可能很多人的第一反應(yīng)除了是圖表呈現(xiàn)的方式外，更關(guān)心的便是數(shù)據(jù)如何添加，記得在很多年前，哪時(shí)要繪制一個(gè)數(shù)據(jù)曲線圖，一直找不到好

2、的呈現(xiàn)方式，后來使用了 SVG的繪圖模式，不過在添加數(shù)據(jù)的時(shí)候可謂吃盡了苦頭，畢竟,SVG 只是一種描述語言，要?jiǎng)討B(tài)的實(shí)現(xiàn)一個(gè)圖表的繪制，是非常困難的.對(duì)于微軟的圖表控件，數(shù)據(jù)添加是一件很簡(jiǎn)單的方式，它支持多種數(shù)據(jù)添加方式，如：可以在圖表的設(shè)計(jì)界面，在屬性設(shè)置窗口中的 Series 屬性下的 Points 中添加需要的數(shù)據(jù).可以在圖表的設(shè)計(jì)界面中，在屬性中綁定一個(gè)數(shù)據(jù)源.可以在后臺(tái)代碼中，動(dòng)態(tài)添加數(shù)據(jù).可以在后臺(tái)代碼中設(shè)置一個(gè)或多個(gè)數(shù)據(jù)源，直接綁定到圖表中.在此處，我只著重講解一下第 3,4 兩點(diǎn).對(duì)于第 3 點(diǎn)，相對(duì)來說比較簡(jiǎn)單，在后臺(tái)彳 t 碼中，找到要添加代碼的 Series,通過它下面

3、 Points 的 Add、 AddXY、 AddY 等方法， 即可以實(shí)現(xiàn)數(shù)據(jù)的添加.例如：1.doublet;2.for(t=0;t=(2.5*Math.PI);t+=Math.PI/6)3.4.doublech1=Math.Sin(t);doublech2=Math.Sin(t-Math.PI/2);6.Chart1.SeriesChannel1.Points.AddXY(t,chi);5.7.Chart1.SeriesChannel2.Points.AddXY(t,ch2);8.)復(fù)制代碼注：代碼摘自微軟的例子，上例中，Chartl 為圖表的名字，Channel1、Channel2 分別

4、表示兩個(gè) Series 數(shù)據(jù)序列)二.綁定數(shù)據(jù)先來看看圖表控件都支持什么類型的數(shù)據(jù)綁定， 根據(jù)官方文檔的說法， 只要是實(shí)現(xiàn)了 lEnumerable接口的數(shù)據(jù)類型，都可以綁定到圖表控件中，例如：DataView,DataReader,DataSet,DataRow,DataColumn,Array,List,SqlCommand,OleDbCommand,SqlDataAdapter,及 OleDbDataAdapter 對(duì)象。對(duì)于開發(fā)來說，最常用的還是 DataView、DataReader、DataSet、DataRow、Array、List 這幾種類型了，有幾點(diǎn)需要注意一下：圖表控件支持

5、多數(shù)據(jù)源的綁定，例如：X 軸綁定一個(gè)數(shù)據(jù)集 ds1,Y 軸可以綁定另一個(gè)數(shù)據(jù)集 ds2,當(dāng)然也可以是 X 軸綁定到一個(gè) List 數(shù)據(jù)對(duì)象，丫軸綁定到一個(gè) DataView 對(duì)象等等。圖表控件的綁定方式一般有兩種，常規(guī)綁定及交差表的綁定。圖表控件的 Y 軸數(shù)據(jù)，支持一次綁定多個(gè)值，以繪制時(shí)間、區(qū)域、使用量等之類的圖形。綁定數(shù)據(jù)的流程如下：大意是，綁定數(shù)據(jù)里面是否有分組數(shù)據(jù)需要綁定，如果有，則調(diào)用交叉表綁定的方法。否則判斷是否時(shí)綁定 X 軸和 Y 軸(包括標(biāo)簽、超鏈接、圖例文字等自定義屬性)，如果是，則調(diào)用 Points.DataBind 方法進(jìn)行綁定操作。再判斷是否有不同的 X 軸或 Y 軸數(shù)

6、據(jù)，如果有，則分別調(diào)用 X,Y 軸的綁定方法 Points.DataBindX,Points.DataBindY 進(jìn)行數(shù)據(jù)綁定。最后，再判斷是否需要進(jìn)行多個(gè) Y 軸值的綁定。下面分別對(duì)幾種數(shù)據(jù)綁定的方法進(jìn)行一下說明：1 .綁定一張數(shù)據(jù)表綁定一張數(shù)據(jù)表，例如綁定一張普通的數(shù)據(jù)表，表數(shù)據(jù)如下綁定方法的代碼：1.stringmySelectQuery=SELECTName,SalesFROMREPS;2.OleDbConnectionmyConnection=newOleDbConnection(myConnectionString);3.OleDbCommandmyCommand=newOleDb

7、Command(mySelectQuery,myConnection);4.myCommand.Connection.Open();5.OleDbDataReadermyReader=myCommand.ExecuteReader(CommandBehavior.CloseConnection);6.Chart1.DataBindTable(myReader,Name);7.myReader.Close();8.myConnection.Close();復(fù)制代碼因?yàn)閿?shù)據(jù)源中只有兩列 Name 和 Sales,因此在調(diào)用 Chart1.DataBindTable 方法的時(shí)候，告訴了圖表 X 軸的

8、名稱為 Name,因此自動(dòng)將 Sales 設(shè)置為 Y 軸的數(shù)據(jù)了.生成的圖形如下：如果修改一下 Sql 語句為： SELECTName,ID,RegionIDFROMREPS;其它都不變化， 再看看圖表是如何處理另外兩個(gè)字段的，生成的圖表如下：此時(shí)，圖表自動(dòng)將 ID,RegionID 字段當(dāng)成了 Y 值，生成了兩個(gè) Series，因此每個(gè)用戶都有兩個(gè)值，生成的圖形也有兩個(gè)柱狀圖.上面是一種動(dòng)態(tài)綁定的方式，有人可能會(huì)問了，如果我想確定我要綁定的列，比如:X 軸綁定某個(gè)字段，Y 軸綁定某個(gè)字段如何操作呢？對(duì)于這種綁定，有幾種方法可以實(shí)現(xiàn).第一種：這種方法可能是很常見的，在原來的.NET 編程中出現(xiàn)

9、的機(jī)率非常之高，方法如下：1./設(shè)置數(shù)據(jù)源,myDv 是一個(gè)取出數(shù)據(jù)集的 DataView2.chart1.DataSource=myDv;3.4./分別設(shè)置圖表的 X 值和 Y 值5.chart1.SeriesSeries1.XValueMember=Name;6.chart1.SeriesSeries1.YValueMembers=Sales;7.8./綁定設(shè)置的數(shù)據(jù)9.chart1.DataBind();復(fù)制代碼第二種：即直接調(diào)用點(diǎn)的綁定方法1./myReader 為取得的 DataReader 對(duì)象2.Chart1.SeriesSeries1.Points.DataBindXY(myR

10、eader,Name,myReader,Sales);復(fù)制代碼第三種：調(diào)用 DataBind 的方法實(shí)現(xiàn)1.Chart1.SeriesSeries1.Points.DataBind(myReader,Name,Sales,);上面幾種方法得到的效果都是一樣的.當(dāng)然了，上面三種方法需要自己建立 Series,要顯示兩個(gè)柱狀圖，像上面的例子中的圖形，那么得手動(dòng)建立兩個(gè) Series,然后分別進(jìn)行上面的綁定操作。此處說一下 Label 和 Tooltip 的綁定方式，要在綁定的圖表中顯示標(biāo)簽(Label)及提示(Tooltip),可以在綁定的時(shí)候，設(shè)置綁定的屬性.對(duì)于上面的第一、 二種方法， 可以調(diào)

11、用如下的方法來設(shè)置 Label和 Tooltip;例如，兩個(gè)數(shù)據(jù)序列名稱分別為 Series1 和 Series2,設(shè)置代碼如下：1.Chart1.SeriesSeries1.Label=#VAL;2.Chart1.SeriesSeries1.Points.DataBind(myDs.Tables0.DefaultView,Name,ID,);3.Chart1.SeriesSeries2.Label=#VAL;4.Chart1.SeriesSeries2.Points.DataBind(myDs.Tables0.DefaultView,Name,RegionID,);其中的#VAL 是 Lab

12、el 和 Tooltip 的通配符，表示取默認(rèn) Y 軸變量的意思。具體的詳細(xì)操作可以參考例程：ChartFeatures/Labels 下面的內(nèi)容。以后有空我也寫一篇 Label 的和其它變量的設(shè)置吧。對(duì)于第三種調(diào)用的綁定則稍微不同，如下：1.Chart1.SeriesSeries1.Points.DataBind(myDs.Tables0.DefaultView,Name,ID,Label=ID,ToolTip=RegionID);2.Chart1.SeriesSeries2.Points.DataBind(myDs.Tables0.DefaultView,Name,RegionID,Lab

13、el=RegionID,ToolTip=ID);其實(shí)就是利用第三個(gè)屬性，通過格式化的字符串來設(shè)置綁定屬性，Label 表示標(biāo)簽，ToolTip 表示提示信息，Url 表示超鏈接等等。最后生成的圖片如下：2.綁定一個(gè)交叉表微軟的圖表控件提供了一個(gè)交叉表數(shù)據(jù)的綁定方法 DataBindCrossTable,它可以根據(jù)數(shù)據(jù)動(dòng)態(tài)的生成數(shù)據(jù)序列(Series)，借用官方的例子，數(shù)據(jù)庫(kù)的表數(shù)據(jù)如下：我們先看看 DataBindCrossTable 的參數(shù)，它有兩個(gè)重載方法，分別是：1.publicvoidDataBindCrossTable(2.IEnumerabledataSource,3.string

14、seriesGroupByField,4.stringxField,5.stringyFields,6.stringotherFields,7.PointSortOrdersortingOrder8.)以及1.publicvoidDataBindCrossTable(2.IEnumerabledataSource,3.stringseriesGroupByField,4.stringxField,5.stringyFields,6.stringotherFields7.)每個(gè)參數(shù)的含義如下：dataSource要綁定的數(shù)據(jù)源.seriesGroupByField要分組統(tǒng)計(jì)的數(shù)據(jù)字段名稱，例如按

15、姓名、日期等xFieldX 軸綁定的字段名稱.yFieldsY 軸綁定的字段名稱，如果需要綁定多個(gè)字段，則用逗號(hào)將字段名分開 otherFields其它數(shù)據(jù)字段屬性，就是上面剛講的，標(biāo)簽、提示、Url 等屬性.sortingOrder設(shè)置數(shù)據(jù)是正確還是逆序排列.此時(shí)要以統(tǒng)計(jì)每個(gè)用戶的年銷售曲線，那么分組統(tǒng)計(jì)的字段名應(yīng)該設(shè)置為下：1.Chart1.DataBindCrossTable(2.myReader,3.Name,4.Year,5.Sales,6.Label=CommissionsC);用如上的方法綁定，生成的圖形如下：相反，如果要統(tǒng)計(jì)用戶每年的曲線,下即可，如下：Name,如則將字段反轉(zhuǎn)

16、1.Chart1.DataBindCrossTable(2.myReader,3.Year,4.Name,5.Sales,6.Label=CommissionsC）;這次就先說到這里咯，說幾個(gè)需要注意的地方：在進(jìn)行 Y 軸數(shù)據(jù)綁定的時(shí)候，如果要綁定多個(gè)字段，默認(rèn)情況會(huì)出錯(cuò)，那是因?yàn)樾枰O(shè)置 Y軸的可保存值數(shù)量，設(shè)置為你需要保存的數(shù)量即可，設(shè)置的地點(diǎn)在：Series-YValuesPrePoint,設(shè)置為你需要顯示的個(gè)數(shù)即可。在進(jìn)行 DataTable 綁定的時(shí)候，Label、ToolTip 等屬性的字段格式化比較困難（otherFields 屬性），我試了半天，也就試出了一次只能綁定一個(gè)字段，

17、因?yàn)槭呛蛿?shù)據(jù)集綁定，如果要在標(biāo)簽上增加文字的話，可以使用：Fieldxxxx#xxxx,其中#會(huì)替換為相應(yīng)的文字，例如：Field 的值為 45,那么最后的呈現(xiàn)的結(jié)果就是：xxxx45XXXX.BTW:有很多東西我自己也在研究中，因此說得不是很完善，希望大家一起研究吧下次再研究一下數(shù)據(jù)操作方面的東東以及標(biāo)簽等的顯示。（文/shuncy）（1）介紹 MSChart 的常用屬性和事件1.MSChart 的元素組成最常用的屬性包括1.ChartAreas:增加多個(gè)繪圖區(qū)域，每個(gè)繪圖區(qū)域包含獨(dú)立的圖表組、數(shù)據(jù)源，用于多個(gè)圖表類型在一個(gè)繪圖區(qū)不兼容時(shí)。1.AlignmentOrientation:圖表區(qū)

18、對(duì)齊方向，定義兩個(gè)繪圖區(qū)域間的對(duì)齊方式。2.AlignmentStyle:圖表區(qū)對(duì)齊類型，定義圖表間用以對(duì)其的元素。3.AlignWithChartArea:參照對(duì)齊的繪圖區(qū)名稱。4.InnerPlotPosition:圖表在繪圖區(qū)內(nèi)的位置屬性。ThisWeekXAxisTitle圖萩區(qū)圖萩區(qū)2.1.Auto:是否自動(dòng)對(duì)齊。2.Height:圖表在繪圖區(qū)內(nèi)的高度（百分比，取值在 3.Width:圖表在繪圖區(qū)內(nèi)的寬度（百分比，取值在 4.X,Y:圖表在繪圖區(qū)內(nèi)左上角坐標(biāo)5.Position:繪圖區(qū)位置屬性，同 InnerPlotPosition6.Name:繪圖區(qū)名稱。7.Axis:坐標(biāo)軸集合1

19、.Title:坐標(biāo)軸標(biāo)題2.TitleAlignment:坐標(biāo)軸標(biāo)題對(duì)齊方式3.Interval:軸刻度間隔大小4.IntervalOffset:軸刻度偏移量大小5.MinorGrid:次要輔助線6.MinorTickMark:次要刻度線7.MajorGrid:主要輔助線8.MajorTickMark:主要刻度線2.0-100)0-100)DataSourcelD:MSChart 的數(shù)據(jù)源。3.Legends:圖例說明。4.Palette:圖表外觀定義。5.Series:最重要的屬性，圖表集合，就是最終看到的餅圖、柱狀圖、線圖、點(diǎn)圖等構(gòu)成的集合；可以將多種相互兼容的類型放在一個(gè)繪圖區(qū)域內(nèi)，形成

20、復(fù)合1.IsValueShownAsLabel:是否顯示數(shù)據(jù)點(diǎn)標(biāo)簽，如果為 true,在圖表中顯示每一個(gè)數(shù)據(jù)值2.Label:數(shù)據(jù)點(diǎn)標(biāo)簽文本3.LabelFormat:數(shù)據(jù)點(diǎn)標(biāo)簽文本格式4.LabelAngle:標(biāo)簽字體角度5.Name:圖表名稱6.Points:數(shù)據(jù)點(diǎn)集合7.XValueType:橫坐標(biāo)軸類型8.YValueType:縱坐標(biāo)軸類型9.XValueMember:橫坐標(biāo)綁定的數(shù)據(jù)源（如果數(shù)據(jù)源為 Table,則填寫橫坐標(biāo)要顯示的字段名稱）10.YValueMembers:縱坐標(biāo)綁定的數(shù)據(jù)源(如果數(shù)據(jù)源為 Table,則填寫縱坐標(biāo)要顯示的字段名稱，縱坐標(biāo)可以有兩個(gè))11.Chart

21、Area:圖表所屬的繪圖區(qū)域名稱12.ChartType:圖表類型(柱形、餅形、線形、點(diǎn)形等)13.Legend:圖表使用的圖例名稱6.Titles:標(biāo)題集合。7.width:MSChart 的寬度。8.height:MSChart 的高度。3.常用事件：1.Series1.Points.DataBind()綁定數(shù)據(jù)點(diǎn)集合，如果要在一個(gè) MSChart 控件的一個(gè)繪圖區(qū)(ChartArea)內(nèi)添加多個(gè)不同數(shù)據(jù)源的圖表，就用這個(gè)主動(dòng)綁定數(shù)據(jù)集合的方法。可以將表中指定字段的值綁定到指定的坐標(biāo)軸上。2.MSChart1.DataBind()給整個(gè) MSChart 綁定一個(gè)數(shù)據(jù)源，該 MSChart

22、中的圖表全部可以使用該數(shù)據(jù)源作為統(tǒng)計(jì)來源介紹 MSChart 的常用屬性和事件MSChart 的元素組成最常用的屬性包括ChartAreas:增加多個(gè)繪圖區(qū)域，每個(gè)繪圖區(qū)域包含獨(dú)立的圖表組、數(shù)據(jù)源，用于多個(gè)圖表類型在一個(gè)繪圖區(qū)不兼容時(shí)。AlignmentOrientation:圖表區(qū)對(duì)齊方向，定義兩個(gè)繪圖區(qū)域間的對(duì)齊方式。Alignmentstyle:圖表區(qū)對(duì)齊類型，定義圖表間用以對(duì)其的元素。AlignWithChartArea:參照對(duì)齊的繪圖區(qū)名稱。InnerPlotPosition:圖表在繪圖區(qū)內(nèi)的位置屬性。Auto:是否自動(dòng)對(duì)齊。Height:圖表在繪圖區(qū)內(nèi)的高度（百分比，取值在 0-1

23、00）Width:圖表在繪圖區(qū)內(nèi)的寬度（百分比，取值在 0-100）X,Y:圖表在繪圖區(qū)內(nèi)左上角坐標(biāo)Position:繪圖區(qū)位置屬性，同 InnerPlotPosition。Name:繪圖區(qū)名稱。Axis:坐標(biāo)軸集合Title:坐標(biāo)軸標(biāo)題TitleAlignment:坐標(biāo)軸標(biāo)題對(duì)齊方式Interval:軸刻度間隔大小IntervalOffset:軸刻度偏移量大小MinorGrid:次要輔助線MinorTickMark:次要刻度線MajorGrid:主要輔助線MajorTickMark:主要刻度線DataSourcelD:MSChart 的數(shù)據(jù)源。Legends:圖例說明。Palette:圖表外

24、觀定義。Series:最重要的屬性，圖表集合，就是最終看到的餅圖、柱狀圖、線圖、點(diǎn)圖等構(gòu)成的集合；可以將多種相互兼容的類型放在一個(gè)繪圖區(qū)域內(nèi)，形成復(fù)合圖。IsValueShownAsLabel:是否顯示數(shù)據(jù)點(diǎn)標(biāo)簽，如果為 true,在圖表中顯示每一個(gè)數(shù)據(jù)值Label:數(shù)據(jù)點(diǎn)標(biāo)簽文本LabelFormat:數(shù)據(jù)點(diǎn)標(biāo)簽文本格式LabelAngle:標(biāo)簽字體角度Name:圖表名稱Points:數(shù)據(jù)點(diǎn)集合XValueType:橫坐標(biāo)軸類型YValueType:縱坐標(biāo)軸類型XValueMember:橫坐標(biāo)綁定的數(shù)據(jù)源（如果數(shù)據(jù)源為 Table,則填寫橫坐標(biāo)要顯示的字段名稱）YValueMembers:縱

25、坐標(biāo)綁定的數(shù)據(jù)源（如果數(shù)據(jù)源為 Table,則填寫縱坐標(biāo)要顯示的字段名稱，縱坐標(biāo)可以有兩個(gè)）ChartArea:圖表所屬的繪圖區(qū)域名稱ChartType:圖表類型(柱形、餅形、線形、點(diǎn)形等)Legend:圖表使用的圖例名稱Titles:標(biāo)題集合。width:MSChart 的寬度。height:MSChart 的高度。常用事件：Series1.Points.DataBind()綁定數(shù)據(jù)點(diǎn)集合，如果要在一個(gè) MSChart 控件的一個(gè)繪圖區(qū)(ChartArea)內(nèi)添加多個(gè)不同數(shù)據(jù)源的圖表，就用這個(gè)主動(dòng)綁定數(shù)據(jù)集合的方法?？梢詫⒈碇兄付ㄗ侄蔚闹到壎ǖ街付ǖ淖鴺?biāo)軸上。MSChart1.DataBin

26、d()給整個(gè) MSChart 綁定一個(gè)數(shù)據(jù)源，該 MSChart 中的圖表全部可以使用該數(shù)據(jù)源作為統(tǒng)計(jì)來源。示例：privatevoidBindGrid()chart2.Width=800;chart2.Height=600;/作圖區(qū)的顯示屬性設(shè)置chart2.ChartAreasChartArea1.AxisX.IsMarginVisible=false;chart2.ChartAreasChartArea1.Area3DStyle.Enable3D=false;/背景色設(shè)置chart2.ChartAreasChartArea1.ShadowColor=Color.Transparent;c

27、hart2.ChartAreasChartArea1.BackColor=Color.FromArgb(209,237,254);/該處設(shè)置為了由天藍(lán)到白色的逐漸變化chart2.ChartAreasChartArea1.BackGradientStyle=Gradientstyle.TopBottom;chart2.ChartAreasChartArea1.BackSecondaryColor=Color.White;/X,Y 坐標(biāo)線顏色和大小chart2.ChartAreasChartArea1.AxisX.LineC010r=Color.FromArgb(64,64,64,64);cha

28、rt2.ChartAreasChartArea1.AxisY.LineColor=Color.FromArgb(64,64,64,64);chart2.ChartAreasChartArea1.AxisX.LineWidth=2;chart2.ChartAreasChartArea1.AxisY.LineWidth=2;chart2.ChartAreasChartArea1.AxisX.Title=時(shí)間；chart2.ChartAreasChartArea1.AxisY.Title=灰量；/中間 X,Y 線條的顏色設(shè)置chart2.ChartAreasChartArea1.AxisX.Majo

29、rGrid.LineColor=Color.FromArgb(64,64,64,64);chart2.ChartAreasChartArea1.AxisY.MajorGrid.LineColor=Color.FromArgb(64,64,64,64);/X.Y 軸數(shù)據(jù)顯示間隔chart2.ChartAreasChartArea1.AxisX.Interval=1.0;/X 軸數(shù)據(jù)顯示間隔chart2.ChartAreasChartArea1.AxisX.IntervalType=DateTimeIntervalType.Days;chart2.ChartAreasChartArea1.Axis

30、X.IntervalOffset=0.0;chart2.ChartAreasChartArea1.AxisX.IntervalOffsetType=DateTimeIntervalType.Days;chart2.ChartAreasChartArea1.AxisX.LabelStyle.Format=M-d;chart2.ChartAreasChartArea1.AxisY.Interval=200;/y軸數(shù)據(jù)顯示間隔/X 軸線條顯示間隔/Zchart2.ChartAreasChartArea1.AxisX.MajorGrid.IntervalType=DateTimelntervalType.Hours;chart2.Palette=ChartColorPalette.P