QT chart图表（温度曲线实战）

---

前言

本篇文章开始将带大家学习QT chart图表，后面我们将完成一个小项目，动态温度曲线，并且将本项目移植到ARM开发板上使用DHT11实时检测温度湿度。

一、QChart介绍

QT的QChart是一个用于绘制各种类型图表的QT库。它提供了丰富的图表类型和绘制工具，能够方便地绘制出统计图、折线图、饼图等各种类型的图表。QChart是建立在QT的Graphics View框架上的，所以它的底层是一个集成了各种渲染和布局功能的图形组件。

QChart主要由以下几个模块构成：

QChart类：用于管理和绘制图表数据、系列和坐标轴等元素。它还提供了一些用于设置图表样式和交互的方法，比如设置图例、标题、背景颜色等。

QAbstractSeries类：QChart中用于表示图表数据系列的抽象类。可以通过继承它并实现对应的函数，来创建自己的数据系列。子类包括QLineSeries、QScatterSeries、QBarSeries等。

QAbstractAxis类：用于表示坐标轴的抽象类。Qt中默认支持四个坐标轴：x轴、y轴、x2轴和y2轴。可以通过继承它并实现对应的函数，来创建自己的坐标轴。子类包括QValueAxis、QCategoryAxis、QLogValueAxis等。

QChartView类：用于显示QChart的视图，它是一个继承自QGraphicsView的类，提供了一些与交互和样式有关的方法，比如设置缩放、设置拖动等。

QChart的使用非常灵活，可以通过qtcreator工具直接设计图表，也可以通过代码来动态绘制图表。通过设置数据系列、坐标轴和样式，可以很容易地创建出各种各样的图表，并且可以通过交互方式来使用户交互更友好。

二、帮助文档

在QT中的帮助文档中我们也可以查看到QChart的相应用法。

三、QGraphicsView

QGraphics View是QT中的一个用于创建2D图形界面的绘图框架，它基于QT的Graphics View框架，提供了一些图形操作方面的功能，如缩放、平移、旋转等，同时也提供了一些方便处理图形元素之间关系的方法。

在QGraphics View中，界面是由各种GraphicsItem组成的。GraphicsItem是一个抽象类，可以派生出各种不同类型的item。QGraphics View中提供的item包括：QGraphicsPixmapItem、QGraphicsTextItem、QGraphicsEllipseItem、QGraphicsRectItem等。在这些item上可以进行各种操作，比如指定位置、大小、颜色等。

QGraphics View中还提供了很多与绘图相关的类，比如QGraphicsScene、QGraphicsView、QGraphicsItemGroup等。其中，QGraphicsScene就是场景类，负责管理所有的图形元素，也可以看作是一个容器。而QGraphicsView就是作为场景的视图，提供了一些GUI相关的操作，如拖动、鼠标缩放等。

QGraphics View还支持对场景进行多层叠加，即一个场景可以包含多个图层，并且每个图层都可以管理自己的item。这种设计使得QGraphics View在实现复杂界面时更加灵活和方便。

在QT设计师中也可以查看到QGraphicsView

四、QChart的显示

要想显示出QChart需要使用到QChartView。
QChartView是基于QT的GraphicsView框架，提供了一些与显示图形视图相关的功能，如缩放、平移、旋转等，同时也提供了方便处理图形元素之间关系的方法。

通过将QChart对象设置给QChartView，我们可以将QChart的数据和元素显示在QChartView中。

实现动态温度湿度曲线图：

TempHum.h:

#ifndef TEMPHUM_H
#define TEMPHUM_H

#include 
#include 
#include 
#include 
#include 

namespace Ui {
class TempHum;
}

class TempHum : public QWidget
{
    Q_OBJECT

    QLineSeries *temp_series;
    QLineSeries *hum_series;
    QDateTimeAxis *ax;
    QVector<QPointF> temperatureData;
    QTimer *timer;

    void TempChart();
    void HumChart();

public:
    explicit TempHum(QWidget *parent = nullptr);
    ~TempHum();

private:
    Ui::TempHum *ui;

private slots:
    void updateTemp();
    void on_stop_btn_clicked();
    void on_start_btn_clicked();
    void on_Exitbtn_clicked();
};

