Qt使用QChart實(shí)現(xiàn)動(dòng)態(tài)顯示溫度變化曲線

更新時(shí)間：2023年06月02日 14:37:14 作者：DS小龍哥

Qt的QChart是一個(gè)用于繪制圖表和可視化數(shù)據(jù)的類，提供了一個(gè)靈活的、可擴(kuò)展的、跨平臺(tái)的圖表繪制解決方案，所以本文就將使用QChart實(shí)現(xiàn)動(dòng)態(tài)顯示3個(gè)設(shè)備的溫度變化曲線，感興趣的可以了解一下

一、介紹

Qt的QChart是一個(gè)用于繪制圖表和可視化數(shù)據(jù)的類。提供了一個(gè)靈活的、可擴(kuò)展的、跨平臺(tái)的圖表繪制解決方案，可以用于各種應(yīng)用程序，如數(shù)據(jù)分析、科學(xué)計(jì)算、金融交易等。

QChart支持多種類型的圖表，包括折線圖、散點(diǎn)圖、柱狀圖、餅圖等。它還支持多個(gè)數(shù)據(jù)系列（datasets）在同一個(gè)圖表中顯示，并且可以自定義各種圖表屬性和樣式，如坐標(biāo)軸標(biāo)簽、標(biāo)題、圖例等。

QChart還支持多種數(shù)據(jù)源（data sources），可以來(lái)自Qt的數(shù)據(jù)模型（data models）、CSV文件、JSON文件等。數(shù)據(jù)源可以是任何支持迭代器（iterator）的類型，因此可以輕松地與其他Qt組件集成。

使用QChart可以輕松地創(chuàng)建交互式圖表，如鼠標(biāo)懸停提示（hover tooltip）、數(shù)據(jù)選擇（data selection）等。此外，QChart還支持多種主題（themes）和自定義CSS樣式，使得圖表外觀可以靈活地定制。

二、實(shí)現(xiàn)代碼（1）QMainWindow

以下是使用Qt(C++)的QChart模塊顯示3個(gè)設(shè)備的動(dòng)態(tài)溫度曲線的代碼實(shí)現(xiàn)：

1.實(shí)現(xiàn)溫度動(dòng)態(tài)更新

mainwindow.h

?#ifndef MAINWINDOW_H
?#define MAINWINDOW_H
??
?#include <QMainWindow>
?#include <QtCharts/QChart>
?#include <QtCharts/QLineSeries>
?#include <QTimer>
??
?QT_CHARTS_USE_NAMESPACE
??
?namespace Ui {
?class MainWindow;
?}
??
?class MainWindow : public QMainWindow
?{
? ? ?Q_OBJECT
??
?public:
? ? ?explicit MainWindow(QWidget *parent = nullptr);
? ? ?~MainWindow();
??
?private slots:
? ? ?void updateChartData(); // 更新數(shù)據(jù)槽函數(shù)
??
?private:
? ? ?Ui::MainWindow *ui;
? ? ?QTimer *m_timer; // 定時(shí)器
??
? ? ?QChart *m_chart; // 圖表指針
??
? ? ?QLineSeries *m_series1; // 設(shè)備1溫度曲線
? ? ?QLineSeries *m_series2; // 設(shè)備2溫度曲線
? ? ?QLineSeries *m_series3; // 設(shè)備3溫度曲線
??
? ? ?int m_timeCount; // 時(shí)間計(jì)數(shù)
?};
??
?#endif // MAINWINDOW_H

mainwindow.cpp

