Qt使用QChart實現(xiàn)靜態(tài)顯示溫度變化曲線

更新時間：2023年06月02日 14:45:42 作者：DS小龍哥

QChart模塊是Qt?Charts庫的基礎，提供了用于創(chuàng)建和顯示各種類型圖表的類和接口，本文主要介紹了如何使用QChart實現(xiàn)動態(tài)顯示3個設備的溫度變化曲線，感興趣的可以了解一下

一、QChart介紹

QChart模塊是Qt Charts庫的基礎，提供了用于創(chuàng)建和顯示各種類型圖表的類和接口。Qt Charts庫是一個功能豐富、易于使用的數(shù)據(jù)可視化工具庫，可以幫助開發(fā)者在應用程序中添加漂亮而又交互性強的圖表。

QChart模塊主要包括以下類：

QChart：表示一個基本的圖表容器，它可以包含一個或多個QAbstractSeries對象。開發(fā)者可以設置圖表的標題、動畫效果、背景、邊框以及坐標軸等屬性，并添加或移除序列數(shù)據(jù)。
QAbstractSeries：表示一個序列數(shù)據(jù)，它是QLineSeries、QScatterSeries等具體序列類型的基類，開發(fā)者可以通過繼承該類來創(chuàng)建自定義序列類型。
QLineSeries：表示一條折線序列，它可以用于繪制單一或多條折線曲線圖。
QScatterSeries：表示一個散點圖序列，它可以用于繪制數(shù)據(jù)點之間的離散分布情況。
QBarSeries：表示一個條形圖序列，它可以用于展示分類數(shù)據(jù)在不同類別中的分布情況。
QPercentBarSeries：表示一個百分比條形圖序列，它可以用于展示分類數(shù)據(jù)在不同類別中的占比情況。
QPieSeries：表示一個餅圖序列，它可以用于展示不同數(shù)據(jù)之間的占比關系。
QChartView：表示QChart對象的視圖類，開發(fā)者可以將QChart對象設置為QChartView的子對象，并添加到窗口中以便顯示。

通過使用QChart模塊，開發(fā)者可以輕松地創(chuàng)建并自定義各種類型的圖表，例如折線曲線圖、散點圖、條形圖、餅圖等，并以交互性強的方式來展示數(shù)據(jù)，為應用程序增加了更多的可視化效果。

下面是通過折線圖顯示3個設備的溫度變化趨勢效果:

二、實現(xiàn)代碼(1)

以下是使用QChart顯示3個折線圖，表示3個設備的溫度曲線的實現(xiàn)代碼：（溫度數(shù)據(jù)是模擬的數(shù)據(jù)）

