一、QChart介紹

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

QChart模塊主要包括以下類(lèi)：

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

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

下面是通過(guò)折線圖顯示3個(gè)設(shè)備的溫度變化趨勢(shì)效果:

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

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

#include 
 #include 
 #include 
 #include 
 #include 
 #include 
 #include 
 ?
 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)建線性圖對(duì)象
         QChart* chart = new QChart();
         chart->setTitle("Temperature Data");
         chart->setAnimationOptions(QChart::SeriesAnimations);
 ?
         // 創(chuàng)建線序列對(duì)象
         QLineSeries* series1 = new QLineSeries(chart);
         QLineSeries* series2 = new QLineSeries(chart);
         QLineSeries* series3 = new QLineSeries(chart);
 ?
         // 設(shè)置線顏色、名字和寬度
         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ù)到線序列對(duì)象
         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;
         }
 ?
         // 添加線序列對(duì)象到圖表
         chart->addSeries(series1);
         chart->addSeries(series2);
         chart->addSeries(series3);
 ?
         // 設(shè)置橫軸和縱軸標(biāo)簽
         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:
     // 存儲(chǔ)溫度數(shù)據(jù)的二維數(shù)組
     QVector

以上是一個(gè)完整的Qt窗口程序，可以直接運(yùn)行并顯示3個(gè)設(shè)備的溫度曲線。

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

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

如果自己需要設(shè)計(jì)UI界面，添加QChart顯示折線圖。下面演示一下過(guò)程。

【1】添加模塊

【2】設(shè)計(jì)UI

【3】設(shè)計(jì)代碼-頭文件

#ifndef WIDGET_H
 #define WIDGET_H
 ?
 #include 
 ?
 // 包含line chart需要的頭文件
 #include 
 #include 
 #include 
 #include 
 #include 
 #include 
 ?
 // 引用命名空間
 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
 ?

【3】設(shè)計(jì)代碼-源文件

#include "widget.h"
 #include "ui_widget.h"
 ?
 Widget::Widget(QWidget *parent)
     : QWidget(parent)
     , ui(new Ui::Widget)
 {
     ui->setupUi(this);
 ?
     // 存儲(chǔ)溫度數(shù)據(jù)的二維數(shù)組
     QVector