mschart控件使用詳解

一.數(shù)據(jù)源說到繪制圖表，可能很多人的第一反應(yīng)除了是圖表呈現(xiàn)的方式外，更關(guān)心的便是數(shù)據(jù)如何添加，記得在很多年前，哪時要繪制一個數(shù)據(jù)曲線圖，一直找不到好的呈現(xiàn)方式，后來使用了SVG的繪圖模式，不過在添加數(shù)據(jù)的時候可謂吃盡了苦頭，畢竟，SVG只是一種描述語言，要動態(tài)的實現(xiàn)一個圖表的繪制，是非常困難的.對于微軟的圖表控件，數(shù)據(jù)添加是一件很簡單的方式，它支持多種數(shù)據(jù)添加方式，如：可以在圖表的設(shè)計界面，在屬性設(shè)置窗口中的Series屬性下的Points中添加需要的數(shù)據(jù).可以在圖表的設(shè)計界面中，在屬性中綁定一個數(shù)據(jù)源.可以在后臺代碼中，動態(tài)添加數(shù)據(jù).可以在后臺代碼中設(shè)置一個或多個數(shù)據(jù)源，直接綁定到圖表中.在此處，我只著重講解一下第3,4兩點.對于第3點，相對來說比較簡單，在后臺代碼中，找到要添加代碼的Series,通過它下面Points的Add、AddXY、AddY等方法，即可以實現(xiàn)數(shù)據(jù)的添加.例如：doublet;for(t =0;t<=(2.5*Math.PI);t+=Math.PI/6)TOC\o"1-5"\h\z{doublechi=Math.Sin(t);doublech2=Math.Sin(t-Math.PI/2);Chart1.Series["Channel1"].Points.AddXY(t, chi);Chart1.Series["Channel2"].Points.AddXY(t, ch2);}復(fù)制代碼注：代碼摘自微軟的例子，上例中，Charti為圖表的名字，Channel1、Channel2分別表示兩個Series數(shù)據(jù)序列)二.綁定數(shù)據(jù)先來看看圖表控件都支持什么類型的數(shù)據(jù)綁定，根據(jù)官方文檔的說法，只要是實現(xiàn)了【Enumerable接口的數(shù)據(jù)類型，都可以綁定到圖表控件中，例如：DataView,DataReader,DataSet,DataRow,DataColumn,Array,List,SqlCommand,OleDbCommand,SqlDataAdapter,及OleDbDataAdapter對象。對于開發(fā)來說，最常用的還是DataView、DataReader、DataSet、DataRow、Array、List這幾種類型了，有幾點需要注意一下：圖表控件支持多數(shù)據(jù)源的綁定，例如：X軸綁定一個數(shù)據(jù)集ds1,Y軸可以綁定另一個數(shù)據(jù)集ds2，當(dāng)然也可以是X軸綁定到一個List數(shù)據(jù)對象，Y軸綁定到一個DataView對象等等。圖表控件的綁定方式一般有兩種，常規(guī)綁定及交差表的綁定。圖表控件的Y軸數(shù)據(jù)，支持一次綁定多個值，以繪制時間、區(qū)域、使用量等之類的圖形。綁定數(shù)據(jù)的流程如下：2008111015142478.png(44.03K)2008-11-1022:19:03大意是，綁定數(shù)據(jù)里面是否有分組數(shù)據(jù)需要綁定，如果有，則調(diào)用交叉表綁定的方法。否則判斷是否時綁定X軸和Y軸(包括標(biāo)簽、超、圖例文字等自定義屬性)，如果是，則調(diào)用Points.DataBind方法進行綁定操作。再判斷是否有不同的X軸或Y軸數(shù)據(jù)，如果有，則分別調(diào)用X,Y軸的綁定方法Points.DataBindX，Points.DataBindY進行數(shù)據(jù)綁定。最后，再判斷是否需要進行多個Y軸值的綁定。下面分別對幾種數(shù)據(jù)綁定的方法進行一下說明：.綁定一數(shù)據(jù)表綁定一數(shù)據(jù)表，例如綁定一普通的數(shù)據(jù)表，表數(shù)據(jù)如下：2008-11-10_214947.gif(3.24K)2008-11-1022:19:03綁定方法的代碼：stringmySelectQuery="SELECTName,SalesFROMREPS;";OleDbConnectionmyConnection=newOleDbConnection(myConnectionString);OleDbCommandmyCommand=newOleDbCommand(mySelectQuery,myConnection);myCommand.Connection.Open();OleDbDataReadermyReader=myCommand.ExecuteReader(CommandBehavior.CloseConnection);Chart1.DataBindTable(myReader,"Name");myReader.Close();myConnection.Close();復(fù)制代碼因為數(shù)據(jù)源中只有兩列Name和Sales,因此在調(diào)用Chart1.DataBindTable方法的時候，告訴了圖表X軸的名稱為Name,因此自動將Sales設(shè)置為Y軸的數(shù)據(jù)了.生成的圖形如下：2008111015495258.png(17.71K)2008-11-1022:19:03如果修改一下Sql語句為：SELECTName,ID,RegionIDFROMREPS;其它都不變化，再看看圖表是如何處理另外兩個字段的，生成的圖表如下：2008111015513437.png(16.09K)2008-11-1022:19:03

