To use Qt Charts, our Qt version must use a version after Qt 5.7. In fact, Qt Charts is not only available in Qt 5.7. Before Qt 5.7, only the commercial version of Qt has Qt Charts. The versions of Qt that we can download for free are community (open source) versions.
Qt Charts is very convenient to draw our common graphs, line graphs, histograms and pie charts. You don't need to spend your energy to understand the use of third-party components or develop third-party components. The Qt help document has explained how to use the main components of Qt Charts. When we need to use it, we can check the Qt documentation.
Let's briefly introduce the Qt Charts module. First, look at its inheritance relationship (you can understand how this class came from by looking at the inheritance relationship, it cannot be collapsed all at once).
As for how to view the inheritance relationship of the QChart class, use Ctrl + Shift + T to click the inheritance relationship of the class to be queried.
To use the Qt Charts module in the project, you need to add the following statement under the pro file.
QT += chartsIf we click to view the Qt Charts class, we can see that in order to use the Qt Charts class, in addition to including the corresponding header files, we also need to use the namespace, the format is as follows.
QT_CHARTS_USE_NAMESPACE
Or add the following statement outside the header file class.
using namespace QtCharts;Let's start the example directly and learn about the use of Qt Charts.
Applications
The purpose of this example: to quickly understand the use of Qt Charts. The example is very practical, in addition to drawing static curves, dynamic curves can also be drawn. The example can be directly applied to the actual project by using the provided interface to read the data and draw the dynamic graph.
Project name: qtchart_test, real-time dynamic curve. The basic process is as follows: use a QSplineSeries object (curve), a QChart (chart), and a QChartView (chart view). First we create a chart chart, and then create two coordinate axes axisX and axisY. Add two coordinate axes to the chart chart, and connect the splineSeries curve with the coordinate axes. Finally, add the chart chart to the chartView chart view. The data on the curve is generated by the system as a random number, and the timer is used to update the data.
The code part added to the first line of the project file qtchart_test.pro file is as follows.
QT += core gui charts
greaterThan(QT_MAJOR_VERSION, 4): QT += widgets
CONFIG += c++11
# The following define makes your compiler emit warnings if you use
# any Qt feature that has been marked deprecated (the exact warnings
# depend on your compiler). Please consult the documentation of the
# deprecated API in order to know how to port your code away from it.
DEFINES += QT_DEPRECATED_WARNINGS
# You can also make your code fail to compile if it uses deprecated APIs.
# In order to do so, uncomment the following line.
# You can also select to disable deprecated APIs only up to a certain version of Qt.
#DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000 # disables all the APIs deprecated before Qt 6.0.0
SOURCES += \
main.cpp \
mainwindow.cpp
HEADERS += \
mainwindow.h
# Default rules for deployment.
qnx: target.path = /tmp/$${TARGET}/bin
else: unix:!android: target.path = /opt/$${TARGET}/bin
!isEmpty(target.path): INSTALLS += targetThe specific code in the header file "mainwindow.h" is as follows.
#ifndef MAINWINDOW_H
#define MAINWINDOW_H
#include <QChartView>
#include <QSplineSeries>
#include <QScatterSeries>
#include <QDebug>
#include <QValueAxis>
#include <QTimer>
#include <QMainWindow>
/* 必需添加命名空间 */
QT_CHARTS_USE_NAMESPACE
class MainWindow : public QMainWindow
{
Q_OBJECT
public:
MainWindow(QWidget *parent = nullptr);
~MainWindow();
private:
/* 接收数据接口 */
void receivedData(int);
/* 数据最大个数 */
int maxSize;
/* x轴上的最大值 */
int maxX;
/* y轴上的最大值 */
int maxY;
/* y轴 */
QValueAxis *axisY;
/* x轴 */
QValueAxis *axisX;
/* QList int类型容器 */
QList<int> data;
/* QSplineSeries对象（曲线）*/
QSplineSeries *splineSeries;
/* QChart图表 */
QChart *chart;
/* 图表视图 */
QChartView *chartView;
/* 定时器 */
QTimer *timer;
private slots:
void timerTimeOut();
};
#endif // MAINWINDOW_HThe specific code in the source file "mainwindow.cpp" is as follows.
#include "mainwindow.h"
#include <QDateTime>
MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
{
/* 设置最显示位置与大小 */
this->setGeometry(0, 0, 800, 480);
/* 最大储存maxSize - 1个数据 */
maxSize = 51;
/* x轴上的最大值 */
maxX = 5000;
/* y轴最大值 */
maxY = 40;
/* splineSeries曲线实例化（折线用QLineSeries） */
splineSeries = new QSplineSeries();
/* 图表实例化 */
chart = new QChart();
/* 图表视图实例化 */
chartView = new QChartView();
/* 坐标轴 */
axisY = new QValueAxis();
axisX = new QValueAxis();
/* 定时器 */
timer = new QTimer(this);
/* legend译图例类型，以绘图的颜色区分，本例设置为隐藏 */
chart->legend()->hide();
/* chart设置标题 */
chart->setTitle("实时动态曲线示例");
/* 添加一条曲线splineSeries */
chart->addSeries(splineSeries);
/* 设置显示格式 */
axisY->setLabelFormat("%i");
/* y轴标题 */
axisY->setTitleText("温度/℃");
/* y轴标题位置（设置坐标轴的方向） */
chart->addAxis(axisY, Qt::AlignLeft);
/* 设置y轴范围 */
axisY->setRange(0, maxY);
/* 将splineSeries附加于y轴上 */
splineSeries->attachAxis(axisY);
/* 设置显示格式 */
axisX->setLabelFormat("%i");
/* x轴标题 */
axisX->setTitleText("时间/ms");
/* x轴标题位置（设置坐标轴的方向） */
chart->addAxis(axisX, Qt::AlignBottom);
/* 设置x轴范围 */
axisX->setRange(0, maxX);
/* 将splineSeries附加于x轴上 */
splineSeries->attachAxis(axisX);
/* 将图表的内容设置在图表视图上 */
chartView->setChart(chart);
/* 设置抗锯齿 */
chartView->setRenderHint(QPainter::Antialiasing);
/* 设置为图表视图为中心部件 */
setCentralWidget(chartView);
/* 定时200ms */
timer->start(200);
/* 信号槽连接 */
connect(timer, SIGNAL(timeout()), this, SLOT(timerTimeOut()));
/* 设置随机种子，随机数初始化 */
qsrand(time(NULL));
}
MainWindow::~MainWindow()
{
}
void MainWindow::timerTimeOut()
{
/* 产生随机0~maxY之间的数据 */
receivedData(qrand() % maxY );
}
void MainWindow::receivedData(int value)
{
/* 将数据添加到data中 */
data.append(value);
/* 当储存数据的个数大于最大值时，把第一个数据删除 */
while (data.size() > maxSize) {
/* 移除data中第一个数据 */
data.removeFirst();
}
/* 先清空 */
splineSeries->clear();
/* 计算x轴上的点与点之间显示的间距 */
int xSpace = maxX / (maxSize - 1);
/* 添加点，xSpace * i 表示第i个点的x轴的位置 */
for (int i = 0; i < data.size(); ++i) {
splineSeries->append(xSpace * i, data.at(i));
}
}The receivedData(int value) function is the code to realize the movement of the curve. The code algorithm is that when the number of data exceeds the maximum value, we delete the first data. Repeatedly, the process of data movement is realized. At the same time, in the chart view The curve "moves" as the value changes.
