1、Chart控件五大核心“ 图表属性 ”——它们均是“ 集合 ”
- ChartAreas属性
- Series属性
- Legends属性
- Titles 属性
- Annotations属性
它们均是集合属性。其中中间的三个属性ChartAreas、Series、Legends是经常用到的三个,画图的时候主要用到的也是这三个,下面分别对这几件属性做个简单介绍。
2、ChartAreas属性
ChartArea表示图表区域,一个Chart可以绘制多个ChartArea,重叠在一起。例如,你想在一幅图上呈现两个不同属性的内容,一个是用户流量,另一个则是系统资源占用情况,那么你要在一个图形上绘制这两种情况,明显是不合理的,对于这种情况,可以建立两个ChartArea,一个用于呈现用户流量,另一个则用于呈现系统资源的占用情况。
当然了,图表控件并不限制你添加多少个绘图区域,你可以根据你的需要进行添加。对于每一个绘图区域,你可以设置各自的属性,如:X,Y轴属性、背景等。需要注意的是,绘图区域只是一个可以作图的区域范围,它本身并不包含要作图形的各种属性数据。
ChartAreas属性的定义如下:
public ChartAreaCollection ChartAreas { get; } 它是一个返回ChartAreaCollection的只读属性。
2.1 绘图区域的添加——三种方法
在拖动一个Chart控件到窗体中去的时候,会默认有一个Name=“ChartArea1"的对象,它是ChartArea类的一个实例。
- 直接通过操作属性:直接点击添加,会依次按照ChartArea2这样添加下去,也可以修改名字。
- chart1.ChartAreas.Add("ChartArea2");当然可以起一个其它的名字
- ChartArea area2=new ChartArea(“ChartArea2”);
第三种方法展现了创建绘图区域的本质,即添加一个ChartArea类型的对象到ChartAreas属性里面去。
2.2 绘图区对象的获取方法
每一个绘图区本质上都是ChartArea的一个实例对象,然后将该对象Add到了chart1对象的ChartAreas集合属性,故而有两种获取方法。
- 通过绘图区名字获取:chart1.ChartAreas["ChartArea1"].属性或方法。
- 通过下标索引获取: chart1.ChartAreas[0].属性或方法。
2.3 绘图区域常见的一些属性
下面的这些属性均是定义在 ChartArea 类型中的,故而是绘图区的属性
AlignmentOrientation:图表区对齐方向,定义两个绘图区域间的对齐方式,默认为Vertical。
AlignmentStyle:图表区对齐类型,定义图表间用以对其的元素。
AlignWithChartArea:参照对齐的绘图区名称。
InnerPlotPosition:图表在绘图区内的位置属性。
Position:绘图区位置属性,选项如同InnerPlotPosition。
Name:绘图区名称。
Axes:坐标轴集合-非常重要的部分,可分别设置X轴(X axis),Y轴(Y axis),第二X轴(SecnondaryX axis)和第二Y轴(Secnondary Y axis),常用的属性包括:
- ArrowStyle设置坐标轴是否有箭头
- Interval:轴刻度间隔大小
- IntervalOffset:轴刻度偏移量大小
- LableStyle 设置坐标轴的文字大小等
- MajorGrid:主要辅助线
- MajorTickMark:主要刻度线
- MinorTickMark:次要刻度线
- MinorGrid:次要辅助线
- Title:坐标轴标题
- TitleAlignment:坐标轴标题对齐方式
注意:Axes属性又是一个“ 集合属性”,这也是为什么是Asex,而不是Axis,因为Asex是Axis的复数形式。Asex集合中放置的元素是Axis类型的实例,我们可以通过属性设计器去完成;默认情况下,每一个绘图区会有两组坐标系,即X、Y、第二X、第二Y。要访问某一个
chart1.ChartAreas[1].Axes[3].属性或者是方法
这些属性或者是方法可以设置坐标轴的显示样式,网格的显示方式等等,可以认为定制的。
3、Series属性
Series:最重要的属性,图表集合,就是最终看到的饼图、柱状图、线图、点图等构成的合 Series,应该是整个绘图中最关键的内容了,通俗点说,即是实际的绘图数据区域,实际呈现的图形形状,简单点说,以折线图为例,每个Series就是一条线,每一条线都有自己的绘制形状、样式、独立的数据等。需要注意的是,每一个Series,你可以指定它的绘制区域(即把哪个Series画在哪个ChartArea),默认情况下,如果不自己再添加绘图区域ChartArea,则所有的Series会画在同一个ChartArea。
3.1Series的添加
因为Series本身是一个集合属性,故而有两种方法添加
第一、通过属性设置面板添加,默认情况下里面已经有了一个Series1存在了,它是 Series 类型的实例
第二、通过代码添加。chart1.Series.Add("Series2");
第三、直接创建一个Series对象,
- Series series2 = new Series("Series2");
- chart1.Series.Add(series2);
3.2 Series对象的属性和方法获取
每一个Series本质上都是Series的一个实例对象,然后将该对象Add到了chart1对象的Series集合属性,故而有两种获取方法。
- 通过绘图区名字获取:chart1.Series["Series1"].属性或方法。
- 通过下标索引获取: chart1.Series[0].属性或方法。
3.3 图表Series一些常见的一些属性
- ChartArea:图表所属的绘图区域名称
- ChartType:图表类型(柱形、饼形、线形、点形、折线图等,有多达几十种之多)
- sValueShownAsLabel:是否显示数据点标签,如果为true,在图表中显示每一个数据值
- Label:数据点标签文本
- LabelFormat:数据点标签文本格式
- LabelAngle:标签字体角度
- Legend:当前数据系列(图表)使用的图例名称
- Name:数据系列的名称
- Palette:数据系列(图表)外观定义
- Points:数据点集合,构成数据系列的点
- XValueMember:横坐标绑定的数据源
- XValueType:横坐标数字的类型,默认为auto,即根据传入的数据自动规定类型
- YValueMembers:纵坐标绑定的数据源
- YValueType:纵坐标数字的类型默认为auto,即根据传入的数据自动规定类型
- XAxisType:只是所要使用的坐标轴是主坐标还是副坐标,它有两个取值,Primary和Sencondary
- YAxisType:
- 映射区(TooTip):鼠标放在数据点上出现的小提示,建议用代码控制;
3.4 Series属性的“ 数据绑定 ”方式。——上面的Points是“ 核心 ”
(1)Points集合
因为points是集合,故而具有集合的相关性质,Points是一个DataPointCollection类型的集合属性。可以查看 DataPointCollection的定义来查看相关的方法。
要给每一个Series绑定数据,主要用到以下三个方法:
- public void DataBind(IEnumerable dataSource, string xField, string yFields, string otherFields);
- public void DataBindXY(IEnumerable xValue, params IEnumerable[] yValues);
- public void DataBindXY(IEnumerable xValue, string xField, IEnumerable yValue, string yFields);
- public void DataBindY(IEnumerable yValue, string yFields);
- 如下所示:
chart1.Series["Series1"].Points.DataBindXY(x, y); 即绑定了一组 X,Y到一个Series上面去了
4、Legends属性
MSChart的图例默认不显示,但可进行如下设置:
- Alignment:对齐方式
- AutoFitMinFontSize:当IsTextAutoFit为true时,显示的最小字体
- BackColor:背景颜色,当本身的绘图区域有背景时,将其设置为transparent效果更佳。
- enabled:是否显示图例
- IsTextAutoFit:文字大小根据图例区域的大小自动调整
- Position:图例出现的位置
5、 Annotations和Titles属性
5.1Annotations注解集合
Annotations是一个对图形的一些注解对象的集合,所谓注解对象,类似于对某个点的详细或者批注的说明。
5.2 Titles标题合集
根据字面含义即可以理解,是图表的标题配置,同样可以添加多个标题,以及设置标题的样式及文字、位置等属性。
6 、应用示例
6.1 设置ChartAreas属性
this.chart1.ChartAreas.Add(new ChartArea() { Name = "Table1" }); //背景框
this.chart1.ChartAreas[0].Axes[0].MajorGrid.Enabled = false; //X轴上网格
this.chart1.ChartAreas[0].Axes[1].MajorGrid.Enabled = false; //y轴上网格
this.chart1.ChartAreas[0].Axes[0].MajorGrid.LineDashStyle = ChartDashStyle.Dash; //网格类型 短横线
this.chart1.ChartAreas[0].Axes[0].MajorGrid.LineColor = Color.Gray;
this.chart1.ChartAreas[0].Axes[0].MajorTickMark.Enabled = false; // x轴上突出的小点
this.chart1.ChartAreas[0].Axes[1].MajorTickMark.Enabled = false; //
this.chart1.ChartAreas[0].Axes[1].IsInterlaced = true; //显示交错带
this.chart1.ChartAreas[0].Axes[0].LabelStyle.Format = "#年"; //设置X轴显示样式
this.chart1.ChartAreas[0].Axes[1].MajorGrid.LineDashStyle = ChartDashStyle.Dash; //网格类型 短横线
this.chart1.ChartAreas[0].Axes[1].MajorGrid.LineColor = Color.Blue;
this.chart1.ChartAreas[0].Axes[1].MajorGrid.LineWidth = 3;
this.chart1.ChartAreas[0].BackColor = System.Drawing.Color.Transparent; //设置区域内背景透明
6.2 设置值Series
//添加的两组Test数据
List<int> txData2 = new List<int>() { 2011, 2012, 2013, 2014, 2015, 2016 };
List<int> tyData2 = new List<int>() { 9, 6, 7, 4, 5, 4 };
List<int> txData3 = new List<int>() { 2012 };
List<int> tyData3 = new List<int>() { 7 };
this.chart1.Series.Add(new Series()); //添加一个图表序列
this.chart1.Series[0].Label = "#VAL"; //设置显示X Y的值
this.chart1.Series[0].ToolTip = "#VALX年\r#VAL"; //鼠标移动到对应点显示数值
this.chart1.Series[0].ChartArea = ct.ChartAreas[0].Name; //设置图表背景框ChartArea
this.chart1.Series[0].ChartType = SeriesChartType.Line; //图类型(折线)
this.chart1.Series[0].Points.DataBindXY(txData2, tyData2); //添加数据
//折线段配置
this.chart1.Series[0].Color = Color.Red; //线条颜色
this.chart1.Series[0].BorderWidth = 3; //线条粗细
this.chart1.Series[0].MarkerBorderColor = Color.Red; //标记点边框颜色
this.chart1.Series[0].MarkerBorderWidth = 3; //标记点边框大小
this.chart1.Series[0].MarkerColor = Color.Red; //标记点中心颜色
this.chart1.Series[0].MarkerSize = 5; //标记点大小
this.chart1.Series[0].MarkerStyle = MarkerStyle.Circle; //标记点类型
this.chart1.Series.Add(new Series()); //添加一个图表序列
this.chart1.Series[1].Label = "#VAL"; //设置显示X Y的值
this.chart1.Series[1].ToolTip = "#VALX年\r#VAL"; //鼠标移动到对应点显示数值
this.chart1.Series[1].ChartArea = "ca1"; //选择显示的ChartArea ,如果和其他的Series选择是同一个ChartArea,则在同一个区域中显示对比
this.chart1.Series[1].ChartType = SeriesChartType.Line; //图类型(折线)
this.chart1.Series[1].Points.DataBindXY(txData3, tyData3); //添加数据
//折线段配置
this.chart1.Series[1].Color = Color.Black; //线条颜色
this.chart1.Series[1].BorderWidth = 3; //线条粗细
this.chart1.Series[1].MarkerBorderColor = Color.Black; //标记点边框颜色
this.chart1.Series[1].MarkerBorderWidth = 3; //标记点边框大小
this.chart1.Series[1].MarkerColor = Color.Black; //标记点中心颜色
this.chart1.Series[1].MarkerSize = 5; //标记点大小
this.chart1.Series[1].MarkerStyle = MarkerStyle.Circle; //标记点类型
6.3 其他ChartType的特殊设置
//饼图说明设置,这用来设置饼图每一块的信息显示在什么地方
ct.Series[0]["PieLabelStyle"] = "Outside";//将文字移到外侧
ct.Series[0]["PieLineColor"] = "Black";//绘制黑色的连线。
//柱状图其他设置
ct.Series[0]["DrawingStyle"] = "Emboss"; //设置柱状平面形状
ct.Series[0]["PointWidth"] = "0.5"; //设置柱状大小
6.4 完整代码
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Security.Cryptography;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
using System.Windows.Forms.DataVisualization.Charting;
using System.Xml.Linq;
namespace Chart
{
public partial class Form1 : Form
{
private Queue<double> dataQueue = new Queue<double>(100);
private int curValue = 0;
private int num = 5;//每次删除增加几个点
public Form1()
{
InitializeComponent();
}
private void Form1_Load(object sender, EventArgs e)
{
timer1.Interval = 1000;
timer1.Enabled = true;
}
/// <summary>
/// 初始化事件
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void btnInit_Click(object sender, EventArgs e)
{
// 定义图表区域
this.chart1.ChartAreas.Clear();
ChartArea chartArea1 = new ChartArea("C1");
this.chart1.ChartAreas.Add(chartArea1);
//定义存储和显示点的容器
this.chart1.Series.Clear();
Series series1 = new Series("S1");
series1.ChartArea = "C1";
this.chart1.Series.Add(series1);
//设置图表显示样式
this.chart1.ChartAreas[0].AxisY.Minimum = 0;
this.chart1.ChartAreas[0].AxisY.Maximum = 100;
this.chart1.ChartAreas[0].AxisX.Interval = 5;
this.chart1.ChartAreas[0].AxisX.MajorGrid.LineColor = System.Drawing.Color.Silver;
this.chart1.ChartAreas[0].AxisY.MajorGrid.LineColor = System.Drawing.Color.Silver;
//设置标题
this.chart1.Titles.Clear();
this.chart1.Titles.Add("S01");
this.chart1.Titles[0].Text = "XXX显示";
this.chart1.Titles[0].ForeColor = Color.RoyalBlue;
this.chart1.Titles[0].Font = new System.Drawing.Font("Microsoft Sans Serif", 12F);
//设置图表显示样式
this.chart1.Series[0].Color = Color.Red;
if (rb1.Checked)
{
this.chart1.Titles[0].Text = string.Format("XXX {0} 显示", rb1.Text);
this.chart1.Series[0].ChartType = SeriesChartType.Line;
}
if (rb2.Checked)
{
this.chart1.Titles[0].Text = string.Format("XXX {0} 显示", rb2.Text);
this.chart1.Series[0].ChartType = SeriesChartType.Spline;
}
this.chart1.Series[0].Points.Clear();
}
private void timer1_Tick(object sender, EventArgs e)
{
UpdateQueueValue();
this.chart1.Series[0].Points.Clear();
for (int i = 0; i < dataQueue.Count; i++) //每一次都绘制dataQueue.Count个数据
{
this.chart1.Series[0].Points.AddXY((i + 1), dataQueue.ElementAt(i)); //参数1: x轴,参数2:y轴
}
}
private void UpdateQueueValue()
{
if (dataQueue.Count > 100) //如果队列数大于100
{
//先出列
for(int i = 0; i < num; i++) //移出最前面的num字节,先进先出
{
dataQueue.Dequeue();
}
}
if (rb1.Checked)
{
Random r = new Random();
for (int i = 0; i < num; i++)
{
dataQueue.Enqueue(r.Next(0, 100)); //将5个字节添加到队列中,从最后面添加数据
}
}
}
}
}