QT实时绘图(利用QtChart，不添加第三方库)

前言：Qt实时绘图的需求，一般都是接收某些传感器的数据并实时显示到界面上。相关的方法有很多，如利用库Qwt, QCustomerPlot。由于本人对于Qt不是很熟悉，想着添加第三方库也需学习新的库函数，所以就一直在寻找直接利用QtChart实现实时绘图的方法。由于网上没有找到相关资料，在此记录本人的实现方式。

 

1. 官方的实时绘图实例

　　在QT官方例程中，有一个实时绘图实例。打开QT Creator(本人的QT Creator版本为4.10.2，QT版本为5.12)，点击左边示例->在搜索框搜索audio->找到实时绘图例程Audio  Example，如下图所示（也可以在安装路径的qt example中找到）：

 

 

 打开该工程，总共有2个cpp文件：widget.cpp和xyseriesiodevice.cpp。其中widget.cpp定义了一个窗口类，该窗口主要用来设置基本的参数，如QChart，QChartView，QValueAxis，QLineseries(这些参数是利用QTChart绘图的基本配置)。然后xyseriesiodevice.cpp定义了一个IODevice类 。该类的主要作用就是重写了writeData()函数。并在writeData()函数中更新QLineseries的数据。主要的逻辑就是在Widget的构造函数中调用QAudioInput::start()函数，这样一旦audio设备有数据，都会发送到IODecive中，通过调用IODevice的writeData()函数，实现QLineseries数据的更新，从而达到实时数据显示。

 

2. 实现实时绘图

　　从官方的例程中可以看到，为了实现实时绘图，必须不时更行跟界面绑定的QLineSeries的数据。由于例程利用了QAudioInput的数据接收产生的信号来更新series数据。为了实现自定义的数据刷新，可以利用QTimer定时中断来更新series数据。因此，改造xyseriesiodevice.cpp函数，不再需要writeData()函数，而是添加定时中断函数，在该函数中更新数据。改造后的xyseriesiodevice.h和xyseriesiodevice.cpp文件如下：

//xyseriesiodevice.h
class XYSeriesIODevice : public QObject
{
    Q_OBJECT
public:
    explicit XYSeriesIODevice(QXYSeries *series, QObject *parent = nullptr);

    static const int sampleCount = 2000;

    void XYSeriesIODeviceInit();  //用于开启定时器，连接信号和槽

public slots:
    void timeoutslot(); //定义定时中断函数，更行m_series的数据


private:
    QXYSeries *m_series;
    QVector<QPointF> m_buffer;
    float m_time;

    QTimer m_timer;  //定义QTimer，实现定时器更新数据
};

//xyseriesiodevice.cpp

#include "xyseriesiodevice.h"

#include <QtCharts/QXYSeries>

XYSeriesIODevice::XYSeriesIODevice(QXYSeries *series, QObject *parent) :
    QObject(parent),
    m_series(series)
{
}


void XYSeriesIODevice::XYSeriesIODeviceInit()
{
    connect(&m_timer,&QTimer::timeout,this,&XYSeriesIODevice::timeoutslot);
    if (m_buffer.isEmpty()) {
        m_buffer.reserve(sampleCount);
        for (int i = 0; i < sampleCount; ++i)
        {
            int x=rand()%10;
            m_buffer.append(QPointF(x, 0));
        }
    }
    m_timer.start(100);
}

//定时中断中更新数据，即m_series，在此函数中每10个数据更新一次
void XYSeriesIODevice::timeoutslot()
{
    int start=1990;

        for (int s = 0; s < start; ++s)
        {
            m_buffer[s].setX(m_buffer.at(s + 10).x());
            m_buffer[s].setY(m_buffer.at(s + 10).y());
        }

    for (int s = 1990; s < sampleCount;s++)
    {
       float x=10*cos(0.1*m_time);
       float y=10*sin(0.1*m_time);  //由于没有数据来源，在此本人设置了圆形轨迹
        m_buffer[s].setX(x);
        m_buffer[s].setY(y);
        m_time++;

    }

    m_series->replace(m_buffer);
}

注：为了实现传感器数据显示这种实时显示功能，在定时中断函数中，设置X坐标为时间，Y坐标为传感器数据即可，同时还可以调整数据更新的频率(每收到几个数据更新一次)。修改后就能看到实时的圆形轨迹，如下图。

 

 

 

3. 将实时绘图类整合封装成一个类

　　可以看到，上面的修改比较暴力，主要存在的问题如下：

1. 将一个实时绘图设置为了两个类：widget和XYSeriesIODevice，封装性并不好。

