前言
本篇文章开始将带大家学习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 <QWidget> #include <QLineSeries> #include <QDateTimeAxis> #include <QTimer> #include <QSplineSeries> 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
TempHum.cpp:
#include "TempHum.h" #include "ui_TempHum.h" #include <QValueAxis> #include <QDateTime> #include <QDebug> 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(); }
运行效果:
总结
本篇文章就讲解到这里。
源码在微信公众号中获取。