?#include "mainwindow.h"
?#include "ui_mainwindow.h"
??
?MainWindow::MainWindow(QWidget *parent) :
? ? ?QMainWindow(parent),
? ? ?ui(new Ui::MainWindow),
? ? ?m_timer(new QTimer(this)),
? ? ?m_chart(new QChart()),
? ? ?m_series1(new QLineSeries()),
? ? ?m_series2(new QLineSeries()),
? ? ?m_series3(new QLineSeries()),
? ? ?m_timeCount(0)
?{
? ? ?ui->setupUi(this);
??
? ? ?// 設(shè)置圖表標(biāo)題
? ? ?m_chart->setTitle("Temperature Data");
??
? ? ?// 創(chuàng)建溫度曲線圖1并設(shè)置屬性
? ? ?m_series1->setName(tr("Device 1"));
? ? ?m_series1->setColor(Qt::red);
? ? ?m_series1->setPen(QPen(Qt::red, 2));
? ? ?m_chart->addSeries(m_series1);
??
? ? ?// 創(chuàng)建溫度曲線圖2并設(shè)置屬性
? ? ?m_series2->setName(tr("Device 2"));
? ? ?m_series2->setColor(Qt::green);
? ? ?m_series2->setPen(QPen(Qt::green, 2));
? ? ?m_chart->addSeries(m_series2);
??
? ? ?// 創(chuàng)建溫度曲線圖3并設(shè)置屬性
? ? ?m_series3->setName(tr("Device 3"));
? ? ?m_series3->setColor(Qt::blue);
? ? ?m_series3->setPen(QPen(Qt::blue, 2));
? ? ?m_chart->addSeries(m_series3);
??
? ? ?// 設(shè)置橫軸屬性
? ? ?QValueAxis *axisX = new QValueAxis;
? ? ?axisX->setRange(0, 30);
? ? ?axisX->setTitleText("Time (s)");
? ? ?m_chart->addAxis(axisX, Qt::AlignBottom);
? ? ?m_series1->attachAxis(axisX);
? ? ?m_series2->attachAxis(axisX);
? ? ?m_series3->attachAxis(axisX);
??
? ? ?// 設(shè)置縱軸屬性
? ? ?QValueAxis *axisY = new QValueAxis;
? ? ?axisY->setRange(0, 60);
? ? ?axisY->setTitleText("Temperature (℃)");
? ? ?m_chart->addAxis(axisY, Qt::AlignLeft);
? ? ?m_series1->attachAxis(axisY);
? ? ?m_series2->attachAxis(axisY);
? ? ?m_series3->attachAxis(axisY);
??
? ? ?// 定時(shí)更新數(shù)據(jù)
? ? ?connect(m_timer, &QTimer::timeout, this, &MainWindow::updateChartData);
? ? ?m_timer->start(1000); // 每隔1秒鐘更新一次數(shù)據(jù)
??
? ? ?// 將圖表添加到ChartView中
? ? ?ui->chartView->setChart(m_chart);
? ? ?ui->chartView->setRenderHint(QPainter::Antialiasing);
?}
??
?MainWindow::~MainWindow()
?{
? ? ?delete ui;
?}
??
?void MainWindow::updateChartData()
?{
? ? ?// 更新時(shí)間計(jì)數(shù)
? ? ?m_timeCount++;
??
? ? ?// 在溫度曲線上增加一個(gè)點(diǎn)，模擬溫度數(shù)據(jù)變化
? ? ?QPointF p1(m_timeCount, qrand() % 10 + 20);
? ? ?QPointF p2(m_timeCount, qrand() % 10 + 30);
? ? ?QPointF p3(m_timeCount, qrand() % 10 + 40);
? ? ?m_series1->append(p1);
? ? ?m_series2->append(p2);
? ? ?m_series3->append(p3);
??
? ? ?// 清除多余的點(diǎn)，只保留最新的30個(gè)數(shù)據(jù)點(diǎn)
? ? ?if (m_series1->count() > 30) {
? ? ? ? ?m_series1->removePoints(0, 1);
? ?  }
? ? ?if (m_series2->count() > 30) {
? ? ? ? ?m_series2->removePoints(0, 1);
? ?  }
? ? ?if (m_series3->count() > 30) {
? ? ? ? ?m_series3->removePoints(0, 1);
? ?  }
?}

在此代碼中，定義了一個(gè)QTimer定時(shí)器對(duì)象，用于每隔一段時(shí)間更新溫度曲線數(shù)據(jù)。在定時(shí)器的timeout信號(hào)觸發(fā)時(shí)，調(diào)用updateChartData()槽函數(shù)來(lái)更新溫度曲線數(shù)據(jù)，同時(shí)控制數(shù)據(jù)量不超過(guò)30個(gè)點(diǎn)。

在updateChartData()函數(shù)中，使用了qrand()函數(shù)來(lái)生成隨機(jī)的溫度數(shù)據(jù)，模擬動(dòng)態(tài)變化的效果?？梢愿鶕?jù)實(shí)際情況修改此函數(shù)的實(shí)現(xiàn)方式。

最后，將圖表添加到QChartView控件中，并啟用抗鋸齒功能以提高顯示質(zhì)量。

2.設(shè)置曲線可見范圍

為了保證曲線顯示一直在可見范圍內(nèi)，可以添加如下代碼：

    ?// 使圖表自適應(yīng)大小，確保曲線始終可見
    ?m_chart->createDefaultAxes();
    ?m_chart->axisX()->setRange(0, 30);
    ?m_chart->axisY()->setRange(0, 60);