2. 主界面直接就是显示区，实际应用中，主界面除了实时显示区，通常还有其他部分(如按钮，面板之类的)。

实际上，可以发现XYSeriesIODevice类唯一的作用就是定义了QTimer并在定时中断中实时更新series数据，这个完全可以直接放到widget类实现。主界面直接就是显示区，是因为我们的项目并没有默认窗口(一般在创建项目时，都会默认生成一个界面MainWindow)，widget类本身就是一个Widge窗口，因此在创建类的同时，创建了窗口。为了解决以上问题，我们从头建一个项目，将实时绘图封装成一个可供调用的类。

主要的操作有以下几步：

1. 创建一个带默认窗口的项目，并在界面添加QGraphicsView作为显示界面(其他可以显示QChartView的显示界面均可)。

2. 编写实时绘图类RealTimePlot，该类主要需要以下成员变量：

QVector<QPointF> m_buffer：用于保存数据

QTimer m_timer：用于更新数据

QChart m_chart及QChartView m_chartview：用于显示

QSplineSeries m_series ：跟chart关联的数据series(在此我换成了QSplineSeries，用于画曲线)。

3. 将显示界面QGraphicsView跟自定义的实时绘图类绑定。

下面看主要的RealTimePlot类的定义(实际上就是将第2节中的两个类整合):

//realtimeplot.h

#include <QtCharts>

QT_CHARTS_USE_NAMESPACE


class RealTimePlot:public QGraphicsView
{
    Q_OBJECT
public:
    RealTimePlot(QWidget* parent=nullptr);

    static const int sampleCount=2000;

public slots:
    void timeoutslot();

private:
    QVector<QPointF> m_buffer;
    float m_time;

    QTimer m_timer;

    QChart *m_chart;
    QSplineSeries *m_series ;
};

 

#include "realtimeplot.h"

RealTimePlot::RealTimePlot(QWidget* parent):
    QGraphicsView(parent)
{
    m_chart=new QChart();
    m_series=new QSplineSeries();

    QChartView *chartView = new QChartView(m_chart);
    chartView->setMinimumSize(800, 600);
    m_chart->addSeries(m_series);
    QValueAxis *axisX = new QValueAxis;
    axisX->setRange(-10,10);
    axisX->setLabelFormat("%g");
    axisX->setTitleText("Samples");
    QValueAxis *axisY = new QValueAxis;
    axisY->setRange(-10, 10);
    axisY->setTitleText("Audio level");
    m_chart->addAxis(axisX, Qt::AlignBottom);
    m_series->attachAxis(axisX);
    m_chart->addAxis(axisY, Qt::AlignLeft);
    m_series->attachAxis(axisY);
    m_chart->legend()->hide();
    m_chart->setTitle("Data from the microphone");

    QVBoxLayout *mainLayout = new QVBoxLayout(this);
    mainLayout->addWidget(chartView);

    connect(&m_timer,&QTimer::timeout,this,&RealTimePlot::timeoutslot);

    if (m_buffer.isEmpty()) {
        m_buffer.reserve(sampleCount);
        for (int i = 0; i < sampleCount; ++i)
        {
            int x=rand()%10;
            m_buffer.append(QPointF(x, 0));
        }
    }
    m_timer.start(500);
}


void RealTimePlot::timeoutslot()
{
    int start=1990;

        for (int s = 0; s < start; ++s)
        {
            m_buffer[s].setX(m_buffer.at(s + 10).x());
            m_buffer[s].setY(m_buffer.at(s + 10).y());
        }

    for (int s = 1990; s < sampleCount;s++)
    {
       float x=10*cos(0.1*m_time);
       float y=10*sin(0.1*m_time);
        m_buffer[s].setX(x);
        m_buffer[s].setY(y);
        m_time++;

    }

    m_series->replace(m_buffer);
    //update();
}

 

最后是将GraphicsView和自定义的类绑定，这个就是“提升”(“提升”在本人的理解，就是将一个界面控件(相当于一个类对象)变成自定义带特殊功能的控件(新的自定义类对象)）。由于一个控件只能提升为同类型的类，所以我们编写的RealTimePlot类继承了QGraphicsView类。这样就能将一个GraphicsView控件提升为自定义RealTimePlot类。提升之后，一个GraphicsView控件(假设在MainWindow中叫graphicsView)就相当于函数语句：

ui->graphicsView=new RealTimePlot();

 

这样，最终的效果如下图(比较懒，没贴动图，实际会是实时显示的效果):

 

 源码见：https://github.com/yuanfuaccount/BalanceTrainer/tree/master/PersonalLib/RealTimePlot