C# Chart控件，chart、Series、ChartArea曲線圖繪製的重要屬性

原文有備份，若有錯誤和須要改進的地方，請不吝指正會繼續修改的

 

8個月沒寫博客了- -，一來是有不想繼續幹開發的想法，二來是賴的寫，三來仍是不想總結。因此爲了繼續堅持本身的開發和總結的信念，總結一下C# chart控件的一些基本屬性，因爲屬性太多了，一時半會兒寫不完，之後繼續補充，這裏總結重要的經常使用的屬性

 

爲避免耽誤不喜歡這種曲線圖效果的親們的時間，先看一下小DEMO效果圖：

先簡單說一下，從圖中能夠看到一個chart能夠繪製多個ChartArea，每一個ChartArea均可以繪製多條Series。ChartArea就是就是繪圖區域，能夠有多個ChartArea疊加在一塊兒，series是畫在ChartAarea上的，Series英文意思是「序列、連續」，其實就是數據線，它能夠是曲線、點、柱形、條形、餅圖...能夠注意該chart當數據很是多的時候能夠經過鼠標選擇查看區域，進一步拖拽橫縱向滾動條來縮小曲線圖查看。

代碼中的Chart控件的命名是chartData，數據源是dt，因爲chart屬性太多，很差一一解釋，因此請仔細看截圖，尤爲重視本例用到的屬性

 

1、數據源：

    數據返回方式是DataSet.Tables[0],即DataTable，也是最基本的數據源方式。這裏只介紹DataTable綁定數據源，很簡單：

                chartData.DataSource = dt;
                chartData.DataBind();

2、Series：
    Series是畫在ChartArea上的線、點、柱形、條形、餅圖，簡單點兒說就是畫在上面的數據，直接說屬性，

 1. 「標記」：就是數據點，某個數據值的點。以下圖所示：

      

               MarkerBorderColor    數據點邊框的顏色

               MarkerBorderWidth    數據點邊框的寬度

               MarkColor            數據點的顏色
               MakerSize            數據點的大小，默認值爲0數據點不存在，建議代碼控制

               MarkerStep           數據點顯示的頻率

               MarkerStyle          數據點的樣式，能夠是方塊、圓圈、三角、叉子....

               

 2. 「標籤」：就是如今是在數據點旁邊數據值        

       
            IsValueShownAsLabel                    數據值是否顯示，建議代碼控制

            SmartLabelStyle                        數據值樣式

            SmartLabelStyle.Enabled                直接控制可用不可用，建議不可用

            SmartLabelStyle.AllowOutsidePloArea    數據值顯示是否容許在外面

            其餘屬性本身試吧

 

注意：若是要使用SmartLabelStyle的話，全部的數據點的值都會自動找位置顯示出來，若是某一個區域數據點較多，就會直線指示；若是不用的話，數據點的值會在數據點旁邊顯示，不會有直線。以下圖所示也能夠看到AllowOutsidePlotArea的區別：

3. 「Font」：數據標籤上的字體和樣式

                      
                     Font                      標籤字體設置

                     Font.Unit                 我的設置此值爲Document，本身體會

                     LabelAngle                標籤角度，斜多少度，建議就正着

                     LabelBackColor            標籤背景顏色

                     LabelBorderColor          標籤邊框顏色

                     LabelBorderDahStyle       標籤邊框樣式

                     LabelBorderWidth          標籤邊框寬度

                     LabelForeColor            標籤字體顏色

                     其餘屬性本身試

                        
        真好看 數據多的時候原本顯示就亂拉，這樣更是多此一舉，建議透明，正常點的顏色就好

 

3. 空白點：就是連續的數據，譬如X軸對應Y軸沒數據，或Y軸對應X軸沒數據，這樣的數據點能夠對其設置相應的屬性，屬性大多都是上面說過的，本身試一下便可
                

 