這段代碼的作用是讓圖表自適應(yīng)大小，并設(shè)置橫軸范圍為0到30，縱軸范圍為0到60。這樣當(dāng)新數(shù)據(jù)點(diǎn)增加到圖表之外時(shí)，圖表會(huì)自動(dòng)調(diào)整大小和范圍，以確保曲線始終可見。

完整的mainwindow.cpp代碼如下所示：

    ?#include "mainwindow.h"
    ?#include "ui_mainwindow.h"
    ??
    ?MainWindow::MainWindow(QWidget *parent) :
    ? ? ?QMainWindow(parent),
    ? ? ?ui(new Ui::MainWindow),
    ? ? ?m_timer(new QTimer(this)),
    ? ? ?m_chart(new QChart()),
    ? ? ?m_series1(new QLineSeries()),
    ? ? ?m_series2(new QLineSeries()),
    ? ? ?m_series3(new QLineSeries()),
    ? ? ?m_timeCount(0)
    ?{
    ? ? ?ui->setupUi(this);
    ??
    ? ? ?// 設(shè)置圖表標(biāo)題
    ? ? ?m_chart->setTitle("Temperature Data");
    ??
    ? ? ?// 創(chuàng)建溫度曲線圖1并設(shè)置屬性
    ? ? ?m_series1->setName(tr("Device 1"));
    ? ? ?m_series1->setColor(Qt::red);
    ? ? ?m_series1->setPen(QPen(Qt::red, 2));
    ? ? ?m_chart->addSeries(m_series1);
    ??
    ? ? ?// 創(chuàng)建溫度曲線圖2并設(shè)置屬性
    ? ? ?m_series2->setName(tr("Device 2"));
    ? ? ?m_series2->setColor(Qt::green);
    ? ? ?m_series2->setPen(QPen(Qt::green, 2));
    ? ? ?m_chart->addSeries(m_series2);
    ??
    ? ? ?// 創(chuàng)建溫度曲線圖3并設(shè)置屬性
    ? ? ?m_series3->setName(tr("Device 3"));
    ? ? ?m_series3->setColor(Qt::blue);
    ? ? ?m_series3->setPen(QPen(Qt::blue, 2));
    ? ? ?m_chart->addSeries(m_series3);
    ??
    ? ? ?// 設(shè)置橫軸屬性
    ? ? ?QValueAxis *axisX = new QValueAxis;
    ? ? ?axisX->setRange(0, 30);
    ? ? ?axisX->setTitleText("Time (s)");
    ? ? ?m_chart->addAxis(axisX, Qt::AlignBottom);
    ? ? ?m_series1->attachAxis(axisX);
    ? ? ?m_series2->attachAxis(axisX);
    ? ? ?m_series3->attachAxis(axisX);
    ??
    ? ? ?// 設(shè)置縱軸屬性
    ? ? ?QValueAxis *axisY = new QValueAxis;
    ? ? ?axisY->setRange(0, 60);
    ? ? ?axisY->setTitleText("Temperature (℃)");
    ? ? ?m_chart->addAxis(axisY, Qt::AlignLeft);
    ? ? ?m_series1->attachAxis(axisY);
    ? ? ?m_series2->attachAxis(axisY);
    ? ? ?m_series3->attachAxis(axisY);
    ??
    ? ? ?// 使圖表自適應(yīng)大小，確保曲線始終可見
    ? ? ?m_chart->createDefaultAxes();
    ? ? ?m_chart->axisX()->setRange(0, 30);
    ? ? ?m_chart->axisY()->setRange(0, 60);
    ??
    ? ? ?// 定時(shí)更新數(shù)據(jù)
    ? ? ?connect(m_timer, &QTimer::timeout, this, &MainWindow::updateChartData);
    ? ? ?m_timer->start(1000); // 每隔1秒鐘更新一次數(shù)據(jù)
    ??
    ? ? ?// 將圖表添加到ChartView中
    ? ? ?ui->chartView->setChart(m_chart);
    ? ? ?ui->chartView->setRenderHint(QPainter::Antialiasing);
    ?}
    ??
    ?MainWindow::~MainWindow()
    ?{
    ? ? ?delete ui;
    ?}
    ??
    ?void MainWindow::updateChartData()
    ?{
    ? ? ?// 更新時(shí)間計(jì)數(shù)
    ? ? ?m_timeCount++;
    ??
    ? ? ?// 在溫度曲線上增加一個(gè)點(diǎn)，模擬溫度數(shù)據(jù)變化
    ? ? ?QPointF p1(m_timeCount, qrand() % 10 + 20);
    ? ? ?QPointF p2(m_timeCount, qrand() % 10 + 30);
    ? ? ?QPointF p3(m_timeCount, qrand() % 10 + 40);
    ? ? ?m_series1->append(p1);
    ? ? ?m_series2->append(p2);
    ? ? ?m_series3->append(p3);
    ??
    ? ? ?// 清除多余的點(diǎn)，只保留最新的30個(gè)數(shù)據(jù)點(diǎn)
    ? ? ?if (m_series1->count() > 30) {
    ? ? ? ? ?m_series1->removePoints(0, 1);
    ? ?  }
    ? ? ?if (m_series2->count() > 30) {
    ? ? ? ? ?m_series2->removePoints(0, 1);
    ? ?  }
    ? ? ?if (m_series3->count() > 30) {
    ? ? ? ? ?m_series3->removePoints(0, 1);
    ? ?  }
    ?}

