对C#Chart控件使用整理

时间:2024-04-06 12:01:12

前一篇博客 C#char控件的使用心得 简述一个使用chart控件的例子此处详细整理一下chart控件的使用。


要使用好Chart控件我们先得明确它的结构。如下图所示:(只画出了大概结构,更多的细节会使得图片可视性差)

对C#Chart控件使用整理

1. 一个chart可以包含多个chartArea。 chartArea是具体的坐标区域。

2. 每一个chartArea主要包含X轴,Y轴,副X轴(上方),副Y轴(右方),绑定的线条,绑定的图例。 

3. 线条可以有许多,只要将线条绑定到chartArea就可以在对应的chartArea显示。

其树形实体结构如下所示: 对于每个实体里面的许多样式属性可以自行尝试研究。

对C#Chart控件使用整理

综上可以对chart的结构有一个基本了解。接下来结合代码进行说明

1. 线条的创建   此处用于创建4条线段。

[csharp]
  1.     <span style="font-size:18px;">       public Series maxTemp;  
  2.         public Series avgTemp;  
  3.         public Series minTemp;  
  4.         public Series vibration;</span>  
[csharp]
  1. <span style="font-size:18px;">            maxTemp = new Series("maxTemp");  
  2.             avgTemp = new Series("avgTemp");  
  3.             minTemp = new Series("minTemp");  
  4.             vibration = new Series("vibration");</span>  
2.设置线条的样式

[csharp]
  1. <span style="font-size:18px;">//曲线的颜色  
  2.             maxTemp.BorderColor = Color.Black;  
  3.             maxTemp.Color = Color.Red;  
  4.             avgTemp.BorderColor = Color.Black;  
  5.             avgTemp.Color = Color.Green;  
  6.             minTemp.BorderColor = Color.Black;  
  7.             minTemp.Color = Color.Blue;  
  8.             vibration.BorderColor = Color.Black;  
  9.             vibration.Color = Color.Blue;  
  10.             //曲线的宽度  
  11.             maxTemp.BorderWidth = 2;  
  12.             avgTemp.BorderWidth = 2;  
  13.             avgTemp.BorderWidth = 2;  
  14.             vibration.BorderWidth = 2;  
  15.             //曲线的样式   有圆形曲线,阶梯形曲线,折线等等。  
  16.             maxTemp.ChartType = SeriesChartType.Spline;      
  17.             avgTemp.ChartType = SeriesChartType.Spline;  
  18.             minTemp.ChartType = SeriesChartType.Spline;  
  19.             vibration.ChartType =SeriesChartType.Spline;  
  20.             //曲线的阴影样式    可以让曲线更加突出有立体感。  
  21.             maxTemp.ShadowOffset = 1;  
  22.             avgTemp.ShadowOffset = 1;  
  23.             minTemp.ShadowOffset = 1;  
  24.             vibration.ShadowOffset = 1;  
  25.             //标记的样式        设置曲线中 每个数据点标记的样式。可以在标记中显示数据点的值,但是太多</span>  
[csharp]
  1. <span style="font-size:18px;">//数据点的话将没有可视性。  
  2.             maxTemp.MarkerColor = Color.White;  
  3.             maxTemp.MarkerStyle = MarkerStyle.Square;  
  4.             avgTemp.MarkerColor = Color.White;  
  5.             avgTemp.MarkerStyle = MarkerStyle.Square;  
  6.             minTemp.MarkerColor = Color.White;  
  7.             minTemp.MarkerStyle = MarkerStyle.Square;  
  8.             vibration.MarkerColor = Color.White;  
  9.             vibration.MarkerStyle = MarkerStyle.Square;  
  10.             //设置线条的轴类型   主要设置以下方做X轴还是上方做X轴,左方做Y轴还是右方做Y轴  
  11.             maxTemp.XAxisType = AxisType.Primary;  
  12.             maxTemp.YAxisType = AxisType.Primary;  
  13.             avgTemp.XAxisType = AxisType.Primary;  
  14.             avgTemp.YAxisType = AxisType.Primary;  
  15.             minTemp.XAxisType = AxisType.Primary;  
  16.             minTemp.YAxisType = AxisType.Primary;  
  17.             vibration.XAxisType = AxisType.Primary;  
  18.             vibration.YAxisType = AxisType.Primary;       </span>     
