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

weixin_34377065發表於2016-11-13
C#控制元件

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

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

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

先簡單說一下，從圖中可以看到一個chart可以繪製多個ChartArea，每個ChartArea都可以繪製多條Series。ChartArea就是就是繪圖區域，可以有多個ChartArea疊加在一起，series是畫在ChartAarea上的，Series英文意思是“序列、連續”，其實就是資料線，它可以是曲線、點、柱形、條形、餅圖...可以注意該chart當資料非常多的時候可以通過滑鼠選擇檢視區域，進一步拖拽橫縱向滾動條來縮小曲線圖檢視。

程式碼中的Chart控制元件的命名是chartData，資料來源是dt，由於chart屬性太多，不好一一解釋，所以請仔細看截圖，尤其重視本例用到的屬性

 

一、資料來源：

    資料返回方式是DataSet.Tables[0],即DataTable，也是最基本的資料來源方式。這裡只介紹DataTable繫結資料來源，很簡單：

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

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

 1. “標記”：就是資料點，某個資料值的點。如下圖所示：

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

               MarkerBorderColor    資料點邊框的顏色

               MarkerBorderWidth    資料點邊框的寬度

               MarkColor            資料點的顏色
               MakerSize            資料點的大小，預設值為0資料點不存在，建議程式碼控制

               MarkerStep           資料點顯示的頻率

               MarkerStyle          資料點的樣式，可以是方塊、圓圈、三角、叉子....

               

 2. “標籤”：就是現在是在資料點旁邊資料值        

      C# <wbr>Chart控制元件，chart、Series、ChartArea曲線圖繪製的重要屬性 
            IsValueShownAsLabel                    資料值是否顯示，建議程式碼控制

            SmartLabelStyle                        資料值樣式

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

            SmartLabelStyle.AllowOutsidePloArea    資料值顯示是否允許在外面

            其他屬性自己試吧

 

注意：如果要使用SmartLabelStyle的話，所有的資料點的值都會自動找位置顯示出來，如果某一個區域資料點較多，就會直線指示；如果不用的話，資料點的值會在資料點旁邊顯示，不會有直線。如下圖所示也可以看到AllowOutsidePlotArea的區別：

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

3. “Font”：資料標籤上的字型和樣式

               C# <wbr>Chart控制元件，chart、Series、ChartArea曲線圖繪製的重要屬性       
                     Font                      標籤字型設定

                     Font.Unit                 個人設定此值為Document，自己體會
                     LabelAngle                標籤角度，斜多少度，建議就正著
                     LabelBackColor            標籤背景顏色
                     LabelBorderColor          標籤邊框顏色
                     LabelBorderDahStyle       標籤邊框樣式
                     LabelBorderWidth          標籤邊框寬度
                     LabelForeColor            標籤字型顏色
                     其他屬性自己試
                 C# <wbr>Chart控制元件，chart、Series、ChartArea曲線圖繪製的重要屬性 C# <wbr>Chart控制元件，chart、Series、ChartArea曲線圖繪製的重要屬性      
        真好看C# <wbr>Chart控制元件，chart、Series、ChartArea曲線圖繪製的重要屬性資料多的時候本來顯示就亂拉，這樣更是畫蛇添足，建議透明，正常點的顏色就好

 

3. 空白點：就是連續的資料，譬如X軸對應Y軸沒資料，或Y軸對應X軸沒資料，這樣的資料點可以對其設定相應的屬性，屬性大多都是上面說過的，自己試一下即可
               C# <wbr>Chart控制元件，chart、Series、ChartArea曲線圖繪製的重要屬性 

 


4. 資料：其實就是就是serie的名字和值型別

               C# <wbr>Chart控制元件，chart、Series、ChartArea曲線圖繪製的重要屬性  
                           Name                  就是唯一的名字

                           XvalueType            X軸值型別

                           YValuesPerPoint       資料點的Y值數目

                           YValueType            Y軸值型別

                           其他屬性自己試

    預設不用設定就好，主要是X軸和Y軸值型別設定的是Auto，也就是根據X軸上的值和Y軸上的值的型別自動匹配，當然手動設定的話不設錯就行了。

                          
5. 資料來源：注意這裡是Series的資料來源

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

    注意：
    第一，這兩個屬性對應的是DataTable的兩個列，也就是一般的X軸對應時間，Y軸對應資料值，但是也要注意對DataTable的每個資料單元的值做判斷，尤其是DBNull或空。我這裡的資料庫的NewDateTime列資料型別是DateTime型別，NewFyj是Double型別。

    第二，Series的資料來源和Chart控制元件的資料來源有區別，只有DataTable先繫結了Chart，Series才對應到列，否則無法對應。

    第三，假如使用者需要先檢視所有資料，然後取消某幾條進行資料對比，但是不需要重新查詢資料，推薦賦值string.Empty實現，如下圖:

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

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

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

                   

