ASP.NET畫圖控件 Chart Control 免費控件

 

.NET3.5中中推出了圖表控件，可以同時支持Web和WinForm兩種方式，由於平時很少使用，一直沒有玩玩，閒來無事，簡單研究了下，感覺功能真的很強大，基本上可以滿足各種圖表的應用，感覺這麼好用的東西才研究，真是有些落伍啊，哈哈，想必很多人已經早已玩過，這裡幫大家復習下，高手繞過。

安裝MSChart

由於是和.NET3.5一起推出來的，所以只能在最新的開發環境中使用，需要.Net 3.5 Sp1和VS 2008的開發環境。

控件下載地址： Microsoft .NET Framework 3.5 的 Microsoft 圖表控件(Microsoft Chart Controls for Microsoft .NET Framework 3.5)

微軟提供的Demo：http://code.msdn.microsoft.com/mschart

按照上面的地址，下載安裝就可以了。

也可以在這裡下載http://www.21kaiyun.com/pp.aspx

使用MSChart

安裝好後，我們就可以使用MSChart了。

1.主要屬性：

Annotations--圖形注解集合，ChartAreas--圖表區域集合，Legends--圖例集合，Series--圖表序列集合（即圖表數據對象集合），Titles--圖標的標題集合。

(1)Annotations：是一個對圖形的一些注解對象的集合，所謂注解對象，類似於對某個點的詳細或者批注的說明。一個圖形上可以擁有多個注解對象，可以添加十多種圖形樣式的注解對象，包括常見的箭頭、雲朵、矩行、圖片等等注解符號，通過各個注解對象的屬性，可以方便的設置注解對象的放置位置、呈現的顏色、大小、文字內容樣式等常見的屬性。

(2)ChartAreas：是一個圖表的繪圖區，比如在一幅圖中顯示多個繪圖。圖表控件並不限制你添加多少個繪圖區域，你可以根據你的需要進行添加。對於每一個繪圖區域，你可以設置各自的屬性，如：X,Y軸屬性、背景等。

(3)Legends：是一個圖例的集合，即標注圖形中各個線條或顏色的含義，同樣，一個圖片也可以包含多個圖例說明。

(4)Series：是表數據對象集合，應該說是MSChart關鍵部分。即是實際的繪圖數據區域，實際呈現的圖形形狀，由此集合中的每一個圖表來構成的，可以往集合裡面添加多個圖表，每一個圖表可以有自己的繪制形狀、樣式、獨立的數據等。

(5)Titles：圖標的標題集合，不難理解，就是圖表的標題配置，同樣可以添加多個標題。

其他屬性：

AlignmentOrientation：圖表區對齊方向，定義兩個繪圖區域間的對齊方式。

AlignmentStyle：圖表區對齊類型，定義圖表間用以對其的元素。

AlignWithChartArea：參照對齊的繪圖區名稱。

InnerPlotPosition：圖表在繪圖區內的位置屬性。

Auto：是否自動對齊。

Height：圖表在繪圖區內的高度（百分比，取值在0-100）

Width：圖表在繪圖區內的寬度（百分比，取值在0-100）

X,Y：圖表在繪圖區內左上角坐標

Position：繪圖區位置屬性，同InnerPlotPosition。

Name：繪圖區名稱。

Axis：坐標軸集合

TitleAlignment：坐標軸標題對齊方式

Interval：軸刻度間隔大小

IntervalOffset：軸刻度偏移量大小

MinorGrid：次要輔助線

MinorTickMark：次要刻度線

MajorGrid：主要輔助線

MajorTickMark：主要刻度線

DataSourceID：MSChart的數據源。

Palette：圖表外觀定義。

IsValueShownAsLabel：是否顯示數據點標簽，如果為true，在圖表中顯示每一個數據值

Label：數據點標簽文本

LabelFormat：數據點標簽文本格式

LabelAngle：標簽字體角度

Name：圖表名稱

Points：數據點集合

XValueType：橫坐標軸類型

YValueType：縱坐標軸類型

XValueMember：橫坐標綁定的數據源（如果數據源為Table，則填寫橫坐標要顯示的字段名稱）

YValueMembers：縱坐標綁定的數據源（如果數據源為Table，則填寫縱坐標要顯示的字段名稱，縱坐標可以有兩個）

ChartType：圖表類型（柱形、餅形、線形、點形等）

width：MSChart的寬度。

height：MSChart的高度。

2.數據綁定方式

MSChart提供了多種綁定數據的方式：

數組綁定：

            double [] yval = { 2,6,4,5,3};
            string [] xval = { "Peter", "Andrew", "Julie", "Mary", "Dave"};
            Chart1.Series["Series 1"].Points.DataBindXY(xval,yval);

DataReader綁定：

代碼             string fileNameString = this.MapPath(".");
            fileNameString += "..//..//..//..//data//chartdata.mdb";
            string myConnectionString = "PROVIDER=Microsoft.Jet.OLEDB.4.0;Data Source=" + fileNameString;
            string mySelectQuery="SELECT Name, Sales FROM REPS WHERE RegionID < 3;";
            OleDbConnection myConnection = new OleDbConnection(myConnectionString);
            OleDbCommand myCommand = new OleDbCommand(mySelectQuery, myConnection);
            myCommand.Connection.Open();
            OleDbDataReader myReader = myCommand.ExecuteReader(CommandBehavior.CloseConnection);
            Chart1.Series["Default"].Points.DataBindXY(myReader, "Name", myReader, "Sales");
            myReader.Close();
            myConnection.Close();

DataTable綁定：

代碼 string fileNameString = this.MapPath(".");
            fileNameString += "..//..//..//..//data//chartdata.mdb";
            string myConnectionString = "PROVIDER=Microsoft.Jet.OLEDB.4.0;Data Source=" + fileNameString;
            string mySelectQuery="SELECT Name, Sales FROM REPS;";    
            OleDbConnection myConnection = new OleDbConnection(myConnectionString);
            OleDbCommand myCommand = new OleDbCommand(mySelectQuery, myConnection);    
            myCommand.Connection.Open();
            OleDbDataReader myReader = myCommand.ExecuteReader(CommandBehavior.CloseConnection);
            Chart1.DataBindTable(myReader, "Name");
            myReader.Close();
            myConnection.Close();

Excel綁定：

代碼 string fileNameString = this.MapPath(".");
            fileNameString += "..//..//..//..//data//ExcelData.xls";
            string sConn = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + 
                fileNameString + ";Extended Properties=/"Excel 8.0;HDR=YES/"";
            OleDbConnection myConnection = new OleDbConnection( sConn );
            myConnection.Open();
            OleDbCommand myCommand = new OleDbCommand( "Select * From [data1$A1:E25]", myConnection );
            OleDbDataReader myReader = myCommand.ExecuteReader(CommandBehavior.CloseConnection);
            Chart1.DataBindTable(myReader, "HOUR");
            myReader.Close();
            myConnection.Close();
            foreach(Series ser in Chart1.Series)
            {
                ser.ShadowOffset = 1;
                ser.BorderWidth = 3;
                ser.ChartType = SeriesChartType.Line;
            }        

 

還有其他形式的數據綁定，大家可以下載微軟的DEMO研究下。

美中不足的是，MSChart只能使用在.NET3.5中。