C++ Qt開發：Charts繪圖組件概述

Qt 是一個跨平臺C++圖形界面開發庫，利用Qt可以快速開發跨平臺窗體應用程式，在Qt中我們可以通過拖拽的方式將不同組件放到指定的位置，實現圖形化開發極大的方便了開發效率，本章將重點介紹QCharts二維繪圖組件的常用方法及靈活運用。

Qt Charts 提供了一個強大且易於使用的工具集，用於在 Qt 應用程式中創建各種類型的圖表和圖形可視化，該模塊提供了多種類型的圖表，包括折線圖、散點圖、條形圖、餅圖等。這使得開發人員能夠輕鬆地將數據以直觀的方式呈現給用戶，增強應用程式的可視化效果。

Qt Charts 組件基於GraphicsView架構，核心由QChartView和QChart兩個組件構成。其中，QChartView的父類是QGraphicsView，它負責管理數據集的顯示。而QChart則是圖表的主要類，用於定義圖表的結構和樣式。整體來說，QChartView通過顯示QChart來呈現圖表視圖。其中QChart的繼承關係如下圖所示；

如果要在項目中使用繪圖模塊，則必須在項目的*.pro文件中引用Qt+=charts併在主函數中包含繪圖頭文件，如下所示；

#include <QtCharts>
using namespace QtCharts;

或者直接使用巨集定義的方式；

#include <QtCharts>
Qt_CHARTS_USE_NAMESPACE

此外，為了能夠讓界面支持中文漢字，我們通常會直接引入如下代碼至mainwindow.h頭文件中；

#include <QMainWindow>
#include <QtCharts>

QT_CHARTS_USE_NAMESPACE

// 解決MSVC編譯時，界面漢字亂碼的問題
#if _MSC_VER >= 1600
#pragma execution_character_set("utf-8")
#endif

以下是 QChart 類的一些常用方法的概述，說明和表格：

註意，上述表格中的方法並非 exhaustive，只是介紹了一些常見的和常用的方法。在實際使用中，可以根據需要查閱官方文檔獲取更詳細的信息。

1.1 繪製折線圖

接著我們來創建一個最基本的折線圖，首先需要使用圖形界面中的Graphics View組件做好UI佈局，但由於該組件並不是用於繪製圖形的，所以如果需要繪製圖形則要在組件上右鍵，選中提升為按鈕將其提升為繪圖組件，如下圖；

此時會彈出如下所示的提示框，我們直接輸入QChartView類名稱，並點擊添加按鈕，最後選擇提升按鈕，此時組件將將被支持繪製圖形；

為了能讓後續的代碼能夠更更容易的被讀著理解，此處還需要為讀者提供一份QGraphicsView組件的常用方法，如下表格是QGraphicsView的一些常用方法的概述：

這些方法提供了對QGraphicsView的各種設置和操作，用於管理視圖的外觀和行為。可以根據實際需要選擇適當的方法進行使用。

接著，我們來實現一個簡單的繪圖功能，在MainWindow構造函數中我們首先通過new QChart()創建一個圖表類，接著通過使用ui->graphicsView->setChart方法可以將QChart()類附加到QGraphicsView圖形組件上，當有了組件指針以後，就可以動態的通過折線圖的規則來創建圖例，當有了圖例以後則就可以通過series0->append()方法依次向圖形表格中追加記錄。

以下是對功能的概述：

1. 創建圖表和序列：
   • 創建一個 QChart 對象，並設置圖表標題。
   • 將圖表添加到 QChartView 中，以便在UI中顯示。
   • 創建兩個曲線序列 QLineSeries，分別代表一分鐘和五分鐘的系統負載。
   • 將這兩個序列添加到圖表中。
2. 設置圖表屬性：
   • 設置圖表的渲染提示，以提高圖表的渲染質量。
   • 設置圖表的主題色。
3. 創建坐標軸：
   • 創建 X 軸和 Y 軸對象，並設置它們的範圍、標題、格式和刻度。
   • 為每個序列設置相應的坐標軸。
4. 初始化數據：
   • 使用 QRandomGenerator 生成介於0和100之間的隨機整數，模擬系統負載的變化。
   • 將生成的隨機整數添加到兩個曲線序列中，分別對應一分鐘和五分鐘的負載。
   • 在X軸上遞增，以模擬時間的推移。