3.實(shí)現(xiàn)鼠標(biāo)交互拖動(dòng)

要實(shí)現(xiàn)折線圖的橫坐標(biāo)可以拖動(dòng)，可以設(shè)置QChartView的交互模式為拖拽，在構(gòu)造函數(shù)中添加如下代碼：

    ?// 設(shè)置 ChartView 交互模式為拖拽
    ?ui->chartView->setRubberBand(QChartView::HorizontalRubberBand);
    ?ui->chartView->setRenderHint(QPainter::Antialiasing);
    ?ui->chartView->setDragMode(QGraphicsView::ScrollHandDrag);

這樣用戶就可以通過(guò)鼠標(biāo)左鍵在橫軸上拖拽來(lái)改變曲線圖的可見范圍。同時(shí)，還需要在mainwindow.cpp中添加橫坐標(biāo)的范圍更新函數(shù)updateAxisRange()，用于在拖拽時(shí)更新橫坐標(biāo)的范圍。

完整的mainwindow.cpp代碼如下所示：

    ?#include "mainwindow.h"
    ?#include "ui_mainwindow.h"
    ??
    ?MainWindow::MainWindow(QWidget *parent) :
    ? ? ?QMainWindow(parent),
    ? ? ?ui(new Ui::MainWindow),
    ? ? ?m_timer(new QTimer(this)),
    ? ? ?m_chart(new QChart()),
    ? ? ?m_series1(new QLineSeries()),
    ? ? ?m_series2(new QLineSeries()),
    ? ? ?m_series3(new QLineSeries()),
    ? ? ?m_timeCount(0)
    ?{
    ? ? ?ui->setupUi(this);
    ??
    ? ? ?// 設(shè)置圖表標(biāo)題
    ? ? ?m_chart->setTitle("Temperature Data");
    ??
    ? ? ?// 創(chuàng)建溫度曲線圖1并設(shè)置屬性
    ? ? ?m_series1->setName(tr("Device 1"));
    ? ? ?m_series1->setColor(Qt::red);
    ? ? ?m_series1->setPen(QPen(Qt::red, 2));
    ? ? ?m_chart->addSeries(m_series1);
    ??
    ? ? ?// 創(chuàng)建溫度曲線圖2并設(shè)置屬性
    ? ? ?m_series2->setName(tr("Device 2"));
    ? ? ?m_series2->setColor(Qt::green);
    ? ? ?m_series2->setPen(QPen(Qt::green, 2));
    ? ? ?m_chart->addSeries(m_series2);
    ??
    ? ? ?// 創(chuàng)建溫度曲線圖3并設(shè)置屬性
    ? ? ?m_series3->setName(tr("Device 3"));
    ? ? ?m_series3->setColor(Qt::blue);
    ? ? ?m_series3->setPen(QPen(Qt::blue, 2));
    ? ? ?m_chart->addSeries(m_series3);
    ??
    ? ? ?// 設(shè)置橫軸屬性
    ? ? ?QValueAxis *axisX = new QValueAxis;
    ? ? ?axisX->setRange(0, 30);
    ? ? ?axisX->setTitleText("Time (s)");
    ? ? ?m_chart->addAxis(axisX, Qt::AlignBottom);
    ? ? ?m_series1->attachAxis(axisX);
    ? ? ?m_series2->attachAxis(axisX);
    ? ? ?m_series3->attachAxis(axisX);
    ??
    ? ? ?// 設(shè)置縱軸屬性
    ? ? ?QValueAxis *axisY = new QValueAxis;
    ? ? ?axisY->setRange(0, 60);
    ? ? ?axisY->setTitleText("Temperature (℃)");
    ? ? ?m_chart->addAxis(axisY, Qt::AlignLeft);
    ? ? ?m_series1->attachAxis(axisY);
    ? ? ?m_series2->attachAxis(axisY);
    ? ? ?m_series3->attachAxis(axisY);
    ??
    ? ? ?// 使圖表自適應(yīng)大小，確保曲線始終可見
    ? ? ?m_chart->createDefaultAxes();
    ? ? ?m_chart->axisX()->setRange(0, 30);
    ? ? ?m_chart->axisY()->setRange(0, 60);
    ??
    ? ? ?// 設(shè)置 ChartView 交互模式為拖拽
    ? ? ?ui->chartView->setRubberBand(QChartView::HorizontalRubberBand);
    ? ? ?ui->chartView->setRenderHint(QPainter::Antialiasing);
    ? ? ?ui->chartView->setDragMode(QGraphicsView::ScrollHandDrag);
    ??
    ? ? ?// 定時(shí)更新數(shù)據(jù)
    ? ? ?connect(m_timer, &QTimer::timeout, this, &MainWindow::updateChartData);
    ? ? ?m_timer->start(1000); // 每隔1秒鐘更新一次數(shù)據(jù)
    ??
    ? ? ?// 將圖表添加到ChartView中
    ? ? ?ui->chartView->setChart(m_chart);
    ?}
    ??
    ?MainWindow::~MainWindow()
    ?{
    ? ? ?delete ui;
    ?}
    ??
    ?void MainWindow::updateChartData()
    ?{
    ? ? ?// 更新時(shí)間計(jì)數(shù)
    ? ? ?m_timeCount++;
    ??
    ? ? ?// 在溫度曲線上增加一個(gè)點(diǎn)，模擬溫度數(shù)據(jù)變化
    ? ? ?QPointF p1(m_timeCount, qrand() % 10 + 20);
    ? ? ?QPointF p2(m_timeCount, qrand() % 10 + 30);
    ? ? ?QPointF p3(m_timeCount, qrand() % 10 + 40);
    ? ? ?m_series1->append(p1);
    ? ? ?m_series2->append(p2);
    ? ? ?m_series3->append(p3);
    ??
    ? ? ?// 清除多余的點(diǎn)，只保留最新的30個(gè)數(shù)據(jù)點(diǎn)
    ? ? ?if (m_series1->count() > 30) {
    ? ? ? ? ?m_series1->removePoints(0, 1);
    ? ?  }
    ? ? ?if (m_series2->count() > 30) {
    ? ? ? ? ?m_series2->removePoints(0, 1);
    ? ?  }
    ? ? ?if (m_series3->count() > 30) {
    ? ? ? ? ?m_series3->removePoints(0, 1);
    ? ?  }
    ??
    ? ? ?// 更新橫軸范圍
    ? ? ?updateAxisRange();
    ?}
    ??
    ?void MainWindow::updateAxisRange()
    ?{
    ? ? ?// 獲取橫軸范圍
    ? ? ?qreal minX = std::numeric_limits<qreal>::max();
    ? ? ?qreal maxX = std::numeric_limits<qreal>::min();
    ? ? ?foreach (QAbstractSeries *series, m_chart->series()) {
    ? ? ? ? ?QXYSeries *xySeries = static_cast<QXYSeries*>(series);
    ? ? ? ? ?QPointF p1 = xySeries->at(0);
    ? ? ? ? ?QPointF p2 = xySeries->at(xySeries->count() - 1);
    ??
    ? ? ? ? ?if (p1.x() < minX) {
    ? ? ? ? ? ? ?minX = p1.x();
    ? ? ? ?  }
    ? ? ? ? ?if (p2.x() > maxX) {
    ? ? ? ? ? ? ?maxX = p2.x();
    ? ? ? ?  }
    ? ?  }
    ??
    ? ? ?// 更新橫軸范圍
    ? ? ?m_chart->axisX()->setRange(minX, maxX);
    ?}

