基于mschart控件，绘制工控采集类曲线，可对图像进行缩放，拖动滚动条显示放大后的图像

来源：互联网发布：智能电视音乐软件编辑：程序博客网时间：2024/05/22 07:44

基于mschart控件，绘制工控采集类曲线，可对图像进行缩放，拖动滚动条显示放大后的图像，并动态显示曲线上的数值点
在工控、采集、测试类项目中经常需要对采集接收回来的数据进行图像、曲线显示，本人在项目中经常要求进行曲线绘图，而最快的曲线绘制方式就是采用IDE自带的绘图插件，本将对VS2015自带的chart控件，绘制实时温度时间曲线或历史温度时间曲线进行简单介绍，不足之处请发邮件至376851329@qq.com指正。言归正传，下面开始说明具体步骤：

1、在VS2015 IDE中创建WINFORM工程，并添加chart控件，并删除chart控件中初始化的serials类、ChartArea类、legneds类中初始化的一些serials,chartarea、legned的初始变量
2、利用代码初始化chart控件，现将chart控件命名为mychart；代码中将图像初始化为时间温度曲线类型，初始化代码如下：

//初始化Chart控件样式        public void InitializeChart()        {            #region 设置图表的属性            //图表的背景色            myChart.BackColor = Color.FromArgb(211, 223, 240);            //图表背景色的渐变方式            myChart.BackGradientStyle = GradientStyle.TopBottom;            //图表的边框颜色            myChart.BorderlineColor = Color.FromArgb(26, 59, 105);            //图表边框线条样式            myChart.BorderlineDashStyle = ChartDashStyle.Solid;            //图表边框线条宽度            myChart.BorderlineWidth = 2;            //图表边框的皮肤            myChart.BorderSkin.SkinStyle = BorderSkinStyle.Emboss;            #endregion            #region 设置图表表头            //图表表头            Title title = new Title();            //标题            title.Text = "热敏曲线";            //标题字体            title.Font = new System.Drawing.Font("Microsoft Sans Serif", 12, FontStyle.Bold);            //字体颜色            title.ForeColor = Color.FromArgb(26, 59, 105);            //标题阴影颜色            title.ShadowColor = Color.FromArgb(32, 0, 0, 0);            //标题阴影偏移量            title.ShadowOffset = 3;            //添加标题            myChart.Titles.Add(title);            #endregion            #region 设置图表区域属性            //图标区名字            chartarea = new ChartArea("Default");            //背景色            chartarea.BackColor = Color.FromArgb(64, 165, 191, 228);            //背景色渐变方式            chartarea.BackGradientStyle = GradientStyle.LeftRight;            //渐变和阴影的辅助背景色            chartarea.BackSecondaryColor = Color.White;            //边框颜色            chartarea.BorderColor = Color.FromArgb(64, 64, 64, 64);            //阴影颜色            chartarea.ShadowColor = Color.Transparent;            //设置X轴和Y轴的线条颜色与宽度            chartarea.AxisX.LineColor = Color.FromArgb(64, 64, 64, 64);            chartarea.AxisX.LineWidth = 1;            chartarea.AxisY.LineColor = Color.FromArgb(64, 64, 64, 64);            chartarea.AxisY.LineWidth = 1;            //设置X轴Y轴标题            chartarea.AxisX.Title = "时间";            chartarea.AxisY.Title = "温度";            //设置X轴的最小值为第一个点的X坐标值            chartarea.AxisX.Minimum = DateTime.Now.ToOADate();            //设置X轴的显示类型及显示方式            chartarea.AxisX.Interval = 0; //设置为0表示由控件自动分配            chartarea.AxisX.IntervalAutoMode = IntervalAutoMode.VariableCount;            chartarea.AxisX.IntervalType = DateTimeIntervalType.Minutes;            chartarea.AxisX.LabelStyle.IsStaggered = true;            chartarea.AxisX.LabelStyle.Format = "yyyy-MM-dd HH:mm:ss";            //设置文本角度            //chartArea.AxisX.LabelStyle.Angle = 45;            //设置文本自适应            chartarea.AxisX.IsLabelAutoFit = true;            //设置网格线的样式、颜色和宽度            chartarea.AxisX.MajorGrid.LineDashStyle = ChartDashStyle.Dash;            chartarea.AxisX.MajorGrid.LineWidth = 1;            chartarea.AxisX.MajorGrid.LineColor = Color.FromArgb(64, 64, 64, 64);            chartarea.AxisY.MajorGrid.LineDashStyle = ChartDashStyle.Dash;            chartarea.AxisY.MajorGrid.LineWidth = 1;            chartarea.AxisY.MajorGrid.LineColor = Color.FromArgb(64, 64, 64, 64);            //设置绘图区域可以缩放                    //chartarea.AxisX.ScrollBar.LineColor = System.Drawing.Color.Black;       //设置滚动条在图像内还是在图像外            //chartarea.AxisX.ScrollBar.Size = 10;                                //设置滚动条宽度大小            chartarea.AxisX.ScrollBar.IsPositionedInside = false;            //设置滚动条在图像内还是在图像外            chartarea.AxisX.ScrollBar.Enabled = true;            //chartarea.AxisX.ScrollBar.ButtonStyle = ScrollBarButtonStyles.ResetZoom;            chartarea.AxisX.ScaleView.SmallScrollMinSize = 1;            chartarea.AxisX.ScaleView.SmallScrollMinSizeType = DateTimeIntervalType.Seconds;          //此项设置将可以采用MSChart图形中鼠标点击移动滚动条功能            chartarea.CursorX.IsUserEnabled = true;            chartarea.CursorX.IsUserSelectionEnabled = true;            chartarea.CursorX.Interval = 0;            chartarea.CursorX.IntervalOffset = 0;            chartarea.CursorX.IntervalType = DateTimeIntervalType.Minutes;            chartarea.AxisX.ScaleView.Zoomable = true;      //启用用户缩放数据            //添加绘图区域            myChart.ChartAreas.Add(chartarea);            #endregion            #region 图例及曲线标签位置            Legend legend = new Legend();            legend.Alignment = StringAlignment.Center;            legend.Docking = Docking.Right;            //添加图例及曲线标签位置            myChart.Legends.Add(legend);            #endregion        }