4. 數據：其實就是就是serie的名字和值類型

                 
                           Name                  就是惟一的名字

                           XvalueType            X軸值類型

                           YValuesPerPoint       數據點的Y值數目

                           YValueType            Y軸值類型

                           其餘屬性本身試

    默認不用設置就好，主要是X軸和Y軸值類型設置的是Auto，也就是根據X軸上的值和Y軸上的值的類型自動匹配，固然手動設置的話不設錯就好了。

                          
5. 數據源：注意這裏是Series的數據源

             

    注意：
    第一，這兩個屬性對應的是DataTable的兩個列，也就是通常的X軸對應時間，Y軸對應數據值，可是也要注意對DataTable的每一個數據單元的值作判斷，尤爲是DBNull或空。我這裏的數據庫的NewDateTime列數據類型是DateTime類型，NewFyj是Double類型。

    第二，Series的數據源和Chart控件的數據源有區別，只有DataTable先綁定了Chart，Series纔對應到列，不然沒法對應。

    第三，假如用戶須要先查看全部數據，而後取消某幾條進行數據對比，可是不須要從新查詢數據，推薦賦值string.Empty實現，以下圖:

                     

6. 圖表：也就是Serie畫在哪一個ChartArea上，ChartType是Serie的圖表類型，也就是畫何種圖，曲線圖、直線圖、點、柱狀圖、餅圖等...

                  

                   

7. 圖例：也就是每一個Serie的名字和樣式，只要建立Serie就會自動產生加載在Legend裏，裏面的屬性能夠試一下，若是想調整Legend的位置，能夠去Legend集合裏設置，比較簡單，這裏很少說

                      

8. 圖表

                    


9. 映射區：鼠標放在數據點上出現的小提示，建議用代碼控制

                      

              

10. 雜項

                
                          EmptyPointValue          空數據點的值作平均仍是作零處理

                          LabelStyle               對標籤硬性的規定顯示在數據點旁的哪一個位置

11. 軸：也就是X軸和Y軸，X軸有主軸和副軸，Y軸也有主軸和副軸，主軸爲Primary，副軸爲Secondary。X主軸在下方，Y主軸在右方，X副軸在上方，Y副軸在右方。

                           
   
3、ChartAreas：
    Chart控件裏最重要的，每一個Serie都畫在ChartArea上，Chart控件能夠有多個ChartArea疊加在一塊兒顯示。好比第一個ChartArea繪製的是曲線，第二個畫的柱狀圖或者是什麼什麼，這也是上面說過的Serie的ChartType，咱們也能夠把多個Serie畫在一個ChartArea上，可是若是有一個列數據單位範圍在500~10000之間的數據浮動最大，有一列數據單位範圍在0.1~2.0之間，有一列數據單位範圍在50~100之間，那畫在同一個ChartArea上顯示的話，0.1到2.0的數據會變成一條直線。當只有一、2條這樣的數據時，能夠在Serie中設置主軸和副軸，但當出現多條數據，多種類型的顯示，就須要多個ChartArea來解決了。因爲屬性太多了，撿重點屬性介紹，其餘的屬性本身試一下

1. 對齊：ChartArea對齊方式

                    
                    AlignmentOrientation            水平對齊、垂直對齊、所有對齊

                    AlignmentStyle                  根據哪一種方式對齊

                    AlignmentWithChartArea          和哪一個對齊

     老實說，沒啥用，能夠設置Position，一下子在外觀裏會說到

2. 三維：本身試試，效果很沉重，不是很好

                            

 

3. 外觀：能夠對ChartArea顏色、邊框、位置的設置

                 

                        BackColor                       ChartArea的背景顏色

                        BackGradientStyle               背景顏色的漸變方式

                        BackHatchStyle                 背景陰影

                        BackImage                       背景圖片

                        BackImageAlignment              圖片顯示位置

                        BackImageTransparentColor       繪製圖像時顯示的顏色

                        BackImageWrapMode               包裝模式  
                        BackSecondaryColor             ChartArea的第二背景顏色，搭配漸變用的

                        BorderColor                    邊框顏色

                        BorderDashStyle                 邊框線的樣式

                        BorderWidth                    邊框寬度

                        ShadowColor                    整個圖標的背影顏色

                        ShadowOffset                   背影偏移量