為了更新橫坐標(biāo)的范圍，需要在MainWindow中添加了一個(gè)新函數(shù)updateAxisRange()。該函數(shù)會(huì)在數(shù)據(jù)更新時(shí)被調(diào)用來(lái)計(jì)算最新的橫軸范圍，以更新折線圖的顯示。

三、實(shí)現(xiàn)代碼（2）QWidget

當(dāng)前這份完整代碼實(shí)現(xiàn)了一個(gè)動(dòng)態(tài)折線圖的繪制，是一個(gè)典型的Qt Charts應(yīng)用程序。通過(guò)使用QLineSeries類、QValueAxis類和QChart類來(lái)創(chuàng)建并顯示溫度隨時(shí)間變化的折線圖。

第一步：先創(chuàng)建了主窗口，其中包含一個(gè)QChartView控件，用于顯示溫度曲線圖。在構(gòu)造函數(shù)中，設(shè)置了一些基本屬性，比如標(biāo)題、橫縱坐標(biāo)的范圍和名稱等，并為每個(gè)設(shè)備創(chuàng)建了一個(gè)QLineSeries對(duì)象，用于存儲(chǔ)溫度數(shù)據(jù)。

第二步：將這些QLineSeries對(duì)象添加到QChart對(duì)象中。接著，將QValueAxis對(duì)象添加到QChart中，設(shè)置其范圍和名稱，并將QLineSeries對(duì)象與其關(guān)聯(lián)。最后，將QChart對(duì)象添加到QChartView中，以便在界面上顯示折線圖。

