QT chart图表(温度曲线实战)

这篇具有很好参考价值的文章主要介绍了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的相应用法。

qtchart使用,QT项目实战,qt,microsoft,开发语言

三、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
qtchart使用,QT项目实战,qt,microsoft,开发语言

四、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();
}


运行效果:

qtchart使用,QT项目实战,qt,microsoft,开发语言

总结

本篇文章就讲解到这里。

源码在微信公众号中获取。文章来源地址https://www.toymoban.com/news/detail-753100.html

到了这里,关于QT chart图表(温度曲线实战)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • QT图表-折线图、曲线图

    时间记录:2024/1/15 1.添加图表模块 .pro项目管理文件中添加charts模块 QChart类:图表类 QChartView类:图表显示类 2.ui文件中添加QChartView组件 (1)选择一个QGrapicsView组件将其拖拽到ui界面上合适位置 (2)右键新添加的QGrapicsView组件,将组件提升为QChartView组件 3.添加QChartView类的命

    2024年01月18日
    浏览(46)
  • C#使用Chart进行统计,切换不同的图表类型

    WindowsForm应用程序中Chart图表控件所属的命名空间: 命名空间: System.Windows.Forms.DataVisualization.Charting 对应的dll路径: C:Program Files (x86)Reference AssembliesMicrosoftFramework.NETFrameworkv4.6.1System.Windows.Forms.DataVisualization.dll ChartDemo,将默认的Form1,重命名为FormChart, 窗体设计器源程序

    2024年02月17日
    浏览(36)
  • Flutter最强大的图表库fl_chart的使用

    fl_chart 是Flutter中功能最全、最强大的图表库。在 flutter 中的地位相当于前端的 echarts 、android端的 MPAndroidChart 支持常见的LineChart(折线图)、BarChart(柱状图)、PieChart(饼图)。 库地址:https://pub-web.flutter-io.cn/packages/fl_chart 库文档提供了详细的api说明,但是太过形式主义,全是对参

    2024年02月09日
    浏览(41)
  • web3:使用Docker-compose方式部署blockscout浏览器+charts图表

    最近做的项目,需要blockscout来部署一个区块链浏览器,至于blockscout是什么,咱们稍后出一篇文章专门介绍下,本次就先介绍一下如何使用Docker-compose方式部署blockscout,以及过程中遇到的种种坑

    2024年02月11日
    浏览(47)
  • iOS 图表框架 Charts

    Charts - github iOS-Charts看这个就够了 - 稀土掘金 4.1.2 用条形图展示睡眠 要实现上面的效果 上面的代码实现的效果如下图 参考博客: iOS Charts库的简单使用 - BarChartView Swift - 第三方图表库Charts使用详解8(折线图7:事件响应、MarkerView标签) 参考博客: iOS Charts库的简单使用 - P

    2024年02月06日
    浏览(47)
  • Qt6中使用Qt Charts

     官方文档:Qt Charts 6.5.2           如果你是使用  CMake 构建的,则应在  CMakeLists.txt  中添加如下两行代码:         其中  mytarget 为你的项目名称。一共2处改动,如下截图:         改完之后,你在 .cpp 文件导入库名,就可以开始画图了。         关于怎么画出一个可

    2024年02月09日
    浏览(40)
  • 【QT】Qt Charts的实际使用中的一些小细节完善如:resetZoom、fitInView

    在Qt中, 使用 Qt Charts来创建和操作图表,重置图表缩放状态的功能可以通过调整图表视图的缩放比例来实现。Qt Charts中的 QChartView 提供了相关的方法来控制图表的缩放和平移。 示例代码,以及如何对此功能进行扩展: chartView-resetTransform(); 是重置图表视图的缩放到默认状态。

    2024年04月17日
    浏览(41)
  • 【数字孪生百科】可视化图表知识科普——Pareto图(Pareto Chart)

    Pareto图 (Pareto Chart)又称 帕累托图 、 排列图 ,是一种特殊类型的 条形图 。图中标绘的值是按照事件发生的频率排序而成,显示由于各种原因引起的缺陷数量或不一致的排列顺序。Pareto图是根据 Vilfredo Pareto 命名的,他的原理是“二八原则”,即20%的原因造成80%的问题,如

    2024年02月12日
    浏览(47)
  • Github每日精选(第87期):轻量级图表lightweight-charts

    lightweight-charts TradingView 轻量级图表是最小和最快的金融 HTML5 图表之一。 如果您想在网页上将财务数据显示为交互式图表而不影响网页加载速度和性能,轻量级图表库是您的最佳选择。 如果您想用交互式图表替换静态图像图表,它是您的最佳选择。该库的大小接近静态图像,

    2024年02月05日
    浏览(45)
  • iOS 17(SwiftUI 5.0)带来的图表(Charts)新类型:“大饼”与“甜甜圈”

    WWDC 2023 为我们带来了 iOS 17,也为我们带来了 SwiftUI 5.0。 在 SwiftUI 新版中,Apple 增加了很多重磅功能,也对原有功能做了大幅度升级。 对于 Charts 框架, 新增了饼图(Pie)类型并且加入了图表元素的原生选择功能。 在本篇博文中,就让我们一起来看看 SwiftUI 5.0 中这些激动

    2024年02月08日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包