以上代码段中完成了对图像绘制区域的外观设置，以及曲线缩放功能设置

3、添加并设置曲线

//设置Series曲线样式        public Series SetSeriesStytle(int i)        {            //创建曲线            plot_series[i] = new Series(string.Format("第{0}条数据", i + 1));            //Series曲线类型            plot_series[i].ChartType = SeriesChartType.Line;            //设置Series的边框颜色            plot_series[i].BorderColor = Color.FromArgb(180, 26, 59, 105);            //设置Series曲线宽度            plot_series[i].BorderWidth = 3;            //设置线条阴影颜色            plot_series[i].ShadowColor = Color.Black;            //线条阴影宽度            plot_series[i].ShadowOffset = 2;            //是否显示阴影数据说明            plot_series[i].IsVisibleInLegend = true;            //线条上的数据点是否有数据显示            plot_series[i].IsValueShownAsLabel = false;            //线条上数据点的标志类型            plot_series[i].MarkerStyle = MarkerStyle.None;            //线条数据点大小            plot_series[i].MarkerSize = 3;            //线条颜色            switch(i)            {                case 0:                    plot_series[i].Color = Color.FromArgb(220, 65, 140, 240);                    plot_series[i].ChartType = SeriesChartType.StepLine;                    break;                case 1:                    plot_series[i].Color = Color.FromArgb(220, 224, 64, 10);                    break;                case 2:                    plot_series[i].Color = Color.FromArgb(220, 120, 150, 20);                    plot_series[i].ChartType = SeriesChartType.Stock;                    break;                default:                    break;            }            return plot_series[i];        }

