摘要：很多小伙伴问如何把串口接受到的数据通过曲线显示出来，其实这是用一个叫做QCustomPlot的控件，这个控件不是QT自带的，需要自己下载加入，今天介绍一下这个控件的使用方法，并附源码。

QCustomPlot简介

QCustomPlot是开源的Qt的第三方绘图库，QCustomPlot的源码只有两个文件，可以很方便的添加到自己的工程中。

QCustomPlot库很强大，利用他可以轻松实现柱状图、折线图、多轴、日期轴、金融图等，在其基础上，可以轻松实现曲线的平移、放大、取值、标记等功能，利用其预留的接口，自己可以派生类，随意定制自己的功能。

QCustomPlot库效率高、移植方便，可轻松实现二次开发，推荐使用。

控件源码获取

QCustomPlot下载地址：

https://www.qcustomplot.com/index.php/download

获取的压缩文件解压之后内容如下：

里面包括文档、示例程序、更改日志、GPL授权及该绘图类的源文件。

添加帮助文档

Qt Creator中有一个很好的功能，如果不知道类或对象有什么函数，选择名称，按 F1 键会直接进入该类的帮助文档，查找文档特别方便。

为了编程的过程中，可以及时查看QCustomPlot类中各个函数的定义，可以把该曲线类的帮助文档也添加到Qt Creator中。

在Qt Creator的菜单：工具–>选项–>帮助–>文档–>添加qcustomplot\documentation\qcustomplot.qch文件。

帮助文档添加完毕之后，我们就可以方便的查看各个类、函数的使用方法了。

当QCustomPlot中的哪个类或函数不清楚用法，我们可以将鼠标放到（或悬浮）某个类或函数上面，然后按F1键，就能调出该函数的详细使用说明。

Qt中的其他类或者函数，也可以按F1键获取帮助文档。

添加现有文件

先将“qcustomplot.h”和“qcustomplot.cpp”两个文件拷贝到工程所在目录下，然后用Qt Creator打开工程CommDemo.pro。

注意：先打开工程，后拷贝文件亦可。

在工程名称CommDemo上右键弹出菜单中，选择“添加现有文件”，在弹出的对话框中，选择文件“qcustomplot.h”、qcustomplot.cpp”，点击“打开”按钮，这样，qcustomplot的源文件就被添加到了工程中。

添加必要支持库

因为QCustomPlot中支持打印，所以需要在.pro 文件中添加printsupport。

引用头文件

在mainwindow.h文件中，引用头文件#include "qcustomplot.h"。

限定曲线显示的区域

设计软件界面的时候，首先要想好我们在哪个位置显示曲线。

具体实现步骤如下：

1、进入图形设计界面，添加Widget控件，利用Widget控件对曲线的显示区域进行占位。

2、在所添加的Widget区域点击右键，选择“提升为”按钮，提升类名称输入“QCustomPlot”，点击添加。

QCustomPlot是一个绘图的类，它继承于Widget，界面中的Widget类提升为QCustomPlot才能够绘图。

3、去掉原有的TableView，添加一个按钮用于测试，编译并运行，软件界面如下：

至此，QCustomPlot就移植成功了，是不是很简单？

显示曲线

步骤：

1、首先将上面提升为QCustomPlot类的容器界面的对象widget重命名为myCustomPlot，下面对该曲线控件的操作，只需要对对此变量名操作即可。

命名规则：符合自己习惯，方便记忆即可。

2、在主窗口MainWindow构造函数中添加如下代码，即可定义一条曲线。

MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow)
{ui->setupUi(this);//原有的串口初始化代码，略//...//添加一条曲线//向绘图区域QCustomPlot(从widget提升来的)添加一条曲线ui->myCustomPlot->addGraph();//设置画笔ui->myCustomPlot->graph(0)->setPen(QPen(Qt::blue));//设置画刷,曲线和X轴围成面积的颜色ui->myCustomPlot->graph(0)->setBrush(QBrush(QColor(255,255,0)));//设置右上角图形标注名称ui->myCustomPlot->graph(0)->setName("曲线");//设置坐标轴标签名称ui->myCustomPlot->xAxis->setLabel("x");ui->myCustomPlot->yAxis->setLabel("y");//设置坐标轴显示范围,否则我们只能看到默认的范围ui->myCustomPlot->xAxis->setRange(0,60);ui->myCustomPlot->yAxis->setRange(0,5000);
}

