C# Chart控件，chart、Series、ChartArea曲线图绘制的重要属性

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

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里呢，这仅是一个轴，有须要的别忘了设置其余的轴哦