4、在MainForm构造函数中添加初始化代码

 public MainForm()        {            InitializeComponent();            //初始化曲线            this.SetSeriesStytle(0);            this.SetSeriesStytle(1);            this.SetSeriesStytle(2);            //初始化数据            data[0] = new float[1];            data[1] = new float[1];            data[2] = new float[1];            //初始化chart控件样式            InitializeChart();            //界面加载函数            this.Load += new EventHandler(MainForm_Load);            //显示曲线上点的数据            this.myChart.GetToolTipText += new EventHandler<ToolTipEventArgs>(myChart_GetToolTipText);        }

5、添加以上设置消息响应函数实现

 public void MainForm_Load(object sender, EventArgs e)        {            DateTime dt = DateTime.Now;            data[0][0] = 0;            data[1][0] = 0;            data[2][0] = 0;            plot_series[0].Points.AddXY(dt, data[0][0]);            this.myChart.Series.Add(plot_series[0]);            plot_series[1].Points.AddXY(dt, data[1][0]);            this.myChart.Series.Add(plot_series[1]);            plot_series[2].Points.AddXY(dt, data[2][0]);            this.myChart.Series.Add(plot_series[2]);            timer_RealGraph.Enabled = true;        }        //显示曲线上的数值点        public void myChart_GetToolTipText(object sender,ToolTipEventArgs e)        {            if (e.HitTestResult.ChartElementType == ChartElementType.DataPoint)            {                int i = e.HitTestResult.PointIndex;                DataPoint dp = e.HitTestResult.Series.Points[i];                e.Text = string.Format("时间:{0};数值:{1:F1} ", DateTime.FromOADate(dp.XValue), dp.YValues[0]);            }        }

6、添加定时器控件，实现动态曲线绘制

//实时动态绘图        private void timer_RealGraph_Tick(object sender, EventArgs e)        {            Random random = new Random();            DateTime dt = DateTime.Now;            for (int j = 0; j < 3; j++)            {                data[j][0] = random.Next(-10, 10);                plot_series[j].Points.AddXY(dt, data[j][0]);            }            while (plot_series[0].Points.Count > 1000)            {                foreach (Series series in myChart.Series)                {                    series.Points.RemoveAt(0);                }            }            chartarea.AxisX.Minimum = plot_series[0].Points[0].XValue;            chartarea.AxisX.Maximum = DateTime.Now.ToUniversalTime().AddHours(10).ToOADate();            myChart.Invalidate();        }

总结：以上就是绘制温度时间动态曲线，并进型缩放的详细步骤，工程中是在定时器下进行绘制的，在线程中绘制是同样的道理，只需将定时器部分代码改为线程实现即可。

关键点：在进行缩放设置时，以下代码是关键部分，在msdn中都做了详细的说明，可以查看下msdn中的说明，我在代码中也做了详细注释，可供参考

chartarea.AxisX.ScrollBar.IsPositionedInside = false;            //设置滚动条在图像内还是在图像外            chartarea.AxisX.ScrollBar.Enabled = true;            chartarea.AxisX.ScaleView.SmallScrollMinSize = 1;            chartarea.AxisX.ScaleView.SmallScrollMinSizeType = DateTimeIntervalType.Seconds;          //此项设置将可以采用MSChart图形中鼠标点击移动滚动条功能            chartarea.CursorX.IsUserEnabled = true;            chartarea.CursorX.IsUserSelectionEnabled = true;            chartarea.CursorX.Interval = 0;            chartarea.CursorX.IntervalOffset = 0;            chartarea.CursorX.IntervalType = DateTimeIntervalType.Minutes;             chartarea.AxisX.ScaleView.Zoomable = true;      //启用用户缩放数据

此种方案绘制的温度时间采集曲线，可应用于大多数项目的需求，可以将代码直接应用于项目中，项目运行图片如下所示
这里写图片描述

这里写图片描述

最后附上工程源代码

0 0