This article mainly introduces how Qt uses QChart to realize real-time waveform drawing. The sample code in the article is explained in detail. It must be of reference value for our study. If you need it, you can refer to it.

The benefits of this article, free to receive Qt development learning materials package, technical video, including (C++ language foundation, C++ design pattern, introduction to Qt programming, QT signal and slot mechanism, QT interface development-image drawing, QT network, QT database programming, QT project actual combat, QSS, OpenCV, Quick module, interview questions, etc.) ↓↓↓↓↓↓See below↓↓Click on the bottom of the article to receive the fee↓↓

foreword

A drawing function needs to be done in the first two days. Our requirements are as follows: the hardware sends data in real time, draws a waveform diagram of the data, and requires the waveform diagram to change in real time according to the data.

The display effect is as follows:

If you have the same function as me, you can continue to look down, maybe it will be of some help to you~

Look at the display picture above and you will find out why it is so ugly! Indeed, according to the real-time incoming data and time of the hardware, the generated data will definitely not be beautiful.

The actual hardware passes in a data depth value, and the data is similar to the following structure:

[0, 3, 5, 8, 10, 13, 15, 18, 20, 23, 25, 28, 26, 23, 20, 16, 13, 11, 9, 6, 4, 3, 0]

According to the actual data, you will find that the data depth value will change from small to large, and after reaching a maximum value, it will change from large to small until it reaches the 0 position.

The change of data is the above rule, but it does not mean that the data passed in by the hardware is exactly the same as what I wrote above, but the data form is the same.

So, how do we draw graphics in real time to show the initial effect?

For simplicity, we use the unique drawing control in Qt: QChart

Development environment: VS2017 + Qt5.14.2

Next, I will explain the functions in detail, and finally explain the advantages and disadvantages of using QChart.

1. QChart configuration and use

1.1QChart environment configuration

We want to use the QChart control in Qt, we need to configure it in the project, the effect is as follows:

1.2 Control use

Drag out a GrahpiceView control in the Designer and promote it to the QChart class.

The promotion method is as follows:

Then, we can use the QChart control in the project!

1.3 code configuration

Add header file: #include <QtCharts>

And you need to use the QtChart namespace: using namespace QtCharts;

At this point, the configuration of QChart has been completed, and the following enters the actual application.

2. QChat set dynamic line chart

Everyone is familiar with the static line chart, so how to set up the dynamic line chart? A dynamic effect similar to the following:

2.1 Basic data settings

//x坐标轴
QValueAxis *m_pAxisX = new QValueAxis();
m_pAxisX->setMin(0);
m_pAxisX->setMax(100);
//y坐标轴
QValueAxis *m_pAxisY = new QValueAxis();
m_pAxisY->setRange(-40, 0);
//创建折线类
QLineSeries *m_pLineSeries = new QLineSeries(); //创建折线绘制对象
m_pLineSeries->setPointsVisible(true); //设置数据点可见
m_pLineSeries->attachAxis(m_pAxisX); //X轴绑定
m_pLineSeries->attachAxis(m_pAxisY); //Y轴绑定
//创建QChart
QChart *m_pChart = new QChart();
m_pChart->addAxis(m_pAxisX, Qt::AlignBottom); //将X轴添加到图表上
m_pChart->addAxis(m_pAxisY, Qt::AlignRight); //将Y轴添加到图表上
m_pChart->addSeries(m_pLineSeries);
m_pChart->setMargins(QMargins(0, 0, 0, 0));
m_pChart->legend()->hide(); //隐藏图例
//绑定chart控件
ui.chart->setChart(m_pChart);
ui.chart->setRenderHint(QPainter::Antialiasing);

2.2 Timer control data change

In the case of normal use of QChart, the graphics are fixed, so how to realize the dynamic effect?

The so-called moving data is actually the need to add data or replace data in QChart.

Everyone is optimistic! ! Yes: add or replace .

In general, when making dynamic graphs, the best way to achieve high efficiency and performance is to replace them. Let’s optimize this method. Here we simply move the data, and we use the method of always appending.

Ideas:

1: Start a timer.

2: Every time you enter the timer, you need to reset the range of the X-axis.

3: Every time you enter the timer, you need to append a new piece of data.

Timer processing code:

if (event->timerId() == m_nTimerId)
{
	int nCount = m_pLineSeries->points().size();
	m_pChart->axisX()->setMin(nCount - 100);
	m_pChart->axisX()->setMax(nCount);

	m_pLineSeries->append(QPointF(nCount, -rand()%40));
}

3. Actual hardware data acquisition graphics drawing

After the introduction of the first two parts, we have a preliminary understanding of QChart's dynamic drawing. Next, we need to analyze the actual data and draw a line chart like the one at the beginning of the article.

Also use the append method. Here, it is not the random number inserted: -rand()%40, but the real data.

Define the interface to receive hardware real data:

SetReceiveRealTimeData(int nData);//设置：接收实时数据值

We need to define a member variable in the program to record the latest data value at all times. In the timer, we only need to draw the latest data value in real time.

The actual operation of the receiving function:

void SetReceiveRealTimeData(int nData)
{
    m_nDepth = nData; //始终记录最新的深度值
}

Timer code modification operation:

if (event->timerId() == m_nTimerId)
{
	int nCount = m_pLineSeries->points().size();
	m_pChart->axisX()->setMin(nCount - 100);
	m_pChart->axisX()->setMax(nCount);

	m_pLineSeries->append(QPointF(nCount, m_nDepth);
}

With only a little modification, the waveform can be drawn according to the actual depth value.

4. Summary

Our advantages in using QChart :

1: Let the control help us to do graphics drawing, reducing unnecessary drawing operations

2: Frequent refresh of the interface will not cause the page to flicker

3: Simple operation

So, what are the disadvantages of QChart ?

1: As long as the data is not appended, the waveform will freeze

2: Unable to satisfy graphics operations while refreshing data.

3: The stored data will always increase, and the dynamic page takes too long to reduce performance and consume resources.

Some people may ask, what does it mean to refresh the data and change the graphics when it cannot be satisfied?

Explanation: I have a special requirement here. During the actual data drawing process, the curve of the graph needs to be changed in real time. The final display must be a straight line, not the same as the effect at the beginning of the article.

The standard display method is as follows: