Qt 动态实时显示波形图

Qt 动态实时显示波形图

一、获取串口数据

串口数据的发送和接收过程，我们需要单独的添加串口的相关模块进去，模块名称叫做serialport ， 同理下面绘制波形图所需的模块叫做charts；

QT  += core gui serialport charts

添加头文件

#include <QtSerialPort>
#include <QtCharts/QChartView>
#include <QtCharts/QSplineSeries>
#include <QDateTimeAxis>
#include <QValueAxis>
#include <QTimer>
#include "QDateTime"

1、实例化一个串口对象

QSerialPort global_port;

2、设置参数

校验位 ， 数据位 ， 停止位等，再将信号与槽函数连接起来。

 	global_port.setParity(QSerialPort::NoParity);
    global_port.setDataBits(QSerialPort::Data8);
    global_port.setStopBits(QSerialPort::OneStop);

    connect(ui->Open, SIGNAL(Open_clicked()),this,SLOT(on_Open_clicked()));
    connect(ui->Close , SIGNAL(Close_clicked()) , this , SLOT(on_Close_clicked()));
    connect(&global_port ,SIGNAL(readyRead()) , this ,SLOT(on_readyRead()));

3、设置端口（以COM12为例）

  global_port.setPortName("COM12");

4、设置波特率（以9600为例）

 global_port.setBaudRate(QSerialPort::Baud9600);

5、打开串口

参数：模式（只读 ， 只写 ， 读写等）

 global_port.open(QSerialPort::ReadWrite);

6、读取串口 ， 返回一个array

 global_port.readAll();

```c++
 #### 7、关闭串口
```c++
global_port.close();

二、QtCharts绘制

1、定义

想要绘制曲线图需要定义画布 ， 线 ， 轴 ， 如果要实时显示的需要借助定时器，隔一段时间 ， 增加新的点到曲线末尾。

 QTimer *timer;                           //计时器
 QChart *chart;                           //画布
 QSplineSeries *series;                     //线
 QDateTimeAxis *axisX;                    //轴
 QValueAxis *axisY;

2、配置

下面是对画布线 轴 的配置 （ 比较简单 ， 有对应的注释）

QPen peny(Qt::darkRed , 3 , Qt::SolidLine , Qt::RoundCap , Qt::RoundJoin);
chart = new QChart();
series = new QSplineSeries();
axisX = new QDateTimeAxis();
axisY = new QValueAxis();

chart->legend()->hide();        //隐藏图例
chart->addSeries(series);       //把线添加到chart中
axisX->setTickCount(10);   //设置坐标轴格数
axisY->setTickCount(5);

axisX->setFormat("hh:mm:ss");       //设置线式格式
axisY->setMin(0);       //设置最小值
axisY->setMax(100);
axisX->setTitleText("时间");
axisY->setLinePenColor(QColor(Qt::darkBlue));       //设置坐标轴颜色
axisY->setGridLineColor(QColor(Qt::darkBlue));
//axisY->setGridLineColor(QColor(Qt::darkBlue));
axisY->setGridLineVisible(false);        //设置Y轴网格不显示
axisY->setLinePen(peny);
axisX->setLinePen(peny);

chart->addAxis(axisX , Qt::AlignBottom);
chart->addAxis(axisY , Qt::AlignLeft);

series->attachAxis(axisX);
series->attachAxis(axisY);

axisY->setTitleText("y1");

ui->widget->setChart(chart);
ui->widget->setRenderHint(QPainter::Antialiasing);

3、UI设计

UI这边比较简单 ， 就是几个pushbutton ，QComboBox ， widget等

4、定时器的配置

    timer = new QTimer(this);
    connect(timer , SIGNAL(timeout()) , this , SLOT(DrawLine()));

5、开始画图

QDateTime currentTime = QDateTime::currentDateTime();
//设置坐标轴的线式范围
chart->axisX()->setMin(QDateTime::currentDateTime().addSecs(-60*1));
chart->axisX()->setMax(QDateTime::currentDateTime().addMSecs(0));

qsrand(QTime(0,0,0).secsTo(QTime::currentTime()));

//增加新的点到曲线末尾
series->append(currentTime.toMSecsSinceEpoch() , number);

6、效果展示

三、获取代码

链接: Qt 动态实时显示波形图.