此時，圖表自動將ID,RegionID字段當(dāng)成了Y值，生成了兩個Series，因此每個用戶都有兩個值，生成的圖形也有兩個柱狀圖.上面是一種動態(tài)綁定的方式，有人可能會問了，如果我想確定我要綁定的列，比如：乂軸綁定某個字段,Y軸綁定某個字段如何操作呢？對于這種綁定，有幾種方法可以實現(xiàn).第一種：這種方法可能是很常見的，在原來的.NET編程中出現(xiàn)的機率非常之高，方法如下：//設(shè)置數(shù)據(jù)源,myDv是一個取出數(shù)據(jù)集的DataViewchart1.DataSource=myDv;//分別設(shè)置圖表的X值和Y值chart1.Series["Series1"].XValueMember ="Name";chart1.Series["Series1"].YValueMembers ="Sales";//綁定設(shè)置的數(shù)據(jù)chart1.DataBind();復(fù)制代碼第二種：即直接調(diào)用點的綁定方法//myReader為取得的DataReader對象Chart1.Series["Series1"].Points.DataBindXY(myReader,"Name",myReader,"Sales");復(fù)制代碼第三種：調(diào)用DataBind的方法實現(xiàn)1.Chart1.Series["Series1"].Points.DataBind(myReader,"Name","Sales","");上面幾種方法得到的效果都是一樣的.當(dāng)然了，上面三種方法需要自己建立Series，要顯示兩個柱狀圖，像上面的例子中的圖形，那么得手動建立兩個Series，然后分別進行上面的綁定操作。此處說一下Label和Tooltip的綁定方式，要在綁定的圖表中顯示標(biāo)簽(Label)及提示(Tooltip),可以在綁定的時候，設(shè)置綁定的屬性.對于上面的第一、二種方法，可以調(diào)用如下的方法來設(shè)置Label和Tooltip；例如，兩個數(shù)據(jù)序列名稱分別為Series1和Series2，設(shè)置代碼如下：Chart1.Series["Series1"].Label="#VAL";Chart1.Series["Series1"].Points.DataBind(myDs.Tables[0].DefaultView,"Name","ID","");Chart1.Series["Series2"].Label="#VAL";4.Chart1.Series["Series2"].Points.DataBind(myDs.Tables[0].Defau4.ltView,"Name","RegionID","");ltView,"Name","RegionID","");其中的#VAL是Label和Tooltip的通配符，表示取默認Y軸變量的意思。具體的詳細操作可以參考例程：ChartFeatures/Labels下面的容。以后有空我也寫一篇Label的和其它變量的設(shè)置吧。對于第三種調(diào)用的綁定則稍微不同，如下：Chart1.Series["Series1"].Points.DataBind(myDs.Tables[0].DefaultView,"Name","ID","Label=ID,ToolTip=RegionID");Chart1.Series["Series2"].Points.DataBind(myDs.Tables[0].DefaultView,"Name","RegionID","Label=RegionID,ToolTip=ID");其實就是利用第三個屬性，通過格式化的字符串來設(shè)置綁定屬性，Label表示標(biāo)簽，ToolTip表示提示信息，Url表示超等等。最后生成的圖片如下：2.綁定一個交叉表微軟的圖表控件提供了一個交叉表數(shù)據(jù)的綁定方法DataBindCrossTable，它可以根據(jù)數(shù)據(jù)動態(tài)的生成數(shù)據(jù)序列(Series)，借用官方的例子，數(shù)據(jù)庫的表數(shù)據(jù)如下：我們先看看DataBindCrossTable的參數(shù)，它有兩個重載方法，分別是：publicvoidDataBindCrossTable (1EnumerabledataSource,string seriesGroupByField,string xField,string yFields,string otherFields,PointSortOrdersortingOrder)以及publicvoidDataBindCrossTable(IEnumerabledataSource,string seriesGroupByField,string xField,string yFields,string otherFields)每個參數(shù)的含義如下：dataSource要綁定的數(shù)據(jù)源.seriesGroupByField要分組統(tǒng)計的數(shù)據(jù)字段名稱，例如按、日期等.xFieldX軸綁定的字段名稱.yFieldsY軸綁定的字段名稱，如果需要綁定多個字段，則用逗號將字段名分開.otherFields其它數(shù)據(jù)字段屬性，就是上面剛講的，標(biāo)簽、提示、Url等屬性.sortingOrder設(shè)置數(shù)據(jù)是正確還是逆序排列.此時要以統(tǒng)計每個用戶的年銷售曲線，那么分組統(tǒng)計的字段名應(yīng)該設(shè)置為Name，如下：Chart1.DataBindCrossTable(myReader,"Name","Year","Sales","Label=Commissions{C}");用如上的方法綁定，生成的圖形如下：相反，如果要統(tǒng)計用戶每年的曲線，則將字段反轉(zhuǎn)一下即可，如下：Chart1.DataBindCrossTable(myReader,"Year","Name","Sales","Label=Commissions{C}");這次就先說到這里咯，說幾個需要注意的地方：在進行Y軸數(shù)據(jù)綁定的時候，如果要綁定多個字段，默認情況會出錯，那是因為需要設(shè)置Y軸的可保存值數(shù)量，設(shè)置為你需要保存的數(shù)量即可，設(shè)置的地點在：Series-》YValuesPrePoint，設(shè)置為你需要顯示的個數(shù)即可。在進行DataTable綁定的時候，Label'ToolTip等屬性的字段格式化比較困難(otherFields屬性)，我試了半天，也就試出了一次只能綁定一個字段，因為是和數(shù)據(jù)集綁定，如果要在標(biāo)簽上增加文字的話，可以使用：Field{xxxx#xxxx}，其中才會替換為相應(yīng)的文字，例如：Field的值為45，那么最后的呈現(xiàn)的結(jié)果就是：xxxx45XXXX.BTW:有很多東西我自己也在研究中，因此說得不是很完善，希望大家一起研究吧~下次再研究一下數(shù)據(jù)操作方面的東東以及標(biāo)簽等的顯示。(文/shuncy)(1)介紹MSChart的常用屬性和事件MSChart的元素組成最常用的屬性包括1.ChartAreas：增加多個繪圖區(qū)域，每個繪圖區(qū)域包含獨立的圖表組、數(shù)據(jù)源，用于多個圖表類型在一個繪圖區(qū)不兼容時。AlignmentOrientation:圖表區(qū)對齊方向，定義兩個繪圖區(qū)域間的對齊方式。AlignmentStyle：圖表區(qū)對齊類型，定義圖表間用以對其的元素。AlignWithChartArea:參照對齊的繪圖區(qū)名稱。InnerPlotPosition：圖表在繪圖區(qū)的位置屬性。Auto:是否自動對齊。Height：圖表在繪圖區(qū)的高度（百分比，取值在0-100）Width：圖表在繪圖區(qū)的寬度（百分比，取值在0-100）X,Y：圖表在繪圖區(qū)左上角坐標(biāo)Position:繪圖區(qū)位置屬性，同InnerPlotPosition。Name:繪圖區(qū)名稱。Axis:坐標(biāo)軸集合Title:坐標(biāo)軸標(biāo)題TitleAlignment：坐標(biāo)軸標(biāo)題對齊方式Interval：軸刻度間隔大小IntervalOffset：軸刻度偏移量大小MinorGrid：次要輔助線MinorTickMark：次要刻度線MajorGrid:主要輔助線MajorTickMark:主要刻度線2.DataSourcelD:MSChart的數(shù)據(jù)源。3.Legends:圖例說明。4.Palette：圖表外觀定義。5.Series：最重要的屬性，圖表集合，就是最終看到的餅圖、柱狀圖、線圖、點圖等構(gòu)成的集合；可以將多種相互兼容的類型放在一個繪圖區(qū)域，形成復(fù)合圖。1.IsValueShownAsLabel：是否顯示數(shù)據(jù)點標(biāo)簽，如果為true，在圖表中顯示每一個數(shù)據(jù)值2.Label：數(shù)據(jù)點標(biāo)簽文本3.LabelFormat：數(shù)據(jù)點標(biāo)簽文本格式4.LabelAngle:標(biāo)簽字體角度5.Name：圖表名稱6.Points:數(shù)據(jù)點集合7.XValueType:橫坐標(biāo)軸類型8.YValueType:縱坐標(biāo)軸類型9.XVa山eMember：橫坐標(biāo)綁定的數(shù)據(jù)源（如果數(shù)據(jù)源為Table，則填寫橫坐標(biāo)要顯示的字段名稱）10.YValueMembers:縱坐標(biāo)綁定的數(shù)據(jù)源（如果數(shù)據(jù)源為Table，則填寫縱坐標(biāo)要顯示的字段名稱，縱坐標(biāo)可以有兩個）11.ChartArea：圖表所屬的繪圖區(qū)域名稱12.ChartType：圖表類型（柱形、餅形、線形、點形等）13.Legend：圖表使用的圖例名稱Titles:標(biāo)題集合。width:MSChart的寬度。height：MSChart的高度。3.常用事件：Series1.Points.DataBind()綁定數(shù)據(jù)點集合，如果要在一個MSChart控件的一個繪圖區(qū)(ChartArea)添加多個不同數(shù)據(jù)源的圖表，就用這個主動綁定數(shù)據(jù)集合的方法?？梢詫⒈碇兄付ㄗ侄蔚闹到壎ǖ街付ǖ淖鴺?biāo)軸上。MSChart1.DataBind()給整個MSChart綁定一個數(shù)據(jù)源該MSChart中的圖表全部可以使用該數(shù)據(jù)源作為統(tǒng)計來源介紹MSChart的常用屬性和事件MSChart的元素組成最常用的屬性包括ChartAreas:增加多個繪圖區(qū)域，每個繪圖區(qū)域包含獨立的圖表組、數(shù)據(jù)源，用于多個圖表類型在一個繪圖區(qū)不兼容時。AlignmentOrientation：圖表區(qū)對齊方向，定義兩個繪圖區(qū)域間的對齊方式。AlignmentStyle：圖表區(qū)對齊類型，定義圖表間用以對其的元素。AlignWithChartArea:參照對齊的繪圖區(qū)名稱。InnerPlotPosition：圖表在繪圖區(qū)的位置屬性。Auto:是否自動對齊。Height：圖表在繪圖區(qū)的高度(百分比，取值在0-100)Width：圖表在繪圖區(qū)的寬度(百分比，取值在0-100)X,Y：圖表在繪圖區(qū)左上角坐標(biāo)Position:繪圖區(qū)位置屬性，同InnerPlotPosition。Name:繪圖區(qū)名稱。Axis:坐標(biāo)軸集合Title:坐標(biāo)軸標(biāo)題TitleAlignment：坐標(biāo)軸標(biāo)題對齊方式Interval：軸刻度間隔大小IntervalOffset：軸刻度偏移量大小MinorGrid：次要輔助線MinorTickMark：次要刻度線MajorGrid:主要輔助線MajorTickMark:主要刻度線DataSourcelD：MSChart的數(shù)據(jù)源。Legends:圖例說明。Palette：圖表外觀定義。Series：最重要的屬性，圖表集合，就是最終看到的餅圖、柱狀圖、線圖、點圖等構(gòu)成的集合；可以將多種相互兼容的類型放在一個繪圖區(qū)域，形成復(fù)合圖。IsValueShownAsLabel：是否顯示數(shù)據(jù)點標(biāo)簽，如果為true，在圖表中顯示每一個數(shù)據(jù)值Label：數(shù)據(jù)點標(biāo)簽文本LabelFormat：數(shù)據(jù)點標(biāo)簽文本格式LabelAngle:標(biāo)簽字體角度Name：圖表名稱Points:數(shù)據(jù)點集合XValueType:橫坐標(biāo)軸類型YValueType:縱坐標(biāo)軸類型XVa山eMember：橫坐標(biāo)綁定的數(shù)據(jù)源(如果數(shù)據(jù)源為Table，則填寫橫坐標(biāo)要顯示的字段名稱)YValueMembers:縱坐標(biāo)綁定的數(shù)據(jù)源(如果數(shù)據(jù)源為Table，則填寫縱坐標(biāo)要顯示的字段名稱，縱坐標(biāo)可以有兩個)ChartArea：圖表所屬的繪圖區(qū)域名稱ChartType：圖表類型(柱形、餅形、線形、點形等)Legend：圖表使用的圖例名稱Titles:標(biāo)題集合。width：MSChart的寬度。height：MSChart的高度。常用事件：Series1.Points.DataBind()綁定數(shù)據(jù)點集合，如果要在一個MSChart控件的一個繪圖區(qū)(ChartArea)添加多個不同數(shù)據(jù)源的圖表，就用這個主動綁定數(shù)據(jù)集合的方法?？梢詫⒈碇兄付ㄗ侄蔚闹到壎ǖ街付ǖ淖鴺?biāo)軸上。MSChart1.DataBind()給整個MSChart綁定一個數(shù)據(jù)源該MSChart中的圖表全部可以使用該數(shù)據(jù)源作為統(tǒng)計來源。示例：privatevoidBindGrid(){chart2.Width=800;chart2.Height=600;//作圖區(qū)的顯示屬性設(shè)置//chart2.ChartAreas["ChartArea1"].AxisX.IsMarginVisible=false;//chart2.ChartAreas["ChartArea1"].Area3DStyle.Enable3D=false;//背景色設(shè)置chart2.ChartAreas["ChartArea1"].ShadowColor=Color.Transparent;chart2.ChartAreas["ChartArea1"].BackColor=Color.FromArgb(209,237,254); 〃該處設(shè)置為了由天藍到白色的逐漸變化chart2.ChartAreas["ChartArea1"].BackGradientStyle=GradientStyle.TopBottom;chart2.ChartAreas["ChartArea1"].BackSecondaryColor=Color.White;//X,Y坐標(biāo)線顏色和大小chart2.ChartAreas["ChartArea1"].AxisX.LineColor=Color.FromArgb(64,64,64,64);chart2.ChartAreas["ChartArea1"].AxisY.LineColor=Color.FromArgb(64,64,64,64);chart2.ChartAreas["ChartArea1"].AxisX.LineWidth=2;chart2.ChartAreas["ChartArea1"].AxisY.LineWidth=2;chart2.ChartAreas["ChartArea1"].AxisX.Title="時間"；chart2.ChartAreas["ChartArea1"].AxisY.Title="灰量"；//中間X,Y線條的顏色設(shè)置chart2.ChartAreas["ChartArea1"].AxisX.MajorGrid.LineColor=Color.FromArgb(64,64,64,64);chart2.ChartAreas["ChartArea1"].AxisY.MajorGrid.LineColor=Color.FromArgb(64,64,64,64);//X.Y軸數(shù)據(jù)顯示間隔chart2.ChartAreas["ChartArea1"].AxisX.Interval=1.0;//X軸數(shù)據(jù)顯示間隔chart2.ChartAreas["ChartArea1"].AxisX.IntervalType=DateTimeIntervalType.Days;chart2.ChartAreas["ChartArea1"].AxisX.IntervalOffset=0.0;chart2.ChartAreas["ChartArea1"].AxisX.IntervalOffsetType=DateTimeIntervalType.Days;chart2.ChartAreas["ChartArea1"].AxisX.LabelStyle.Format="M-d";chart2.ChartAreas["ChartArea1"].AxisY.Interval=200;//y軸數(shù)據(jù)顯示間隔//X軸線條顯示間隔//chart2.ChartAreas["ChartArea1"].AxisX.MajorGrid.IntervalType=DateTimelntervalType.Hours;chart2.Palette=ChartColorPalette.Pastel;stringsql="selectsum(zhl)zhl,input_date,ash_type_namefrom(+"selectsum(t.second_load-t.first_load)a