QCustomPlot中的每一个曲线是一个Graph对象，要显示曲线，首先要添加一条曲线：ui->myCustomPlot->addGraph(); 。

凡是跟显示数据有关的就对Graph进行操作或调用Graph对象提供的方法。

朋友们，思考一下，为什么Y轴的上限我初始化为5000？大家可以在留言区说出你的想法哈。

3、在头文件mainwindow.h中定义两个QVector数组，用于存放横轴和纵轴的数据。

QVector<double> arrX;
QVector<double> arrY;

4、每执行一次测试按钮的槽函数，就会向曲线中添加一个虚拟点，具体实现如下代码所示：

void MainWindow::on_btnTest_clicked()
{//生成模拟数据arrX.append(arrX.count());arrY.append(qrand()%4096);//传入数据，setData的两个参数类型为doubleui->myCustomPlot->graph(0)->setData(arrX,arrY);//曲线重绘ui->myCustomPlot->replot();
}

到目前为止，即实现了曲线的显示和向曲线中添加数据点的操作，具体效果演示如下：

下面我们要做的就是利用串口通信，获取声音传感器的数据，然后将声音的强度保存到数组arrY中，随后调用 ui->myCustomPlot->replot(); 语句完成重绘曲线。

发送串口数据

根据上一篇网文，我们知道我们今天要编写的Qt软件，相当于上一篇网文中的ModScan32软件。

我们要想获取声音传感器的值，只需要上位机以十六进制的方式发送数据帧：01 04 00 00 00 01 31 CA 。

STM32端收到串口指令之后，解析此数据帧，将当前的声音传感器的值封装数据帧之后，发送给上位机。

先用串口助手验证一下，确保硬件没有问题：

发送数据：01 04 00 00 00 01 31 CA ，STM32端能够返回预期的数据帧：01 04 02 XX XX XX XX ，证明STM32端是没有问题的，下面我们来修改CommDemo这个例程，让其可以正确的发送、接收和解析串口数据。

由于串口发送、接收功能，之前我们已经实现了，我们先测试一下，看看发送对应的串口数据，我们是否可以接收到正确的数据帧。

由上图我们可以看出来，数据：01 04 00 00 00 01 31 CA 发送之后，收到了满足预期的数据帧：01 04 02 00 15 78 FF ，证明串口通信部分代码是没问题的。

注意：

发送数据之前要先打开串口，并且串口的波特率要跟硬件STM32的串口波特率一致，即115200。
为了方便查看，记得勾选Hex发送和Hex显示。

解析串口数据

解析STM32发送过来的结果数据。