第三步：在updateChartData()函數(shù)中，定時(shí)器每隔1秒鐘觸發(fā)一次，用于更新溫度數(shù)據(jù)，并通過(guò)調(diào)用QLineSeries類的append()函數(shù)向QLineSeries對(duì)象中添加新的溫度數(shù)據(jù)點(diǎn)。同時(shí)，使用removePoints()函數(shù)刪除舊的數(shù)據(jù)點(diǎn)，以保持折線圖中顯示的數(shù)據(jù)點(diǎn)不超過(guò)30個(gè)。在添加或刪除數(shù)據(jù)時(shí)，使用updateAxisRange()函數(shù)更新橫坐標(biāo)的范圍，以便將折線圖自適應(yīng)地縮放到當(dāng)前數(shù)據(jù)范圍內(nèi)。

第四步：重載了updateAxisRange()函數(shù)，根據(jù)QLineSeries對(duì)象的數(shù)據(jù)點(diǎn)計(jì)算出橫坐標(biāo)的最小值和最大值，并通過(guò)調(diào)用QChart類的axisX()->setRange()函數(shù)更新QValueAxis對(duì)象的范圍。

1.widget.cpp代碼

    ?#include "widget.h"
    ?#include "ui_widget.h"
    ??
    ?Widget::Widget(QWidget *parent)
    ? ?  : QWidget(parent)
    ? ?  , ui(new Ui::Widget)
    ?{
    ? ? ?ui->setupUi(this);
    ??
    ? ? ?this->setWindowTitle("溫度數(shù)據(jù)可視化采集系統(tǒng)");
    ??
    ? ? ?m_timer=new QTimer(this);
    ? ? ?m_chart=new QChart();
    ??
    ? ? ?m_series1=new QLineSeries();
    ? ? ?m_series2=new QLineSeries();
    ? ? ?m_series3=new QLineSeries();
    ??
    ? ? ?m_timeCount=0;
    ??
    ? ? ?// 創(chuàng)建溫度曲線圖1并設(shè)置屬性
    ? ? ?m_series1->setName(tr("設(shè)備1"));
    ?// ?  m_series1->setColor(Qt::red);
    ?// ?  m_series1->setPen(QPen(Qt::red, 2));
    ? ? ?m_chart->addSeries(m_series1);
    ??
    ? ? ?// 創(chuàng)建溫度曲線圖2并設(shè)置屬性
    ? ? ?m_series2->setName(tr("設(shè)備2"));
    ?// ?  m_series2->setColor(Qt::green);
    ?// ?  m_series2->setPen(QPen(Qt::green, 2));
    ? ? ?m_chart->addSeries(m_series2);
    ??
    ? ? ?// 創(chuàng)建溫度曲線圖3并設(shè)置屬性
    ? ? ?m_series3->setName(tr("設(shè)備3"));
    ?// ?  m_series3->setColor(Qt::blue);
    ?// ?  m_series3->setPen(QPen(Qt::blue, 2));
    ? ? ?m_chart->addSeries(m_series3);
    ??
    ? ? ?// 設(shè)置橫軸屬性
    ? ? ?QValueAxis *axisX = new QValueAxis;
    ? ? ?axisX->setRange(0, 30);
    ? ? ?axisX->setTitleText("時(shí)間 (s)");
    ? ? ?m_chart->addAxis(axisX, Qt::AlignBottom);
    ? ? ?m_series1->attachAxis(axisX);
    ? ? ?m_series2->attachAxis(axisX);
    ? ? ?m_series3->attachAxis(axisX);
    ??
    ? ? ?// 設(shè)置縱軸屬性
    ? ? ?QValueAxis *axisY = new QValueAxis;
    ? ? ?axisY->setRange(0, 60);
    ? ? ?axisY->setTitleText("溫度 (℃)");
    ? ? ?m_chart->addAxis(axisY, Qt::AlignLeft);
    ? ? ?m_series1->attachAxis(axisY);
    ? ? ?m_series2->attachAxis(axisY);
    ? ? ?m_series3->attachAxis(axisY);
    ??
    ? ? ?// 使圖表自適應(yīng)大小，確保曲線始終可見
    ? ? ? ?m_chart->createDefaultAxes();
    ? ? ? ?m_chart->axisX()->setRange(0, 30);
    ? ? ? ?m_chart->axisY()->setRange(0, 60);
    ??
    ??
    ? ? ?// 定時(shí)更新數(shù)據(jù)
    ? ? ?connect(m_timer, &QTimer::timeout, this, &Widget::updateChartData);
    ??
    ? ? ?// 將圖表添加到ChartView中
    ? ? ?QChartView* chartView = new QChartView(m_chart);
    ??
    ? ? ?// 設(shè)置 ChartView 交互模式為拖拽
    ? ? ?chartView->setRubberBand(QChartView::HorizontalRubberBand);
    ? ? ?chartView->setRenderHint(QPainter::Antialiasing);
    ? ? ?chartView->setDragMode(QGraphicsView::ScrollHandDrag);
    ??
    ? ? ?chartView->setRenderHint(QPainter::Antialiasing);
    ??
    ? ? ?//將視圖添加到布局
    ? ? ?ui->view_verticalLayout->addWidget(chartView);
    ?}
    ??
    ??
    ??
    ?Widget::~Widget()
    ?{
    ? ? ?delete ui;
    ?}
    ??
    ??
    ?void Widget::updateChartData()
    ?{
    ? ? ?// 更新時(shí)間計(jì)數(shù)
    ? ? ?m_timeCount++;
    ??
    ? ? ?// 在溫度曲線上增加一個(gè)點(diǎn)，模擬溫度數(shù)據(jù)變化
    ? ? ?QPointF p1(m_timeCount, qrand() % 10 + 20);
    ? ? ?QPointF p2(m_timeCount, qrand() % 10 + 30);
    ? ? ?QPointF p3(m_timeCount, qrand() % 10 + 40);
    ? ? ?m_series1->append(p1);
    ? ? ?m_series2->append(p2);
    ? ? ?m_series3->append(p3);
    ??
    ? ? ?// 清除多余的點(diǎn)，只保留最新的30個(gè)數(shù)據(jù)點(diǎn)
    ? ? ?if (m_series1->count() > 30) {
    ? ? ? ? ?m_series1->removePoints(0, 1);
    ? ?  }
    ? ? ?if (m_series2->count() > 30) {
    ? ? ? ? ?m_series2->removePoints(0, 1);
    ? ?  }
    ? ? ?if (m_series3->count() > 30) {
    ? ? ? ? ?m_series3->removePoints(0, 1);
    ? ?  }
    ??
    ? ? ?// 更新橫軸范圍
    ? ? ?updateAxisRange();
    ?}
    ??
    ??
    ?void Widget::updateAxisRange()
    ?{
    ? ? ?// 獲取橫軸范圍
    ? ? ?qreal minX = std::numeric_limits<qreal>::max();
    ? ? ?qreal maxX = std::numeric_limits<qreal>::min();
    ? ? ?foreach (QAbstractSeries *series, m_chart->series()) {
    ? ? ? ? ?QXYSeries *xySeries = static_cast<QXYSeries*>(series);
    ? ? ? ? ?QPointF p1 = xySeries->at(0);
    ? ? ? ? ?QPointF p2 = xySeries->at(xySeries->count() - 1);
    ??
    ? ? ? ? ?if (p1.x() < minX) {
    ? ? ? ? ? ? ?minX = p1.x();
    ? ? ? ?  }
    ? ? ? ? ?if (p2.x() > maxX) {
    ? ? ? ? ? ? ?maxX = p2.x();
    ? ? ? ?  }
    ? ?  }
    ??
    ? ? ?// 更新橫軸范圍
    ? ? ?m_chart->axisX()->setRange(minX, maxX);
    ?}
    ??
    ??
    ??
    ?//開始采集
    ?void Widget::on_pushButton_start_clicked()
    ?{
    ? ? ?m_timer->start(1000); // 每隔1秒鐘更新一次數(shù)據(jù)
    ?}
    ??
    ??
    ?//停止采集
    ?void Widget::on_pushButton_stop_clicked()
    ?{
    ? ? ?m_timer->stop(); //停止定時(shí)器
    ?}