5. 清空圖例和賦予數據：
   • 獲取序列的指針。
   • 清空曲線序列的數據，以便重新載入新的數據。
   • 通過迴圈生成的隨機數填充曲線序列。

總體來說，這段代碼創建了一個簡單的系統性能統計圖，其中包括兩條曲線，每條曲線代表不同時間段的系統負載。通過使用Qt Charts模塊，可以輕鬆創建並顯示這樣的圖表。

#include <QRandomGenerator>

MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    // ---------------------------------------------------
    // 創建圖表的各個部件
    // ---------------------------------------------------
    QChart *chart = new QChart();
    chart->setTitle("系統性能統計圖");

    // 將Chart添加到ChartView
    ui->graphicsView->setChart(chart);
    ui->graphicsView->setRenderHint(QPainter::Antialiasing);

    // 設置圖表主題色
    ui->graphicsView->chart()->setTheme(QChart::ChartTheme(0));

    // 創建曲線序列
    QLineSeries *series0 = new QLineSeries();
    QLineSeries *series1 = new QLineSeries();

    series0->setName("一分鐘負載");
    series1->setName("五分鐘負載");

    // 序列添加到圖表
    chart->addSeries(series0);
    chart->addSeries(series1);

    // 其他附加參數
    series0->setPointsVisible(false);       // 設置數據點可見
    series1->setPointLabelsVisible(false);  // 設置數據點數值可見

    // 創建坐標軸
    QValueAxis *axisX = new QValueAxis;    // X軸
    axisX->setRange(1, 100);               // 設置坐標軸範圍
    axisX->setTitleText("X軸標題");         // 標題
    axisX->setLabelFormat("%d %");         // 設置x軸格式
    axisX->setTickCount(3);                // 設置刻度
    axisX->setMinorTickCount(3);

    QValueAxis *axisY = new QValueAxis;    // Y軸
    axisY->setRange(0, 100);               // Y軸範圍(-0 - 20)
    axisY->setTitleText("Y軸標題");         // 標題
    axisY->setLabelFormat("%d %");         // 設置y軸格式
    axisY->setTickCount(3);                // 設置刻度
    axisY->setMinorTickCount(3);

    // 設置X於Y軸數據集
    chart->setAxisX(axisX, series0);   // 為序列設置坐標軸
    chart->setAxisY(axisY, series0);

    chart->setAxisX(axisX, series1);   // 為序列設置坐標軸
    chart->setAxisY(axisY, series1);

    // ---------------------------------------------------
    // 開始初始化數據
    // ---------------------------------------------------

    // 獲取指針
    series0=(QLineSeries *)ui->graphicsView->chart()->series().at(0);
    series1=(QLineSeries *)ui->graphicsView->chart()->series().at(1);

    // 清空圖例
    series0->clear();
    series1->clear();

    // 賦予數據
    qreal t=0,intv=1;
    for(int i=1;i<100;i++)
    {
        // 生成一個介於0和100之間的隨機整數
        int randomInt = QRandomGenerator::global()->bounded(101);
        int randomInt2 = QRandomGenerator::global()->bounded(84);

        series0->append(t,randomInt2);    // 設置軸粒度以及數據
        series1->append(t,randomInt);     // 此處用隨機數替代
        t+=intv;                          // X軸粒度
    }
}

當程式被編譯運行後，讀著可看到如下圖所示的模擬數據輸出；

1.2 繪製餅狀圖

接著來實現餅狀圖的繪製，此處我們增加兩個graphicsView組件來分別繪製兩個不同的餅狀圖，餅狀圖A用於統計CPU利用率，由於只有兩個數據集，所以只需要構建兩個QPieSlice即可，代碼如下所示；