void MainWindow::receiveInfo()
{QByteArray info = m_serialPort->readAll();QString strReceiveData = "";if(ui->checkBoxHexReceive->isChecked()){QByteArray hexData = info.toHex();strReceiveData = hexData.toUpper();for(int i=0; i<strReceiveData.size(); i+=2+1)strReceiveData.insert(i, QLatin1String(" "));strReceiveData.remove(0, 1);ui->txtReceiveData->append(strReceiveData);//解析接收到的串口数据uint8_t pCharData[15] = { 0x00 };uint8_t crc16Low, crc16High;for (int i=0;i<info.size();i++){pCharData[i] = static_cast<uint8_t>(info.at(i));}uint16_t crc16 = chkcrc(pCharData, 5);crc16Low = static_cast<uint8_t>(crc16 & 0xff);             //校验位低8位crc16High = static_cast<uint8_t>((crc16 >> 8) & 0xff);     //校验位高8位if(crc16High == static_cast<uint8_t>(info.at(5)) && crc16Low == static_cast<uint8_t>(info.at(6)))   //（1）{if(static_cast<uint8_t>(info.at(0)) == 0x01 && static_cast<uint8_t>(info.at(1) == 0x04))    //（2）{//将声音传感器的数据添加至曲线中uint16_t nSoundIntensity = static_cast<uint8_t>(info.at(3))*256 + static_cast<uint8_t>(info.at(4)); //（3）arrX.append(arrX.count());arrY.append(nSoundIntensity);//传入数据，setData的两个参数类型为doubleui->myCustomPlot->graph(0)->setData(arrX,arrY);//曲线重绘ui->myCustomPlot->replot();}}}else{strReceiveData = info;//避免中文乱码QTextCodec *tc = QTextCodec::codecForName("GBK");QString tmpQStr = tc->toUnicode(info);ui->txtReceiveData->append(tmpQStr);}
}

解析：

1、首先要对接收到的一帧数据进行CRC校验，然后将计算出来的校验位和收到数据的校验位比对，一致则说明数据接收正确。

2、判断接收到的数据帧的地址位和功能码是否满足预期。

3、接收数据帧的第4、第5两个字节为数据位，按自定义协议对这两个字节进行组合，进而求得声音传感器的强度值。

注意：上面解析中1、2、3条说明，跟上面代码中的注释中的1、2、3所在行的代码相对应。

结果测试

在声音传感器旁播放音乐（目的：制造点声音），点击一次发送按钮，将获得一次声音强度的数据，将解析后的声音强度添加至曲线中，绘制的曲线如下图所示：

好了，今天的分享就到这里，曲线的绘制已经分享过了，后面曲线的平移、放大、缩小、复原、曲线上点的显示、辅助线的绘制等内容，各位根据需要自行添加哈。

源码获取

公众号后台回复：QCustomPlot，获取本文测试工程源码。

使用QT绘图控件QCustomPlot绘制波形图相关推荐

Qt绘图控件QCustomPlot
本文转载至:https://blog.csdn.net/dyxcc/article/details/127435337 一.介绍 QCustomPlot是一个Qt c++小控件,用于绘图和数据可视化. ...
qt超强精美绘图控件 - QCustomPlot一览及安装使用教程
1.概述 QCustomPlot 是一个超强超小巧的qt绘图类,非常漂亮,非常易用,只需要加入一个qcustomplot.h和qcustomplot.cpp文件即可使用,远比qwt方便和漂亮,可以自己 ...
QT绘图控件QWT的安装及配置
1.QWT库下载解压下载的压缩包,我们可以看到里面包含多个文件夹,有源码.有参考程序.有说明文档等等,有时间建议把参考程序都看一下,这样都每个控件有什么功能都很熟悉. 2.QWT编译网上介绍QWT ...
qt跟随鼠标动态绘制_采用Qt快速绘制多条曲线（折线），跟随鼠标动态显示线上点的值（基于Qt的开源绘图控件QCustomPlot进行二次开发）...
#include "MyTracer.h"XxwTracer::XxwTracer(QCustomPlot*_plot, TracerType _type, QObject *pa ...
Qt之开源绘图控件QCustomPlot
文章目录前言一.QCustomPlot 是什么? 二.基本概念 1.QCustomPlot 2.QCPLayer 3.QCPAbstractPlottable 三.简单使用四.简单封装总结前 ...
C#.NET常见问题(FAQ)-如何使用2D绘图控件ZedGraph绘制坐标轴和坐标曲线
添加数据:示例添加了一条sin曲线和一条cos曲线,注意cos曲线比sin曲线点更密集(可以用这种方式控制点的采样疏密程度) 默认显示效果如下图所示,可以框选一个部分看放大效果右击某个点可以显示坐标 ...
TeeChart替代品，MFC下好用的高速绘图控件-(Hight-Speed Charting)
相关链接: C++ GUI 绘图控件目录 MFC VS2010 使用TeeChart绘图控件 - 之一 - 控件和类的导入 VS2010 使用TeeChart绘图控件 - 之二 - 绘制图形(折线图, ...
qt整个窗口上绘制矩形与在窗口的子控件上绘制矩形
引言创建一个基于QDialog的项目,自动生成ui文件,此时再添加新文件,创建一个基于QWidget的ui类,此类具有自定义标题栏,让该自定义类显示在窗口Dialog上,一开始具有红色的边框线,且四 ...
基于MFC串口编程和曲线图绘制(visual studio2008,Teechart绘图控件)的程序总结
前言今年刚进入公司按经理的要求为底盘测控机写了一个小小的console.这也是第一次教认真的完成整个程序的编写.程序不大,所用技术比较基础也不前卫,属于初级程序员的练手程序(知识的整理和搬运).虽然 ...
MFC之图像绘制---高速绘图控件（High-speed Charting Control）应用（二）
High-speed Charting Control静态绘图在写之前必须推荐一篇文章,我也是跟着这位大佬学习的,点击这里进去查看一.建立坐标轴 ChartCtrl一共有3种坐标,分别是数值型(C ...

使用QT绘图控件QCustomPlot绘制波形图