加入星計(jì)劃,您可以享受以下權(quán)益:

  • 創(chuàng)作內(nèi)容快速變現(xiàn)
  • 行業(yè)影響力擴(kuò)散
  • 作品版權(quán)保護(hù)
  • 300W+ 專業(yè)用戶
  • 1.5W+ 優(yōu)質(zhì)創(chuàng)作者
  • 5000+ 長(zhǎng)期合作伙伴
立即加入
  • 正文
    • 一、新建項(xiàng)目
    • 二、添加ZedGraph控件
    • 三、添加控件并編寫代碼
    • 四、程序打包
  • 相關(guān)推薦
  • 電子產(chǎn)業(yè)圖譜
申請(qǐng)入駐 產(chǎn)業(yè)圖譜

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

11/21 15:00
679
閱讀需 10 分鐘
加入交流群
掃碼加入
獲取工程師必備禮包
參與熱點(diǎn)資訊討論

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

PS:我使用的控件是ZedGraph。

一、新建項(xiàng)目

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

我安裝的是vs2019版本。

在這里插入圖片描述

第2步:配置項(xiàng)目

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

在這里插入圖片描述

二、添加ZedGraph控件

VS默認(rèn)是沒有ZedGraph這個(gè)控件的,需要自己下載并安裝。

1、下載ZedGraph

ZedGraph控件可以自己百度搜索下載,也可以在我上傳的鏈接下載。

ZedGraph控件下載:https://download.csdn.net/download/ShenZhen_zixian/21798487

2、安裝ZedGraph

第1步:在工具箱右鍵,打開選擇項(xiàng)。

在這里插入圖片描述

第2步:點(diǎn)擊瀏覽,選擇下載好的ZedGraph文件,點(diǎn)擊確定。

在這里插入圖片描述

安裝完成后可以在工具箱里面看到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 = "測(cè)試圖形";
            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ù)變化時(shí)繪圖
            zedGraphControl1.Invalidate();  // 更新圖表
            Refresh();  // 重繪控件
        }

        // 測(cè)試用例,編寫一些數(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();  // 用來(lái)取隨機(jī)數(shù)
            for (int i = 0; i < 60; i++)
            {
                // 取隨機(jī)數(shù)據(jù)并顯示曲線
                x[i] = i;
                y[i] = num.NextDouble();

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

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

運(yùn)行了三個(gè)示例,結(jié)果如下:

1:隨機(jī)取60個(gè)點(diǎn)繪制折線圖

在這里插入圖片描述

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

在這里插入圖片描述

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

在這里插入圖片描述

最后再做幾個(gè)不一樣的圖

提示:修改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)境,但是我們做好的上位機(jī)實(shí)際運(yùn)行的環(huán)境可能并沒有安裝VS,因此需要把調(diào)試好的軟件打包成通用的應(yīng)用程序。因?yàn)槲覀兘ǖ捻?xiàng)目是window窗體應(yīng)用,正常情況我們只需要把工程目錄下的debug文件夾整個(gè)拷貝出來(lái)即可,然后運(yùn)行里面的exe文件即可,不需要額外再打包。

但是因?yàn)閆edGraph控件并非VS自帶控件,生成應(yīng)用程序的時(shí)候并沒有添加該控件,而我們運(yùn)行程序的時(shí)候是需要依賴這個(gè)控件的,所以要把這個(gè)控件添加到debug文件夾里面。

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

在這里插入圖片描述
運(yùn)行exe文件即可。
在這里插入圖片描述

五、結(jié)束語(yǔ)

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

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

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

相關(guān)推薦

電子產(chǎn)業(yè)圖譜