前沿：簡單練習(xí)效果----

一、5大屬性簡介：

整個圖形控件主要由以下幾個部份組成：1.Annotations

--圖形注解集合

2.ChartAreas

--圖表區(qū)域集合

3.Legends --圖例集合

4.Series

--圖表序列集合(即圖表數(shù)據(jù)對象集合)

5.Titles　　　　--圖標(biāo)的標(biāo)題集合

Annotations注解集合

Annotations是一個對圖形的一些注解對象的集合，所謂注解對象，類似于對某個點的詳細(xì)或者批注的說明，比如，在圖片上實現(xiàn)各個節(jié)點的關(guān)鍵信息，如下圖方框和黃色的小方框：

一個圖形上可以擁有多個注解對象，可以添加十多種圖形樣式的注解對象，包括常見的箭頭、云朵、矩行、圖片等等注解符號，通過各個注解對象的屬性，可以方便的設(shè)置注解對象的放置位置、呈現(xiàn)的顏色、大小、文字內(nèi)容樣式等常見的屬性。ChartAreas圖表區(qū)域集合

ChartAreas可以理解為是一個圖表的繪圖區(qū)，例如，你想在一幅圖上呈現(xiàn)兩個不同屬性的內(nèi)容，一個是用戶流量，另一個則是系統(tǒng)資源占用情況，那么你要在一個圖形上繪制這兩種情況，明顯是不合理的，對于這種情況，可以建立兩個ChartArea，一個用于呈現(xiàn)用戶流量，另一個則用于呈現(xiàn)系統(tǒng)資源的占用情況。

當(dāng)然了，圖表控件并不限制你添加多少個繪圖區(qū)域，你可以根據(jù)你的需要進(jìn)行添加。對于每一個繪圖區(qū)域，你可以設(shè)置各自的屬性，如：X,Y軸屬性、背景等。

需要注意的是，繪圖區(qū)域只是一個可以作圖的區(qū)域范圍，它本身并不包含要作圖形的各種屬性數(shù)據(jù)。

多繪圖區(qū)效果圖如下，分為上下兩個繪圖區(qū)域，分別表示不同的繪圖數(shù)據(jù)：

ChartAreas顯示類型有2：默認(rèn)是2D，其一是3D。具體設(shè)置參照：

Legends圖例集合

Legends是一個圖例的集合，即標(biāo)注圖形中各個線條或顏色的含義，同樣，一個圖片也可以包含多個圖例說明，比如像上面說的多個圖表區(qū)域的方式，則可以建立多個圖例，分別說明各個繪圖區(qū)域的信息。

Series圖表序列

圖表序列，應(yīng)該是整個繪圖中最關(guān)鍵的內(nèi)容了，通俗點說，即是實際的繪圖數(shù)據(jù)區(qū)域，實際呈現(xiàn)的圖形形狀，就是由此集合中的每一個圖表來構(gòu)成的，可以往集合里面添加多個圖表，每一個圖表可以有自己的繪制形狀、樣式、獨立的數(shù)據(jù)等。

需要注意的是，每一個圖表，你可以指定它的繪制區(qū)域(見ChartAreas的說明)，讓此圖表呈現(xiàn)在某個繪圖區(qū)域，也可以讓幾個圖表在同一個繪圖區(qū)域疊加，如下圖：

上面兩幅圖，分別表示了把圖表放在不同的繪制區(qū)域和放在同一個繪制區(qū)域的情況。

繼續(xù)回到ChartAreas章節(jié)舉的例子，同時要顯示用戶的流量還要顯示系統(tǒng)的占用情況，對于這種時候，應(yīng)該建立兩個Series，一個用于呈現(xiàn)用戶的流量，另一個則用于呈現(xiàn)系統(tǒng)的占用情況。它們分別屬于各自的繪圖區(qū)域。

Titles標(biāo)題合集

根據(jù)字面含義即可以理解，是圖表的標(biāo)題配置，同樣可以添加多個標(biāo)題，以及設(shè)置標(biāo)題的樣式及文字、位置等屬性。多看一下它的屬性即能明白各自的含義。

三。其它屬性

相對來說，我覺得比較有用的屬性有三個，分別是：Label、Tooltip以及Url鏈接。

Label即標(biāo)簽的含義，可以在圖片的關(guān)鍵位置進(jìn)行一些關(guān)鍵數(shù)字或文字的描述，如下圖：

像上圖：X軸和Y軸的文字便是標(biāo)簽，以及圖表曲線中的紅點上的文字，也是標(biāo)簽，添加了標(biāo)簽，可以讓人更容易的對內(nèi)容進(jìn)行理解。

Tooltip即提示的含義，用于在各個關(guān)鍵點，如：標(biāo)簽、圖形關(guān)鍵點、標(biāo)題等當(dāng)鼠標(biāo)移動上去的時候，提示用戶一些相關(guān)的詳細(xì)或說明信息，例如上圖，可以給曲線中的每一個點增加Tooltip的屬性，寫上需要詳細(xì)說明的內(nèi)容，比如：詳細(xì)的銷售明細(xì)，那么，在鼠標(biāo)移動到這個點的時候，會自動彈出提示信息。

Tooltip可以支持簡單方式以及自定義的方式，簡單方式即像平時Html頁面設(shè)置的title之類的屬性效果，而自定義的方式，則可以實現(xiàn)圖形、文本等各種復(fù)雜的提示信息顯示。詳細(xì)的方式請參考官方例子的：Interactivity

and AJAX/Tooltips以及Interactivity and AJAX/Client Side

Scripts下面的相關(guān)例子。

Url鏈接，圖表控件中，有一大半的控件都有Url及Tooltip的屬性，你可以設(shè)置此屬性，在鼠標(biāo)點擊的時候，代到其它相應(yīng)的頁面去。

二、數(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ù)源,直接綁定到圖表中.

第1,2兩種比較簡單，主要看一下3,4的用法！對于第3點,相對來說比較簡單,在后臺代碼中,找到要添加代碼的Series,通過它下面Points的Add、AddXY、AddY等方法,即可以實現(xiàn)數(shù)據(jù)的添加.例如: -->double t;for(t = 0; t <= (2.5 * Math.PI); t += Math.PI/6) {double ch1 = Math.Sin(t);double ch2 = Math.Sin(t-Math.PI/2); Chart1.Series["Channel 1"].Points.AddXY(t, ch1); Chart1.Series["Channel 2"].Points.AddXY(t, ch2); }

(Chart1為圖表的名字，Channel 1、Channel 2分別表示兩個Series數(shù)據(jù)序列)

(有幾個series，X軸上就有幾個不同的柱子，這里有兩個，所以有兩個！)

簡單練習(xí)效果：(圖表中有數(shù)學(xué)、語文、英語3個series，X抽是學(xué)生姓名。)

后臺數(shù)據(jù)綁定：

完！

總結(jié)

以上是生活随笔為你收集整理的chart绑定mysql数据源_MSChart图表之Chart组件 学习一篇（5个主要属性+数据源绑定）...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。