2.widget.h代碼

    ?#ifndef WIDGET_H
    ?#define WIDGET_H
    ??
    ?#include <QWidget>
    ??
    ?// 包含line chart需要的頭文件
    ?#include <QtCharts/QChart>
    ?#include <QtCharts/QLineSeries>
    ?#include <QtCharts/QChartView>
    ?#include <QtCore/QRandomGenerator>
    ?#include <QValueAxis>
    ?#include <QScatterSeries>
    ?#include <QTimer>
    ??
    ?// 引用命名空間
    ?QT_CHARTS_USE_NAMESPACE
    ??
    ?QT_BEGIN_NAMESPACE
    ?namespace Ui { class Widget; }
    ?QT_END_NAMESPACE
    ??
    ?class Widget : public QWidget
    ?{
    ? ? ?Q_OBJECT
    ??
    ?public:
    ? ? ?Widget(QWidget *parent = nullptr);
    ? ? ?~Widget();
    ?private slots:
    ? ? ?void updateChartData(); // 更新數(shù)據(jù)槽函數(shù)
    ? ? ?void updateAxisRange();
    ??
    ? ? ?void on_pushButton_start_clicked();
    ??
    ? ? ?void on_pushButton_stop_clicked();
    ??
    ?private:
    ? ? ?Ui::Widget *ui;
    ??
    ? ? ?QTimer *m_timer; // 定時(shí)器
    ??
    ? ? ?QChart *m_chart; // 圖表指針
    ??
    ? ? ?QLineSeries *m_series1; // 設(shè)備1溫度曲線
    ? ? ?QLineSeries *m_series2; // 設(shè)備2溫度曲線
    ? ? ?QLineSeries *m_series3; // 設(shè)備3溫度曲線
    ??
    ? ? ?int m_timeCount; // 時(shí)間計(jì)數(shù)
    ?};
    ?#endif // WIDGET_H