void MainWindow::printA()
{
    // 構造數據 [已用CPU%] [剩餘CPU%]
    QPieSlice *slice_1 = new QPieSlice(QStringLiteral("已使用"), 0.6, this);
    slice_1->setLabelVisible(true);

    QPieSlice *slice_2 = new QPieSlice(QStringLiteral("可用"), 0.4, this);
    slice_2->setLabelVisible(true);

    // 將兩個餅狀分區加入series
    QPieSeries *series = new QPieSeries(this);
    series->append(slice_1);
    series->append(slice_2);

    // 創建Chart畫布
    QChart *chart = new QChart();
    chart->addSeries(series);

    // 設置顯示時的動畫效果
    chart->setAnimationOptions(QChart::AllAnimations);
    chart->setTitle("系統CPU利用率");

    // 將參數設置到畫布
    ui->graphicsView_A->setChart(chart);
    ui->graphicsView_A->setRenderHint(QPainter::Antialiasing);
    ui->graphicsView_A->chart()->setTheme(QChart::ChartTheme(0));
}

餅狀圖B的構建與A保持一致，只需要根據規則定義對圖表中的元素進行增減即可，但需要註意由於餅狀圖100%是最大值，所以再分配時需要考慮到配額的合理性。

void MainWindow::printB()
{
    // 構造數據 [C盤%] [D盤%] [E盤%]
    QPieSlice *slice_c = new QPieSlice(QStringLiteral("C盤"), 0.2, this);
    slice_c->setLabelVisible(true);

    QPieSlice *slice_d = new QPieSlice(QStringLiteral("D盤"), 0.3, this);
    slice_d->setLabelVisible(true);

    QPieSlice *slice_e = new QPieSlice(QStringLiteral("E盤"),0.5,this);
    slice_e->setLabelVisible(true);

    // 將兩個餅狀分區加入series
    QPieSeries *series = new QPieSeries(this);
    series->append(slice_c);
    series->append(slice_d);
    series->append(slice_e);

    // 創建Chart畫布
    QChart *chart = new QChart();
    chart->addSeries(series);

    // 設置顯示時的動畫效果
    chart->setAnimationOptions(QChart::AllAnimations);
    chart->setTitle("系統磁碟信息");

    // 將參數設置到畫布
    ui->graphicsView_B->setChart(chart);
    ui->graphicsView_B->setRenderHint(QPainter::Antialiasing);

    // 設置不同的主題
    ui->graphicsView_B->chart()->setTheme(QChart::ChartTheme(3));
}

運行上述程式，則可以輸出兩個不同的餅狀圖，如下圖所示；

1.3 繪製柱狀圖

與餅狀圖的繪製方法一致，在繪製柱狀圖時只需要根據QBarSeries類的定義對特有元素進行填充即可，當數據集被填充後既可以直接調用繪圖方法將數據刷新到組件上。

MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    // 創建人名
    QBarSet *set0 = new QBarSet("張三");
    QBarSet *set1 = new QBarSet("李四");
    QBarSet *set2 = new QBarSet("王五");

    // 分別為不同人添加bu不同數據集
    *set0 << 1 << 2 << 8 << 4 << 6 << 6;
    *set1 << 5 << 2 << 5 << 4 << 5 << 3;
    *set2 << 5 << 5 << 8 << 15 << 9 << 5;

    // 將數據集關聯到series中
    QBarSeries *series = new QBarSeries();
    series->append(set0);
    series->append(set1);
    series->append(set2);

    // 增加頂部提示
    QChart *chart = new QChart();
    chart->addSeries(series);
    chart->setTitle("當前人數統計柱狀圖");
    chart->setAnimationOptions(QChart::SeriesAnimations);

    // 創建X軸底部提示
    QStringList categories;
    categories << "周一" << "周二" << "周三" << "周四" << "周五" << "周六";

    QBarCategoryAxis *axis = new QBarCategoryAxis();
    axis->append(categories);
    chart->createDefaultAxes();
    chart->setAxisX(axis, series);

    chart->legend()->setVisible(true);
    chart->legend()->setAlignment(Qt::AlignBottom);

    // 將參數設置到畫布
    ui->graphicsView->setChart(chart);
    ui->graphicsView->setRenderHint(QPainter::Antialiasing);

    // 設置主題
    ui->graphicsView->chart()->setTheme(QChart::ChartTheme(0));
}

運行代碼後則可以輸出如下圖所示的三個人的柱狀統計圖；

至此本章內容就結束了，通過本章內容讀著應該能掌握GraphicsView繪圖組件是如何提升的，並如何利用該組件實現簡單的繪製工作，從下一章開始我們將依次深入分析常用的圖形類，並實現一個更加實用的小功能，能夠讓讀者學以致用充分發揮Qt圖形組件的強大功能。