注意：

    第一，InnerPlotPosition和Position一個是大的，一個是內部繪製的，試一下就明白了，這裏最重要的是多個ChartArea重疊在一塊兒的時候，兩個Position必定要設置相同，不然就重疊不上了。

    第二，多個ChartArea重疊在一塊兒的時候，顏色或圖片只能在疊在最底下的ChartArea來設置，上面的ChartArea都設置爲透明便可，最底下的ChartArea是ChartAreas[0]，因此不要設置錯。

 

4. 遊標：CursorX和CursorY，就是橫向和縱向滾動條

             
                       CursorX.AutoScroll                 滾動條自動滾動

                       CursorX.AxisType                    遊標做用在主軸仍是副軸

                       CursorX.Interval                    遊標偏移的間隔

                       CursorX.IntervalOffset              遊標間隔偏移量

                       CursorX.IntervalOffsetType          遊標間隔的單位，建議Auto
                       CursorX.Type                        遊標間隔偏移量的單位，建議Auto

                       CursorX.IsUserEnabled               啓用遊標

                       CursorX.IsUserSelectedEnabled       啓用遊標選擇區域

                       CursorX.LineColor                  遊標線顏色

                       CursorX.LineDashStyle               遊標線樣式

                       CursorX.LineWidth                   遊標線的寬度

                       CursorX.SelectionColor              遊標選擇區域的顏色

                       CursorY相同，其餘屬性本身試

    首先強調一下，只要想選擇區域細看曲線圖，就必定要啓用遊標，遊標的設置只能在疊加在最上面的ChartArea進行設置，也就是ChartArea[ChartArea.Count-1]，。列了這麼多屬性看一下圖更直觀：

X軸和Y軸上有遊標，能夠拖動，能夠注意看有個按鈕上面有個圓圈，就是向後退，圖中的藍色矩形方塊就是用戶選擇的區域，鬆開鼠標就會變成該區域的圖形。

 

5. 雜項：Name，沒啥好說的

                        

6. 軸Axes！！：很是重要，一個ChartArea有4個軸：主軸X axis、主軸Y（Value）axis、副軸X axis、副軸Y（Value）axis，每一個軸屬性均相同，只說一個一個軸

                  
                        IsLabelAutoFit                 軸上的標籤自動調整

                        LabelAutoFitMaxFontSize         軸上標籤自適應字體大號
                        LabelAutoFitMaxFontSize         軸上標籤自適應字體小號

                        LabelStyle.Angle                標籤顯示角度

                        LabelStyle.IsEndLabelVisible    最後一個標籤是否顯示     

                        其餘屬性本身試

    個人Interval這裏設置都是NotSet，沒有設置Auto，爲何，本身試就明白了。

                   
                        TextOrientation             軸的標題方向

                        Title                      軸的名字，X軸是時間軸，Title就是時間

                        其餘屬性本身試，簡單

                  
                       IntervalAutoMode             間隔是固定值仍是隨着軸變化，本身試

                      
                      ScaleView                      數據視圖，就是當前繪製展開的圖！重要！
                      MinSizeType                    遊標滾動類型

                      ScrollBar                      滾動條

    ScaleView是數據視圖，也就是當前繪製出圖表的一個區域，若是用鼠標選擇某個區域展開顯示，新展開的就又是一個ScaleView，只把它想成當前顯示的視圖就好理解了。

    ScrollBar就是遊標，以前咱們說的ChartArea.CursorX或Y是也是遊標，這裏的ScrollBar是滾動條，仔細看二者的屬性不難發現，一個是選擇區域，一個是拖拽滾動條查看全部數據。

                
                       這些屬性都不是重點，本身試試吧，就是外觀設計

           

            
       很少說了，須要網格的在這裏設置就行，感受設置完了很醜，不過各花入個眼，以下圖，還不錯哈

             

                                          簡單不說
       別忘了，我們還停留在ChartArea.Axis裏呢，這僅是一個軸，有須要的別忘了設置其餘的軸哦

 

 http://blog.sina.com.cn/s/blog_621e24e20101cp64.html