3.UI文件代碼

    <?xml version="1.0" encoding="UTF-8"?>
    <ui version="4.0">
     <class>Widget</class>
     <widget class="QWidget" name="Widget">
      <property name="geometry">
       <rect>
        <x>0</x>
        <y>0</y>
        <width>600</width>
        <height>444</height>
       </rect>
      </property>
      <property name="windowTitle">
       <string>Widget</string>
      </property>
      <layout class="QVBoxLayout" name="verticalLayout">
       <item>
        <widget class="QWidget" name="widget" native="true">
         <property name="minimumSize">
          <size>
           <width>100</width>
           <height>100</height>
          </size>
         </property>
         <layout class="QVBoxLayout" name="verticalLayout_2">
          <property name="spacing">
           <number>0</number>
          </property>
          <property name="leftMargin">
           <number>0</number>
          </property>
          <property name="topMargin">
           <number>0</number>
          </property>
          <property name="rightMargin">
           <number>0</number>
          </property>
          <property name="bottomMargin">
           <number>0</number>
          </property>
          <item>
           <layout class="QVBoxLayout" name="view_verticalLayout"/>
          </item>
         </layout>
        </widget>
       </item>
       <item>
        <widget class="QWidget" name="widget_2" native="true">
         <property name="maximumSize">
          <size>
           <width>16777215</width>
           <height>40</height>
          </size>
         </property>
         <layout class="QHBoxLayout" name="horizontalLayout">
          <property name="spacing">
           <number>0</number>
          </property>
          <property name="leftMargin">
           <number>0</number>
          </property>
          <property name="topMargin">
           <number>0</number>
          </property>
          <property name="rightMargin">
           <number>0</number>
          </property>
          <property name="bottomMargin">
           <number>0</number>
          </property>
          <item>
           <widget class="QPushButton" name="pushButton_start">
            <property name="text">
             <string>開始采集</string>
            </property>
           </widget>
          </item>
          <item>
           <widget class="QPushButton" name="pushButton_stop">
            <property name="text">
             <string>停止采集</string>
            </property>
           </widget>
          </item>
         </layout>
        </widget>
       </item>
      </layout>
     </widget>
     <resources/>
     <connections/>
    </ui>

4.pro工程文件

    QT       += core gui
    QT       += 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 \
        widget.cpp
    HEADERS += \
        widget.h
    FORMS += \
        widget.ui
    # Default rules for deployment.
    qnx: target.path = /tmp/$${TARGET}/bin
    else: unix:!android: target.path = /opt/$${TARGET}/bin
    !isEmpty(target.path): INSTALLS += target

以上就是Qt使用QChart實(shí)現(xiàn)動(dòng)態(tài)顯示溫度變化曲線的詳細(xì)內(nèi)容，更多關(guān)于Qt QChart的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: