C# Chart控件，chart、Series、ChartArea曲线图绘制的重要属性
原文有備份，如有錯(cuò)誤和需要改進(jìn)的地方，請(qǐng)不吝指正會(huì)繼續(xù)修改的
?
8個(gè)月沒(méi)寫博客了- -，一來(lái)是有不想繼續(xù)干開(kāi)發(fā)的想法，二來(lái)是賴的寫，三來(lái)還是不想總結(jié)。所以為了繼續(xù)堅(jiān)持自己的開(kāi)發(fā)和總結(jié)的信念，總結(jié)一下C# chart控件的一些基本屬性，由于屬性太多了，一時(shí)半會(huì)兒寫不完，以后繼續(xù)補(bǔ)充，這里總結(jié)重要的常用的屬性
?
為避免耽誤不喜歡這種曲線圖效果的親們的時(shí)間，先看一下小DEMO效果圖：
先簡(jiǎn)單說(shuō)一下，從圖中可以看到一個(gè)chart可以繪制多個(gè)ChartArea，每個(gè)ChartArea都可以繪制多條Series。ChartArea就是就是繪圖區(qū)域，可以有多個(gè)ChartArea疊加在一起，series是畫在ChartAarea上的，Series英文意思是“序列、連續(xù)”，其實(shí)就是數(shù)據(jù)線，它可以是曲線、點(diǎn)、柱形、條形、餅圖...可以注意該chart當(dāng)數(shù)據(jù)非常多的時(shí)候可以通過(guò)鼠標(biāo)選擇查看區(qū)域，進(jìn)一步拖拽橫縱向滾動(dòng)條來(lái)縮小曲線圖查看。
代碼中的Chart控件的命名是chartData，數(shù)據(jù)源是dt，由于chart屬性太多，不好一一解釋，所以請(qǐng)仔細(xì)看截圖，尤其重視本例用到的屬性
?
一、數(shù)據(jù)源：
????數(shù)據(jù)返回方式是DataSet.Tables[0],即DataTable，也是最基本的數(shù)據(jù)源方式。這里只介紹DataTable綁定數(shù)據(jù)源，很簡(jiǎn)單：
????????????????chartData.DataSource = dt;
????????????????chartData.DataBind();
二、Series：
????Series是畫在ChartArea上的線、點(diǎn)、柱形、條形、餅圖，簡(jiǎn)單點(diǎn)兒說(shuō)就是畫在上面的數(shù)據(jù)，直接說(shuō)屬性，
?1. “標(biāo)記”：就是數(shù)據(jù)點(diǎn)，某個(gè)數(shù)據(jù)值的點(diǎn)。如下圖所示：
??????
???????????????MarkerBorderColor????數(shù)據(jù)點(diǎn)邊框的顏色
???????????????MarkerBorderWidth????數(shù)據(jù)點(diǎn)邊框的寬度
???????????????MarkColor????????????數(shù)據(jù)點(diǎn)的顏色
???????????????MakerSize????????????數(shù)據(jù)點(diǎn)的大小，默認(rèn)值為0數(shù)據(jù)點(diǎn)不存在，建議代碼控制
???????????????MarkerStep???????????數(shù)據(jù)點(diǎn)顯示的頻率
???????????????MarkerStyle??????????數(shù)據(jù)點(diǎn)的樣式，可以是方塊、圓圈、三角、叉子....
???????????????
?2. “標(biāo)簽”：就是現(xiàn)在是在數(shù)據(jù)點(diǎn)旁邊數(shù)據(jù)值????????
???????
????????????IsValueShownAsLabel????????????????????數(shù)據(jù)值是否顯示，建議代碼控制
????????????SmartLabelStyle????????????????????????數(shù)據(jù)值樣式
????????????SmartLabelStyle.Enabled????????????????直接控制可用不可用，建議不可用
????????????SmartLabelStyle.AllowOutsidePloArea????數(shù)據(jù)值顯示是否允許在外面
????????????其他屬性自己試吧
?
注意：如果要使用SmartLabelStyle的話，所有的數(shù)據(jù)點(diǎn)的值都會(huì)自動(dòng)找位置顯示出來(lái)，如果某一個(gè)區(qū)域數(shù)據(jù)點(diǎn)較多，就會(huì)直線指示；如果不用的話，數(shù)據(jù)點(diǎn)的值會(huì)在數(shù)據(jù)點(diǎn)旁邊顯示，不會(huì)有直線。如下圖所示也可以看到AllowOutsidePlotArea的區(qū)別：
3. “Font”：數(shù)據(jù)標(biāo)簽上的字體和樣式
??????????????????????
?????????????????????Font??????????????????????標(biāo)簽字體設(shè)置
????????真好看數(shù)據(jù)多的時(shí)候本來(lái)顯示就亂拉，這樣更是畫蛇添足，建議透明，正常點(diǎn)的顏色就好
?
3. 空白點(diǎn)：就是連續(xù)的數(shù)據(jù)，譬如X軸對(duì)應(yīng)Y軸沒(méi)數(shù)據(jù)，或Y軸對(duì)應(yīng)X軸沒(méi)數(shù)據(jù)，這樣的數(shù)據(jù)點(diǎn)可以對(duì)其設(shè)置相應(yīng)的屬性，屬性大多都是上面說(shuō)過(guò)的，自己試一下即可
????????????????
?
4.?數(shù)據(jù)：其實(shí)就是就是serie的名字和值類型
?????????????????
???????????????????????????Name??????????????????就是唯一的名字
???????????????????????????XvalueType????????????X軸值類型
???????????????????????????YValuesPerPoint???????數(shù)據(jù)點(diǎn)的Y值數(shù)目
???????????????????????????YValueType????????????Y軸值類型
???????????????????????????其他屬性自己試
????默認(rèn)不用設(shè)置就好，主要是X軸和Y軸值類型設(shè)置的是Auto，也就是根據(jù)X軸上的值和Y軸上的值的類型自動(dòng)匹配，當(dāng)然手動(dòng)設(shè)置的話不設(shè)錯(cuò)就行了。
??????????????????????????
5. 數(shù)據(jù)源：注意這里是Series的數(shù)據(jù)源
?????????????
????注意：
????第一，這兩個(gè)屬性對(duì)應(yīng)的是DataTable的兩個(gè)列，也就是一般的X軸對(duì)應(yīng)時(shí)間，Y軸對(duì)應(yīng)數(shù)據(jù)值，但是也要注意對(duì)DataTable的每個(gè)數(shù)據(jù)單元的值做判斷，尤其是DBNull或空。我這里的數(shù)據(jù)庫(kù)的NewDateTime列數(shù)據(jù)類型是DateTime類型，NewFyj是Double類型。
????第二，Series的數(shù)據(jù)源和Chart控件的數(shù)據(jù)源有區(qū)別，只有DataTable先綁定了Chart，Series才對(duì)應(yīng)到列，否則無(wú)法對(duì)應(yīng)。
????第三，假如用戶需要先查看所有數(shù)據(jù)，然后取消某幾條進(jìn)行數(shù)據(jù)對(duì)比，但是不需要重新查詢數(shù)據(jù)，推薦賦值string.Empty實(shí)現(xiàn)，如下圖:
??????????????????????
6. 圖表：也就是Serie畫在哪個(gè)ChartArea上，ChartType是Serie的圖表類型，也就是畫何種圖，曲線圖、直線圖、點(diǎn)、柱狀圖、餅圖等...
??????????????????
???????????????????
7. 圖例：也就是每個(gè)Serie的名字和樣式，只要?jiǎng)?chuàng)建Serie就會(huì)自動(dòng)產(chǎn)生加載在Legend里，里面的屬性可以試一下，如果想調(diào)整Legend的位置，可以去Legend集合里設(shè)置，比較簡(jiǎn)單，這里不多說(shuō)
??????????????????????
8. 圖表
????????????????????
9. 映射區(qū)：鼠標(biāo)放在數(shù)據(jù)點(diǎn)上出現(xiàn)的小提示，建議用代碼控制
??????????????????????
??????????????
10. 雜項(xiàng)
????????????????
??????????????????????????EmptyPointValue??????????空數(shù)據(jù)點(diǎn)的值做平均還是做零處理
??????????????????????????LabelStyle???????????????對(duì)標(biāo)簽硬性的規(guī)定顯示在數(shù)據(jù)點(diǎn)旁的哪個(gè)位置
11. 軸：也就是X軸和Y軸，X軸有主軸和副軸，Y軸也有主軸和副軸，主軸為Primary，副軸為Secondary。X主軸在下方，Y主軸在右方，X副軸在上方，Y副軸在右方。
???????????????????????????
???
三、ChartAreas：
????Chart控件里最重要的，每個(gè)Serie都畫在ChartArea上，Chart控件可以有多個(gè)ChartArea疊加在一起顯示。比如第一個(gè)ChartArea繪制的是曲線，第二個(gè)畫的柱狀圖或者是什么什么，這也是上面說(shuō)過(guò)的Serie的ChartType，我們也可以把多個(gè)Serie畫在一個(gè)ChartArea上，但是如果有一個(gè)列數(shù)據(jù)單位范圍在500~10000之間的數(shù)據(jù)浮動(dòng)最大，有一列數(shù)據(jù)單位范圍在0.1~2.0之間，有一列數(shù)據(jù)單位范圍在50~100之間，那畫在同一個(gè)ChartArea上顯示的話，0.1到2.0的數(shù)據(jù)會(huì)變成一條直線。當(dāng)只有1、2條這樣的數(shù)據(jù)時(shí)，可以在Serie中設(shè)置主軸和副軸，但當(dāng)出現(xiàn)多條數(shù)據(jù)，多種類型的顯示，就需要多個(gè)ChartArea來(lái)解決了。由于屬性太多了，撿重點(diǎn)屬性介紹，其他的屬性自己試一下
1. 對(duì)齊：ChartArea對(duì)齊方式
????????????????????
????????????????????AlignmentOrientation????????????水平對(duì)齊、垂直對(duì)齊、全部對(duì)齊
????????????????????AlignmentStyle??????????????????根據(jù)哪種方式對(duì)齊
????????????????????AlignmentWithChartArea??????????和哪個(gè)對(duì)齊
?????老實(shí)說(shuō)，沒(méi)啥用，可以設(shè)置Position，一會(huì)兒在外觀里會(huì)說(shuō)到
2. 三維：自己試試，效果很沉重，不是很好
????????????????????????????
?
3. 外觀：可以對(duì)ChartArea顏色、邊框、位置的設(shè)置
?????????????????
????????????????????????BackColor???????????????????????ChartArea的背景顏色
????????????????????????BackGradientStyle???????????????背景顏色的漸變方式
????????????????????????BackHatchStyle??????????????????背景陰影
????????????????????????BackImage???????????????????????背景圖片
????????????????????????BackImageAlignment??????????????圖片顯示位置
????????????????????????BackImageTransparentColor???????繪制圖像時(shí)顯示的顏色
????????????????????????BackImageWrapMode???????????????包裝模式??
????????????????????????BackSecondaryColor??????????????ChartArea的第二背景顏色，搭配漸變用的
????????????????????????BorderColor?????????????????????邊框顏色
????????????????????????BorderDashStyle?????????????????邊框線的樣式
????????????????????????BorderWidth?????????????????????邊框?qū)挾?/p>
????????????????????????ShadowColor?????????????????????整個(gè)圖標(biāo)的背影顏色
????????????????????????ShadowOffset????????????????????背影偏移量
注意：
????第一，InnerPlotPosition和Position一個(gè)是大的，一個(gè)是內(nèi)部繪制的，試一下就明白了，這里最重要的是多個(gè)ChartArea重疊在一起的時(shí)候，兩個(gè)Position一定要設(shè)置相同，否則就重疊不上了。
????第二，多個(gè)ChartArea重疊在一起的時(shí)候，顏色或圖片只能在疊在最底下的ChartArea來(lái)設(shè)置，上面的ChartArea都設(shè)置為透明即可，最底下的ChartArea是ChartAreas[0]，所以不要設(shè)置錯(cuò)。
?
4. 游標(biāo)：CursorX和CursorY，就是橫向和縱向滾動(dòng)條
?????????????
???????????????????????CursorX.AutoScroll??????????????????滾動(dòng)條自動(dòng)滾動(dòng)
???????????????????????CursorX.AxisType????????????????????游標(biāo)作用在主軸還是副軸
???????????????????????CursorX.Interval????????????????????游標(biāo)偏移的間隔
???????????????????????CursorX.IntervalOffset??????????????游標(biāo)間隔偏移量
???????????????????????CursorX.IntervalOffsetType??????????游標(biāo)間隔的單位，建議Auto
???????????????????????CursorX.Type????????????????????????游標(biāo)間隔偏移量的單位，建議Auto
???????????????????????CursorX.IsUserEnabled???????????????啟用游標(biāo)
???????????????????????CursorX.IsUserSelectedEnabled???????啟用游標(biāo)選擇區(qū)域
???????????????????????CursorX.LineColor???????????????????游標(biāo)線顏色
???????????????????????CursorX.LineDashStyle???????????????游標(biāo)線樣式
???????????????????????CursorX.LineWidth???????????????????游標(biāo)線的寬度
???????????????????????CursorX.SelectionColor??????????????游標(biāo)選擇區(qū)域的顏色
???????????????????????CursorY相同，其他屬性自己試
????首先強(qiáng)調(diào)一下，只要想選擇區(qū)域細(xì)看曲線圖，就一定要啟用游標(biāo)，游標(biāo)的設(shè)置只能在疊加在最上面的ChartArea進(jìn)行設(shè)置，也就是ChartArea[ChartArea.Count-1]，。列了這么多屬性看一下圖更直觀：
X軸和Y軸上有游標(biāo)，可以拖動(dòng)，可以注意看有個(gè)按鈕上面有個(gè)圓圈，就是向后退，圖中的藍(lán)色矩形方塊就是用戶選擇的區(qū)域，松開(kāi)鼠標(biāo)就會(huì)變成該區(qū)域的圖形。
?
5. 雜項(xiàng)：Name，沒(méi)啥好說(shuō)的
????????????????????????
6. 軸Axes！！：非常重要，一個(gè)ChartArea有4個(gè)軸：主軸X axis、主軸Y（Value）axis、副軸X axis、副軸Y（Value）axis，每個(gè)軸屬性均相同，只說(shuō)一個(gè)一個(gè)軸
??????????????????
????????????????????????IsLabelAutoFit??????????????????軸上的標(biāo)簽自動(dòng)調(diào)整
????????????????????????LabelAutoFitMaxFontSize?????????軸上標(biāo)簽自適應(yīng)字體大號(hào)
????????????????????????LabelAutoFitMaxFontSize?????????軸上標(biāo)簽自適應(yīng)字體小號(hào)
????????????????????????LabelStyle.Angle????????????????標(biāo)簽顯示角度
????????????????????????LabelStyle.IsEndLabelVisible????最后一個(gè)標(biāo)簽是否顯示?????
????????????????????????其他屬性自己試
????我的Interval這里設(shè)置都是NotSet，沒(méi)有設(shè)置Auto，為什么，自己試就明白了。
???????????????????
????????????????????????TextOrientation?????????????軸的標(biāo)題方向
????????????????????????Title???????????????????????軸的名字，X軸是時(shí)間軸，Title就是時(shí)間
????????????????????????其他屬性自己試，簡(jiǎn)單
???????????????????
???????????????????????IntervalAutoMode?????????????間隔是固定值還是隨著軸變化，自己試
??????????????????????
??????????????????????ScaleView??????????????????????數(shù)據(jù)視圖，就是當(dāng)前繪制展開(kāi)的圖！重要！
??????????????????????MinSizeType????????????????????游標(biāo)滾動(dòng)類型
??????????????????????ScrollBar??????????????????????滾動(dòng)條
????ScaleView是數(shù)據(jù)視圖，也就是當(dāng)前繪制出圖表的一個(gè)區(qū)域，如果用鼠標(biāo)選擇某個(gè)區(qū)域展開(kāi)顯示，新展開(kāi)的就又是一個(gè)ScaleView，只把它想成當(dāng)前顯示的視圖就好理解了。
????ScrollBar就是游標(biāo)，之前我們說(shuō)的ChartArea.CursorX或Y是也是游標(biāo)，這里的ScrollBar是滾動(dòng)條，仔細(xì)看兩者的屬性不難發(fā)現(xiàn)，一個(gè)是選擇區(qū)域，一個(gè)是拖拽滾動(dòng)條查看所有數(shù)據(jù)。
????????????????
???????????????????????這些屬性都不是重點(diǎn)，自己試試吧，就是外觀設(shè)計(jì)
???????????
????????????
???????不多說(shuō)了，需要網(wǎng)格的在這里設(shè)置就行，感覺(jué)設(shè)置完了很丑，不過(guò)各花入個(gè)眼，如下圖，還不錯(cuò)哈
?????????????
??????????????????????????????????????????簡(jiǎn)單不說(shuō)
???????別忘了，咱們還停留在ChartArea.Axis里呢，這僅是一個(gè)軸，有需要的別忘了設(shè)置其他的軸哦
?
總結(jié)
以上是生活随笔為你收集整理的C# Chart控件，chart、Series、ChartArea曲线图绘制的重要属性的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： xvid 详解 代码分析 编译等
- 下一篇： 如何使用C#自带的GDI+双缓冲类Buf