?#include <QtWidgets/QMainWindow>
?#include <QtCharts/QChart>
?#include <QtCharts/QLineSeries>
?#include <QtCharts/QChartView>
?#include <QtCore/QRandomGenerator>
?#include <QtCore/QDebug>
?#include <QtGui/QWindow>
??
?QT_CHARTS_USE_NAMESPACE
??
?class MainWindow : public QMainWindow
?{
? ? ?Q_OBJECT
??
?public:
? ? ?MainWindow(QWidget *parent = nullptr)
? ? ? ?  : QMainWindow(parent)
? ?  {
? ? ? ? ?// 數(shù)據(jù)初始化
? ? ? ? ?for (int i = 0; i < 30; i++) {
? ? ? ? ? ? ?m_data[0].append(QPointF(i, QRandomGenerator::global()->bounded(10, 30)));
? ? ? ? ? ? ?m_data[1].append(QPointF(i, QRandomGenerator::global()->bounded(20, 40)));
? ? ? ? ? ? ?m_data[2].append(QPointF(i, QRandomGenerator::global()->bounded(30, 50)));
? ? ? ?  }
??
? ? ? ? ?// 創(chuàng)建線性圖對象
? ? ? ? ?QChart* chart = new QChart();
? ? ? ? ?chart->setTitle("Temperature Data");
? ? ? ? ?chart->setAnimationOptions(QChart::SeriesAnimations);
??
? ? ? ? ?// 創(chuàng)建線序列對象
? ? ? ? ?QLineSeries* series1 = new QLineSeries(chart);
? ? ? ? ?QLineSeries* series2 = new QLineSeries(chart);
? ? ? ? ?QLineSeries* series3 = new QLineSeries(chart);
??
? ? ? ? ?// 設置線顏色、名字和寬度
? ? ? ? ?series1->setColor(Qt::red);
? ? ? ? ?series1->setName("Device1");
? ? ? ? ?series1->setPen(QPen(Qt::red, 2));
??
? ? ? ? ?series2->setColor(Qt::green);
? ? ? ? ?series2->setName("Device2");
? ? ? ? ?series2->setPen(QPen(Qt::green, 2));
??
? ? ? ? ?series3->setColor(Qt::blue);
? ? ? ? ?series3->setName("Device3");
? ? ? ? ?series3->setPen(QPen(Qt::blue, 2));
??
? ? ? ? ?// 添加數(shù)據(jù)到線序列對象
? ? ? ? ?for (const QPointF& point : m_data[0]) {
? ? ? ? ? ? ?*series1 << point;
? ? ? ?  }
? ? ? ? ?for (const QPointF& point : m_data[1]) {
? ? ? ? ? ? ?*series2 << point;
? ? ? ?  }
? ? ? ? ?for (const QPointF& point : m_data[2]) {
? ? ? ? ? ? ?*series3 << point;
? ? ? ?  }
??
? ? ? ? ?// 添加線序列對象到圖表
? ? ? ? ?chart->addSeries(series1);
? ? ? ? ?chart->addSeries(series2);
? ? ? ? ?chart->addSeries(series3);
??
? ? ? ? ?// 設置橫軸和縱軸標簽
? ? ? ? ?QValueAxis* axisX = new QValueAxis();
? ? ? ? ?axisX->setTitleText("Time (s)");
? ? ? ? ?axisX->setRange(0, 29);
??
? ? ? ? ?QValueAxis* axisY = new QValueAxis();
? ? ? ? ?axisY->setTitleText("Temperature (℃)");
? ? ? ? ?axisY->setRange(0, 60);
??
? ? ? ? ?// 添加橫軸和縱軸到圖表
? ? ? ? ?chart->setAxisX(axisX);
? ? ? ? ?chart->setAxisY(axisY);
??
? ? ? ? ?// 創(chuàng)建圖表視圖
? ? ? ? ?QChartView* chartView = new QChartView(chart);
? ? ? ? ?chartView->setRenderHint(QPainter::Antialiasing);
? ? ? ? ?setCentralWidget(chartView);
? ?  }
??
?private:
? ? ?// 存儲溫度數(shù)據(jù)的二維數(shù)組
? ? ?QVector<QPointF> m_data[3];
?};
??
?int main(int argc, char *argv[])
?{
? ? ?QApplication a(argc, argv);
? ? ?MainWindow w;
? ? ?w.show();
? ? ?return a.exec();
?}

以上是一個完整的Qt窗口程序，可以直接運行并顯示3個設備的溫度曲線。

在程序中，使用QChart對象作為圖表容器，創(chuàng)建了3個QLineSeries對象用于展示3個設備的溫度數(shù)據(jù)，并將它們添加到QChart對象中。自定義了橫軸和縱軸標簽及范圍，并將它們添加到QChart對象中。最后，創(chuàng)建了一個QChartView對象，并將QChart對象設置為其子對象，以展示整個溫度曲線圖表。

三、實現(xiàn)代碼(2)

如果自己需要設計UI界面，添加QChart顯示折線圖。下面演示一下過程。

1.添加模塊

2.設計UI

3.設計代碼-頭文件

