VS上位機開發(fā)——曲線顯示

剛剛接觸上位機的開發(fā)，單純是為了玩一下，淺度學(xué)習(xí)，關(guān)于曲線顯示的實現(xiàn)方法，網(wǎng)上的資料太雜，也很零碎，經(jīng)過自己的一些摸索，終于實現(xiàn)了我想要的效果，算是邁出了第一步。寫博客記錄一下學(xué)習(xí)的過程。

PS：我使用的控件是ZedGraph。

一、新建項目

第1步：創(chuàng)建一個Window窗體應(yīng)用(.NET Framework)

我安裝的是vs2019版本。

第2步：配置項目

提示：框架要選.NET Framework 4以上，如果沒有，先確認(rèn)項目選的是不是Window窗體應(yīng)用，再確認(rèn)是否安裝NET Framework。項目名稱隨便寫，我這里用的是之前截的一個圖片。

二、添加ZedGraph控件

VS默認(rèn)是沒有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);  // 初始化后創(chuàng)建設(shè)置控件的方法并將當(dāng)前ZedGraph控件傳遞
            drawCurveTest();
        }

        // 初始化，配置圖表相關(guān)的參數(shù)
        public void createPane(ZedGraphControl zgc)
        {
            GraphPane myPane = zgc.GraphPane;

            // 設(shè)置圖表標(biāo)題 和 x y 軸標(biāo)題
            myPane.Title.Text = "測試圖形";
            myPane.XAxis.Title.Text = "X軸標(biāo)題";
            myPane.YAxis.Title.Text = "Y軸標(biāo)題";

            // 更改標(biāo)題的字體
            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]);  // 添加一組數(shù)據(jù)
            }
            LineItem myCurve = myPane.AddCurve("曲線1", list1, Color.Red, SymbolType.Star);  // 用list1生產(chǎn)一條曲線，標(biāo)注是“曲線1”
            myPane.Fill = new Fill(Color.White, Color.FromArgb(200, 200, 255), 45.0f);  // 填充圖表顏色

            zgc.AxisChange();  // 在數(shù)據(jù)變化時繪圖
            zedGraphControl1.Invalidate();  // 更新圖表
            Refresh();  // 重繪控件
        }

        // 測試用例，編寫一些數(shù)據(jù)并繪制成曲線
        double[] x = new double[60];  // 用于存放x坐標(biāo)
        double[] y = new double[60];  // 用于存放y坐標(biāo)
        public void drawCurveTest()
        {
            Random num = new Random();  // 用來取隨機數(shù)
            for (int i = 0; i < 60; i++)
            {
                // 取隨機數(shù)據(jù)并顯示曲線
                x[i] = i;
                y[i] = num.NextDouble();

                //  畫一個一元二次函數(shù) y = (x + 2)( x + 5)
                // x[i] = i - 30;  // 從負(fù)半軸開始取點
                // y[i] = (x[i] + 2) * (x[i] + 5);

                //  畫一個反比例函數(shù) y = 5 / x
                // x[i] = i;
                // y[i] = 5.0 / x[i];
            }
            drawCurve(zedGraphControl1, x, y, 60);
        }
    }
}

運行了三個示例，結(jié)果如下：

1：隨機取60個點繪制折線圖

2：繪制一個一元二次函數(shù) y = (x + 2)( x + 5)

3：繪制一個反比例函數(shù) y = 5 / x

最后再做幾個不一樣的圖

提示：修改AddCurve()函數(shù)的參數(shù)(SymbolType)即可。

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

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

四、程序打包

在VS里面調(diào)試需要依賴VS的環(huán)境，但是我們做好的上位機實際運行的環(huán)境可能并沒有安裝VS，因此需要把調(diào)試好的軟件打包成通用的應(yīng)用程序。因為我們建的項目是window窗體應(yīng)用，正常情況我們只需要把工程目錄下的debug文件夾整個拷貝出來即可，然后運行里面的exe文件即可，不需要額外再打包。

但是因為ZedGraph控件并非VS自帶控件，生成應(yīng)用程序的時候并沒有添加該控件，而我們運行程序的時候是需要依賴這個控件的，所以要把這個控件添加到debug文件夾里面。

找到之前下載安裝的ZedGraph控件，拷貝到工程目錄里面的Debug文件夾。

運行exe文件即可。

五、結(jié)束語

根據(jù)ZedGraph的api和參考的一些資料，簡單封裝了幾個函數(shù)，實現(xiàn)了描點劃線的功能，實際上繪制的是折線圖而不是曲線圖，但是如果采集的點足夠密集，看上去與曲線無異。當(dāng)然，實際上可以通過對控件參數(shù)的調(diào)整優(yōu)化曲線的顯示效果，ZedGraph能做的事情很多，不過我只是淺度學(xué)習(xí)，沒有花更多的時候去深入，感興趣的通訊可以自己去嘗試調(diào)整。

好了，關(guān)于繪制圖形的介紹就到這里了，如果還有什么問題，歡迎在評論區(qū)留言。

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