#endif // TEMPHUM_H

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

TempHum.cpp:

#include "TempHum.h"
#include "ui_TempHum.h"
#include 
#include 
#include 


TempHum::TempHum(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::TempHum)
{
    ui->setupUi(this);

    /*显示温度湿度曲线*/
    TempChart();

    timer = new QTimer(this);
    timer->start(1000);
    connect(timer, SIGNAL(timeout()), this, SLOT(updateTemp()));
}

void TempHum::TempChart()
{
    QChart * chart = new QChart();

    chart->setTitle("温度(°C)/湿度(%)");/*设置图例标题*/
    ui->Temp->setRenderHint(QPainter::Antialiasing, true);/*抗锯齿*/
    ui->Temp->setChart(chart);

    /*x轴*/
    ax = new QDateTimeAxis();
    ax->setTitleText("times");
    ax->setTickCount(15);
    ax->setLineVisible(true);
    ax->setGridLineVisible(true);
    ax->setFormat("hh:mm:ss");
    ax->setRange(QDateTime::currentDateTime(), QDateTime::currentDateTime().addSecs(15));

    /*y轴*/
    QValueAxis *ay = new QValueAxis();
    ay->setTitleText("template/humidity");
    ay->setTickCount(15);
    ay->setLabelFormat("%.1f");//让y轴显示出小数部分
    ay->setRange(0, 100);
    ay->setLineVisible(true);
    ay->setGridLineVisible(true);


    /*温度曲线*/
    temp_series = new QLineSeries();
    temp_series->setName("温度");
    temp_series->setColor(QColor(255, 200, 20));
    /*设置初始值*/
    temp_series->append(QDateTime::currentDateTime().toMSecsSinceEpoch(), 30);

    /*湿度曲线*/
    hum_series = new QLineSeries();
    hum_series->setName("湿度");
    hum_series->setColor(QColor(150, 100, 200));
    /*设置初始值*/
    hum_series->append(QDateTime::currentDateTime().toMSecsSinceEpoch(), 50);

    /*将温度曲线添加进chart*/
    chart->addSeries(temp_series);
    chart->setAxisX(ax, temp_series);
    chart->setAxisY(ay, temp_series);

    /*将湿度曲线添加进chart*/
    chart->addSeries(hum_series);
    chart->setAxisX(ax, hum_series);
    chart->setAxisY(ay, hum_series);


    //chart->legend()->hide();//隐藏图标
}


void TempHum::updateTemp()
{
    // 更新温度曲线数据
    qint64 timestamp = QDateTime::currentDateTime().toMSecsSinceEpoch();
    double temperature = (double)(rand() % 30);

    // 更新湿度数据
    double hum = (double)(rand() % 100);

    /*显示当前温度和湿度*/
    QString TempHum = QString("当前温度:") +QString::number(temperature, 'f', 1) + "°C"
                    + QString("当前湿度:") + QString::number(hum, 'f', 1) + "%";

    ui->TempHumlbl->setText(TempHum);

    /*添加当前时间点的温度和湿度*/
    if (temp_series != nullptr && hum_series != nullptr)
    {
        temp_series->append(timestamp, temperature);
        hum_series->append(timestamp, hum);
        qDebug() << temp_series->count();
        if (temp_series->count() > 16)
        {
            /*移除第一个点*/
            temp_series->removePoints(0, 1);

            hum_series->removePoints(0, 1);

        }

        qDebug() << temp_series->count();

        // 调整温度曲线的 x 轴范围
        if (temp_series->count() > 15)
        {
            ax->setRange(QDateTime::fromMSecsSinceEpoch(temp_series->at(0).x()),
                         QDateTime::fromMSecsSinceEpoch(temp_series->at(temp_series->count()-1).x()));
        }
    }
}



TempHum::~TempHum()
{
    delete ui;
}

void TempHum::on_stop_btn_clicked()
{
    timer->stop();
}


void TempHum::on_start_btn_clicked()
{
    timer->start(1000);
}


void TempHum::on_Exitbtn_clicked()
{
    this->close();
}


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143

运行效果:

总结

本篇文章就讲解到这里。

源码在微信公众号中获取。