7. 圖例：也就是每個Serie的名字和樣式，只要建立Serie就會自動產生載入在Legend裡，裡面的屬性可以試一下，如果想調整Legend的位置，可以去Legend集合裡設定，比較簡單，這裡不多說

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

8. 圖表

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


9. 對映區：滑鼠放在資料點上出現的小提示，建議用程式碼控制

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

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

10. 雜項

               C# <wbr>Chart控制元件，chart、Series、ChartArea曲線圖繪製的重要屬性 
                          EmptyPointValue          空資料點的值做平均還是做零處理

                          LabelStyle               對標籤硬性的規定顯示在資料點旁的哪個位置

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

                         C# <wbr>Chart控制元件，chart、Series、ChartArea曲線圖繪製的重要屬性  
   
三、ChartAreas：
    Chart控制元件裡最重要的，每個Serie都畫在ChartArea上，Chart控制元件可以有多個ChartArea疊加在一起顯示。比如第一個ChartArea繪製的是曲線，第二個畫的柱狀圖或者是什麼什麼，這也是上面說過的Serie的ChartType，我們也可以把多個Serie畫在一個ChartArea上，但是如果有一個列資料單位範圍在500~10000之間的資料浮動最大，有一列資料單位範圍在0.1~2.0之間，有一列資料單位範圍在50~100之間，那畫在同一個ChartArea上顯示的話，0.1到2.0的資料會變成一條直線。當只有1、2條這樣的資料時，可以在Serie中設定主軸和副軸，但當出現多條資料，多種型別的顯示，就需要多個ChartArea來解決了。由於屬性太多了，撿重點屬性介紹，其他的屬性自己試一下


1. 對齊：ChartArea對齊方式

                   C# <wbr>Chart控制元件，chart、Series、ChartArea曲線圖繪製的重要屬性 
                    AlignmentOrientation            水平對齊、垂直對齊、全部對齊

                    AlignmentStyle                  根據哪種方式對齊

                    AlignmentWithChartArea          和哪個對齊

     老實說，沒啥用，可以設定Position，一會兒在外觀裡會說到


2. 三維：自己試試，效果很沉重，不是很好

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

 

3. 外觀：可以對ChartArea顏色、邊框、位置的設定

                 C# <wbr>Chart控制元件，chart、Series、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，就是橫向和縱向滾動條

             C# <wbr>Chart控制元件，chart、Series、ChartArea曲線圖繪製的重要屬性
                       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]，。列了這麼多屬性看一下圖更直觀：

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

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


 

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

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


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

                 C# <wbr>Chart控制元件，chart、Series、ChartArea曲線圖繪製的重要屬性 
                        IsLabelAutoFit                  軸上的標籤自動調整

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

                        LabelStyle.Angle                標籤顯示角度

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

                        其他屬性自己試

    我的Interval這裡設定都是NotSet，沒有設定Auto，為什麼，自己試就明白了。

                  C# <wbr>Chart控制元件，chart、Series、ChartArea曲線圖繪製的重要屬性 
                        TextOrientation             軸的標題方向

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

                        其他屬性自己試，簡單


                  C# <wbr>Chart控制元件，chart、Series、ChartArea曲線圖繪製的重要屬性 
                       IntervalAutoMode             間隔是固定值還是隨著軸變化，自己試

                     C# <wbr>Chart控制元件，chart、Series、ChartArea曲線圖繪製的重要屬性 
                      ScaleView                      資料檢視，就是當前繪製展開的圖！重要！
                      MinSizeType                    遊標滾動型別

                      ScrollBar                      滾動條

    ScaleView是資料檢視，也就是當前繪製出圖表的一個區域，如果用滑鼠選擇某個區域展開顯示，新展開的就又是一個ScaleView，只把它想成當前顯示的檢視就好理解了。

    ScrollBar就是遊標，之前我們說的ChartArea.CursorX或Y是也是遊標，這裡的ScrollBar是滾動條，仔細看兩者的屬性不難發現，一個是選擇區域，一個是拖拽滾動條檢視所有資料。

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

               C# <wbr>Chart控制元件，chart、Series、ChartArea曲線圖繪製的重要屬性 
                       這些屬性都不是重點，自己試試吧，就是外觀設計

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

            
       不多說了，需要網格的在這裡設定就行，感覺設定完了很醜，不過各花入個眼，如下圖，還不錯哈

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

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

                                          簡單不說
       別忘了，我們們還停留在ChartArea.Axis裡呢，這僅是一個軸，有需要的別忘了設定其他的軸哦C# <wbr>Chart控制元件，chart、Series、ChartArea曲線圖繪製的重要屬性
C# <wbr>Chart控制元件，chart、Series、ChartArea曲線圖繪製的重要屬性

相關文章