[csharp]
  1.   
[csharp]
  1. vibration.IsValueShownAsLabel = true;    //此属性将数据点的值作为标签。  



2. ChartArea的创建和属性设置

[csharp]
  1.   
[csharp]
  1. public ChartArea mainArea1 = new ChartArea("areaDTS");    
[csharp]
  1. public ChartArea mainArea2 = new ChartArea("areaDOVS");  




[csharp]
  1. //设置图表区域 用户可以拖动游标   此处设置后用户可以通过拖动游标放大查看区域         
[csharp]
  1.   
[csharp]
  1. //设置图表区域 用户可以拖动游标  
  2.          mainArea1.CursorX.IsUserEnabled = true;  
  3.          mainArea1.CursorY.IsUserEnabled = true;  
  4.          mainArea2.CursorX.IsUserEnabled = true;  
  5.          mainArea2.CursorY.IsUserEnabled = true;  
[csharp]
  1. //设置X Y 轴坐标的标题。  
  2. mainArea1.AxisX.Title = "光纤分区号/(标量)";  
  3. mainArea1.AxisY.Title = "温度值/(摄氏度)";  
  4. mainArea2.AxisX.Title = "光纤震动位置/(m)";  
  5. mainArea2.AxisY.Title = "震动值/(a.u.)";  
[csharp]
  1. //设置网格。主网格 与主刻度对应 副网格与副刻度对应,从刻度向另一端画一条线。如果线条中数据过多,  
[csharp]
  1. //产生较多的网格线会 使得整个区域过于密集,甚至为全黑色。所以在数据点较多的情况小关闭副网格,甚至主网格。  
[csharp]
  1. mainArea1.AxisX.MajorGrid.Enabled = false;  
  2. mainArea1.AxisY.MajorGrid.Enabled = false;  
  3. mainArea1.AxisX.MinorTickMark.Enabled = false;  
  4.   
  5. mainArea2.AxisX.MajorGrid.Enabled = false;  
  6. mainArea2.AxisY.MajorGrid.Enabled = false;  
  7. mainArea2.AxisX.MinorTickMark.Enabled = false;  
[csharp]
  1.   
[html]
  1.   
[html]
  1. //设置曲线横坐标值类型为时间类型  
[html]
  1. vibration.XValueType = ChartValueType.DateTime;  
[html]
  1. //将此线条绑定到的AxisX的标签设置时间格式。  


[csharp]
  1.   
[csharp]
  1. mainArea1.AxisX.LabelStyle.Format = "MM-dd HH:mm";  
[csharp]
  1. //设置主刻度线和副刻度线 一般只有主刻度线才有对应标签值。  
  2. mainArea1.AxisX.MinorTickMark.Enabled = true ;  
  3. mainArea1.AxisX.MajorTickMark.Enabled = true;  







3. 创建图例 标题

[csharp]
  1. Legend legend = new Legend();  
[csharp]
  1.  ElementPosition p = new ElementPosition(0, 0, 12, 10);   
[csharp]
  1.   
[csharp]
  1. chart.Legends[0].Position = p;   //每创建一个对象都会存放在chart的集合属性中可以通过数组的形式随机访问。  




[csharp]
  1.   
[csharp]
  1. Title title = new Title("chart使用方法");  
  2. chart.Titles.Add(title);  
[csharp]
  1.   
[csharp]
  1. 4.将前面创建的对象加入到自己所属的父实体中。  
[csharp]
  1. chart2.ChartAreas.Add(mainArea1);  //将线条加入到chart的chartAreas集合属性中  
  2. chart2.ChartAreas.Add(mainArea2);  
[csharp]
  1. series4.ChartArea = "areaDOVS";   //将线条绑定到对应ChartArea 通过chartArea的名字就可以绑定  
  2. series3.ChartArea = "areaDTS";  
[csharp]
  1. chart2.Series.Add(series3);       //将线条加入到chart的series集合属性中。  
  2. chart2.Series.Add(series4);  


5.示例效果。注意示例效果与前述代码无关,前述代码只为了说明。


[csharp]
  1.   
[csharp]
  1. 上述代码没有讲述给线条添加数据点,前一篇博客C#使用心得讲述给线条添加数据点的方法。  

对C#Chart控件使用整理对C#Chart控件使用整理对C#Chart控件使用整理