先簡單說一下，從圖中可以看到一個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. “標記”：就是資料點，某個資料值的點。如下圖所示：

     

               MarkerBorderColor    資料點邊框的顏色

               MarkerBorderWidth    資料點邊框的寬度

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

               MarkerStep           資料點顯示的頻率

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

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

            SmartLabelStyle                        資料值樣式

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

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

            其他屬性自己試吧

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

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

                      
                     Font                      標籤字型設定

                        
        真好看資料多的時候本來顯示就亂拉，這樣更是畫蛇添足，建議透明，正常點的顏色就好

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副軸在右方。

  

三、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對齊方式

                    
                    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裡呢，這僅是一個軸，有需要的別忘了設定其他的軸哦