VS上位机开发——曲线显示

VS上位机开发——曲线显示

刚刚接触上位机的开发，单纯是为了玩一下，浅度学习，关于曲线显示的实现方法，网上的资料太杂，也很零碎，经过自己的一些摸索，终于实现了我想要的效果，算是迈出了第一步。写博客记录一下学习的过程。
PS：我使用的控件是ZedGraph。

一、新建项目

第1步：创建一个Window窗体应用(.NET Framework)
我安装的是vs2019版本。

第2步：配置项目
提示：框架要选.NET Framework 4以上，如果没有，先确认项目选的是不是Window窗体应用，再确认是否安装NET Framework。项目名称随便写，我这里用的是之前截的一个图片。

二、添加ZedGraph控件

VS默认是没有ZedGraph这个控件的，需要自己下载并安装。

1、下载ZedGraph

ZedGraph控件可以自己百度搜索下载，也可以在我上传的链接下载。
ZedGraph控件下载：https://download.csdn.net/download/ShenZhen_zixian/21798487

2、安装ZedGraph

第1步：在工具箱右键，打开选择项。

第2步：点击浏览，选择下载好的ZedGraph文件，点击确定。

安装完成后可以在工具箱里面看到ZedGraph控件。

三、添加控件并编写代码

示例代码：

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
using ZedGraph;

namespace WindowsFormsApp1
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
            createPane(zedGraphControl1);  // 初始化后创建设置控件的方法并将当前ZedGraph控件传递
            drawCurveTest();
        }

        // 初始化，配置图表相关的参数
        public void createPane(ZedGraphControl zgc)
        {
            GraphPane myPane = zgc.GraphPane;

            // 设置图表标题 和 x y 轴标题
            myPane.Title.Text = "测试图形";
            myPane.XAxis.Title.Text = "X轴标题";
            myPane.YAxis.Title.Text = "Y轴标题";

            // 更改标题的字体
            FontSpec myFont = new FontSpec("Arial", 20, Color.Red, false, false, false);
            myPane.Title.FontSpec = myFont;
            myPane.XAxis.Title.FontSpec = myFont;
            myPane.YAxis.Title.FontSpec = myFont;
        }

        // 绘制一条曲线
        public void drawCurve(ZedGraphControl zgc, double[] x, double[] y, uint num)
        {
            GraphPane myPane = zgc.GraphPane;
            myPane.CurveList.Clear();  // 清除之前的曲线
            PointPairList list1 = new PointPairList();
            for (int i = 0; i < num; i++)
            {
                list1.Add(x[i], y[i]);  // 添加一组数据
            }
            LineItem myCurve = myPane.AddCurve("曲线1", list1, Color.Red, SymbolType.Star);  // 用list1生产一条曲线，标注是“曲线1”
            myPane.Fill = new Fill(Color.White, Color.FromArgb(200, 200, 255), 45.0f);  // 填充图表颜色

            zgc.AxisChange();  // 在数据变化时绘图
            zedGraphControl1.Invalidate();  // 更新图表
            Refresh();  // 重绘控件
        }

        // 测试用例，编写一些数据并绘制成曲线
        double[] x = new double[60];  // 用于存放x坐标
        double[] y = new double[60];  // 用于存放y坐标
        public void drawCurveTest()
        {
            Random num = new Random();  // 用来取随机数
            for (int i = 0; i < 60; i++)
            {
                // 取随机数据并显示曲线
                x[i] = i;
                y[i] = num.NextDouble();

                //  画一个一元二次函数 y = (x + 2)( x + 5)
                // x[i] = i - 30;  // 从负半轴开始取点
                // y[i] = (x[i] + 2) * (x[i] + 5);

                //  画一个反比例函数 y = 5 / x
                // x[i] = i;
                // y[i] = 5.0 / x[i];
            }
            drawCurve(zedGraphControl1, x, y, 60);
        }
    }
}

运行了三个示例，结果如下：
1：随机取60个点绘制折线图

2：绘制一个一元二次函数 y = (x + 2)( x + 5)

3：绘制一个反比例函数 y = 5 / x

最后再做几个不一样的图
提示：修改AddCurve()函数的参数(SymbolType)即可。
如：LineItem myCurve = myPane.AddCurve(“曲线1”, list1, Color.Red, SymbolType.None);

如：LineItem myCurve = myPane.AddCurve(“曲线1”, list1, Color.Red, SymbolType.Circle);

四、程序打包

在VS里面调试需要依赖VS的环境，但是我们做好的上位机实际运行的环境可能并没有安装VS，因此需要把调试好的软件打包成通用的应用程序。因为我们建的项目是window窗体应用，正常情况我们只需要把工程目录下的debug文件夹整个拷贝出来即可，然后运行里面的exe文件即可，不需要额外再打包。
但是因为ZedGraph控件并非VS自带控件，生成应用程序的时候并没有添加该控件，而我们运行程序的时候是需要依赖这个控件的，所以要把这个控件添加到debug文件夹里面。

找到之前下载安装的ZedGraph控件，拷贝到工程目录里面的Debug文件夹。

运行exe文件即可。

五、结束语

根据ZedGraph的api和参考的一些资料，简单封装了几个函数，实现了描点划线的功能，实际上绘制的是折线图而不是曲线图，但是如果采集的点足够密集，看上去与曲线无异。当然，实际上可以通过对控件参数的调整优化曲线的显示效果，ZedGraph能做的事情很多，不过我只是浅度学习，没有花更多的时候去深入，感兴趣的通讯可以自己去尝试调整。
好了，关于绘制图形的介绍就到这里了，如果还有什么问题，欢迎在评论区留言。

源码和ZedGraph控件下载：https://download.csdn.net/download/ShenZhen_zixian/21798487