?#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>
??
?// 引用命名空間
?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:
? ? ?Ui::Widget *ui;
??
? ? ? QChart *chart;
? ? ? QChartView *chartView;
?};
?#endif // WIDGET_H

4.設計代碼-源文件

?#include "widget.h"
?#include "ui_widget.h"
??
?Widget::Widget(QWidget *parent)
? ?  : QWidget(parent)
? ?  , ui(new Ui::Widget)
?{
? ? ?ui->setupUi(this);
??
? ? ?// 存儲溫度數(shù)據(jù)的二維數(shù)組
? ? ?QVector<QPointF> m_data[3];
??
? ? ?// 數(shù)據(jù)初始化
? ? ?for (int i = 0; i < 30; i++) {
? ? ? ? ?m_data[0].append(QPointF(i, QRandomGenerator::global()->bounded(10, 30)));
? ? ? ? ?m_data[1].append(QPointF(i, QRandomGenerator::global()->bounded(20, 40)));
? ? ? ? ?m_data[2].append(QPointF(i, QRandomGenerator::global()->bounded(30, 50)));
? ?  }
??
? ? ?// 創(chuàng)建線性圖對象
? ? ?QChart* chart = new QChart();
? ? ?chart->setTitle("Temperature Data");
? ? ?chart->setAnimationOptions(QChart::SeriesAnimations);
??
? ? ?// 創(chuàng)建線序列對象
? ? ?QLineSeries* series1 = new QLineSeries(chart);
? ? ?QLineSeries* series2 = new QLineSeries(chart);
? ? ?QLineSeries* series3 = new QLineSeries(chart);
??
? ? ?// 設置線顏色、名字和寬度
?// ?  series1->setColor(Qt::red);
? ? ?series1->setName("Device1");
?// ?  series1->setPen(QPen(Qt::red, 2));
??
?// ?  series2->setColor(Qt::green);
? ? ?series2->setName("Device2");
?// ?  series2->setPen(QPen(Qt::green, 2));
??
?// ?  series3->setColor(Qt::blue);
? ? ?series3->setName("Device3");
?// ?  series3->setPen(QPen(Qt::blue, 2));
??
??
? ? ?// 添加數(shù)據(jù)到線序列對象
? ? ?for (const QPointF& point : m_data[0]) {
? ? ? ? ?*series1 << point;
? ?  }
? ? ?for (const QPointF& point : m_data[1]) {
? ? ? ? ?*series2 << point;
? ?  }
? ? ?for (const QPointF& point : m_data[2]) {
? ? ? ? ?*series3 << point;
? ?  }
??
? ? ?// 添加線序列對象到圖表
? ? ?chart->addSeries(series1);
? ? ?chart->addSeries(series2);
? ? ?chart->addSeries(series3);
??
? ? ?// 設置橫軸和縱軸標簽
? ? ?QValueAxis* axisX = new QValueAxis();
? ? ?axisX->setTitleText("Time (s)");
? ? ?axisX->setRange(0, 29);
??
? ? ?QValueAxis* axisY = new QValueAxis();
? ? ?axisY->setTitleText("Temperature (℃)");
? ? ?axisY->setRange(0, 60);
??
? ? ?// 添加橫軸和縱軸到圖表
? ? ?chart->setAxisX(axisX);
? ? ?chart->setAxisY(axisY);
??
? ? ?// 創(chuàng)建圖表視圖
? ? ?QChartView* chartView = new QChartView(chart);
? ? ?chartView->setRenderHint(QPainter::Antialiasing);
??
??
? ? ?//將視圖添加到布局
? ? ?ui->view_verticalLayout->addWidget(chartView);
?}
??
??
??
?Widget::~Widget()
?{
? ? ?delete ui;
?}

到此這篇關于Qt使用QChart實現(xiàn)靜態(tài)顯示溫度變化曲線的文章就介紹到這了,更多相關Qt QChart內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: