項目需求: 溫度隨時間流逝折線圖;

組件: QCharts + 定時器;

重點: QDateTimeAxis Api的應用;常規坐標QValueAxis，這里使用QDateTimeAxis時間軸；

要求:

X 軸為時間，隨著時間前進，X軸坐標會相應的變化；

Y軸為溫度取值范圍(每次取最大值和最小值,這里有個小算法，暫不介紹);

開發工具: Qt Create ，語言C++

Qt版本5.15.2，編譯器 msvc2019_32位，組件QCharts(這個需要提前安裝，暫不做過多介紹)；

項目效果圖:

這里圖片圖片最大上傳300貞；

圖像可以根據實際數據修改:

代碼實現:

pro 文件要加:

QT += charts // 需要重新編譯

MainWindow.h 文件如下:

#ifndef MAINWINDOW_H #define MAINWINDOW_H#include <QMainWindow> #include <QScatterSeries>#include <QDateTimeAxis> #include <QMainWindow> #include <QPaintEvent> #include <QPushButton> #include <QtCharts/QValueAxis> #include <QtCharts/QChartView> #include <QtCharts/QLineSeries>QT_BEGIN_NAMESPACE namespace Ui { class MainWindow; } QT_END_NAMESPACEQT_CHARTS_USE_NAMESPACEclass MainWindow : public QMainWindow {Q_OBJECTpublic:MainWindow(QWidget *parent = nullptr);~MainWindow();private slots:void on_pBn_Start_clicked();void on_pBn_Stop_clicked();void slotTimeout(); private:Ui::MainWindow *ui;QDateTimeAxis* daxisX; // X時間軸QValueAxis* daxisY; // 假設 0-10,這里根據 需求 自己選擇量程QLineSeries* dseries;QChart* dchart;QChartView* dchartView;QTimer *timer;QScatterSeries* scatterSeries;bool flag = true;}; #endif // MAINWINDOW_H

重點: 一定要加 QT_CHARTS_USE_NAMESPACE 命名空間， 不然將下面的命名空間補全;

#include "mainwindow.h" #include "ui_mainwindow.h"#include <QDateTime> #include <QTimer>// 防止中文亂碼 #if _MSC_VER >= 1600 #pragma execution_character_set("utf-8") #endifMainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow) {ui->setupUi(this);// 設置X軸坐標daxisX = new QDateTimeAxis;daxisX->setTitleText("Time");daxisX->setTickCount(5); // 設置軸坐標網格數daxisX->setFormat("h:mm:ss"); // 顯示時間格式QDateTime xMin,xMax; // 設置時間坐標軸范圍xMin = QDateTime::currentDateTime();xMax = xMin.addSecs(10);daxisX->setRange(xMin,xMax); // X軸 位 當前 時間// 設置Y軸坐標daxisY = new QValueAxis;daxisY->setTitleText("Temperature(°C)");daxisY->setRange(0, 10);daxisY->setTickCount(5); // 設置軸坐標網格數daxisY->setLabelFormat("%d"); // 格式化為整形QPen dpen;dpen.setWidth(3);dpen.setColor(Qt::red);dseries = new QLineSeries;dseries->setName("溫度折線圖"); // 設置圖例名字//dseries->setPen(pen); // 這里 可以 自定義 折線的顏色scatterSeries = new QScatterSeries();scatterSeries->setMarkerSize(8);dchart = new QChart;dchart->addSeries(dseries);dchart->addSeries(scatterSeries);dchart->setTitle("坐標圖");dchart->setAxisX(daxisX,dseries);dchart->setAxisY(daxisY,dseries);dchart->setAxisX(daxisX,scatterSeries); // 折線轉點dchart->setAxisY(daxisY,scatterSeries);//dchart->legend()->hide(); // 隱藏圖例dchartView = new QChartView(dchart,this);dchartView->setRenderHint(QPainter::Antialiasing);dchartView->resize(800,300);dchartView->move(20,20);timer = new QTimer(this);timer->setInterval(1000);connect(timer, &QTimer::timeout, this, &MainWindow::slotTimeout);}void MainWindow::slotTimeout() {QDateTime Min,Max; // 設置時間坐標軸范圍int random = qrand()%10;if(flag) // 確保第一次從原點開始{flag=false;Min = QDateTime::currentDateTime();Max = Min.addSecs(10);daxisX->setRange(Min,Max); // X軸 位 當前 時間dseries->append(Min.toMSecsSinceEpoch(),random);scatterSeries->append(Min.toMSecsSinceEpoch(),random);}QDateTime t(QDateTime::currentDateTime());dseries->append(t.toMSecsSinceEpoch(),random);scatterSeries->append(t.toMSecsSinceEpoch(),random);QDateTime xMax;// 設置時間坐標軸范圍xMax = QDateTime::currentDateTime();if(xMax > daxisX->max()){QDateTime xMin;xMin = xMax.addSecs(qint64(-10));daxisX->setRange(xMin,xMax);}}MainWindow::~MainWindow() {delete ui; }void MainWindow::on_pBn_Start_clicked() {if (!timer->isActive()){timer->start();} }void MainWindow::on_pBn_Stop_clicked() {timer->stop(); }

總結: 主要核心思想，每隔一秒 判斷當前時間是否大于X軸時間的最大值，如果大于則改變量程（當前時間作為X軸的最大值，最小值為當前時間減去10秒），繼續繪圖；

由于csdn收費,代碼地址放到gitee上了:https://gitee.com/ss103838/pro_-line_-demo.git

如何更優雅的使用輪子；

總結

以上是生活随笔為你收集整理的QCharts随时间流逝的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。