Knowledge is not alone, it must be systematic. More my personal summary and related experience can be found in this column: Visual Studio .
Combat background: A serial port receiving interface was made to receive the transmitted signal. However, it is too monotonous to display with numbers alone, and it needs to be displayed with graph lines.
Strategic Goal: Kill it.
Tactical route: You can use Qt Charts for Qt drawing, first understand some basic knowledge about Qt Charts, and then integrate it into my project according to your real-time dynamic curve needs.
Article directory
1. Implement the simplest line chart
Effects first, explanations later. The operation steps and effects are as follows:
documentGUI.h
documentGUI.cpp
The final running effect:
Possible bug: C1083
Just refer to this article to solve it: 【Visual Studio】Error C1083, use C++ language, cooperate with Qt to develop serial communication interface .
knowledge behind
The relevant classes provided by Qt are:
Forget it, there are a total of 48 classes. You don’t need to use all of them to realize a chart. According to the chart you need to implement, you only need to use a few of them. These classes can be roughly divided into the following categories:
QChartView Class: An area used to display charts, or understood as a canvas, can realize all charts supported by Qt Chart on QChartView.
QChartView -> QGraphicsView -> QAbstractScrollArea -> QFrame -> QWidget
QChart Class: QChart is a QGraphicsWidget, which can be displayed on QGraphicsScene and used to manage data, legends, coordinate axes, etc. in the chart.
QChart -> QGraphicsWidget -> QGraphicsObject and QGraphicsLayoutItem QGraphicsObject <-- QObject and QGraphicsItem
QLineSeries ClassThis is the type of chart, others areQSplineSeries,QAreaSeries,QScatterSeriesand so on.
2. Configure the display area of the chart chart
The display position of the table made by the above steps is displayed in the entire interface frame, and other contents are covered, which is definitely not possible.
Next, I will record the way I think is good after comparing it from the Internet. The net effect is to limit the graph to a certain area. Results as shown below.
documentGUI.ui
Here I am using the method of adding Widgeta .
documentGUI.cpp
Possible bug: C2653
Just refer to this article to solve it: [Visual Studio] Report error C2653, use C++ language, and cooperate with Qt to develop serial communication interface .
3. Add XY axis and modify the display range
Before realizing the dynamic curve, we must first have the function of modifying the display range of the coordinate axis. Otherwise, when more and more data is transmitted, and the display range of the coordinate axis does not change in time, the data cannot be displayed normally.
documentGUI.h
documentGUI.cpp
4. Use the current system time as the X-axis coordinate
documentGUI.ui
documentGUI.h
This qdatetimeaxis.his done .
documentGUI.cpp
5. Dynamic curve
Dynamic curve, as the name suggests, is to make the curve move. In fact, after the above steps, it only takes two sentences to make the program move.
I wrote these two sentences into my serial port receiving program, that is, after receiving the data, I will update the chart. You can put it in a suitable position according to your own needs, so that its update mechanism can better meet your project needs.
Finally, put a picture of the final effect of this small project. Further down, it involves some laboratory confidential data, so it is inconvenient to continue to display.
