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 類的一些常用方法的概述，說明和表格：
| 方法 | 描述 |
|---|---|
setTitle(const QString &title) |
設定圖表的標題 |
setTitleFont(const QFont &font) |
設定圖表標題的字型 |
setTitleBrush(const QBrush &brush) |
設定圖表標題的畫刷（顏色和填充） |
setTheme(QChart::ChartTheme theme) |
設定圖表的主題，包括顏色和樣式 |
addSeries(QAbstractSeries *series) |
向圖表中新增資料系列 |
removeSeries(QAbstractSeries *series) |
從圖表中移除指定的資料系列 |
createDefaultAxes() |
建立預設的座標軸 |
setAxisX(QAbstractAxis *axis, QAbstractSeries *series = nullptr) |
設定圖表的 X 軸。如果未指定系列，則應用於所有系列 |
setAxisY(QAbstractAxis *axis, QAbstractSeries *series = nullptr) |
設定圖表的 Y 軸。如果未指定系列，則應用於所有系列 |
legend() |
返回圖表的圖例物件 |
setAnimationOptions(QChart::AnimationOptions options) |
設定圖表的動畫選項 |
createDefaultGraphicsView() |
建立預設的圖形檢視（QGraphicsView），用於顯示圖表 |
addAxis(QAbstractAxis *axis, Qt::Alignment alignment) |
將指定的座標軸新增到圖表中，並指定對齊方式 |
removeAxis(QAbstractAxis *axis) |
從圖表中移除指定的座標軸 |
axisX(QAbstractSeries *series = nullptr) |
返回圖表的 X 軸。如果未指定系列，則返回第一個 X 軸 |
axisY(QAbstractSeries *series = nullptr) |
返回圖表的 Y 軸。如果未指定系列，則返回第一個 Y 軸 |
setPlotAreaBackgroundBrush(const QBrush &brush) |
設定圖表繪圖區域的背景畫刷 |
setPlotAreaBackgroundVisible(bool visible) |
設定圖表繪圖區域的背景是否可見 |
setBackgroundBrush(const QBrush &brush) |
設定整個圖表的背景畫刷 |
setBackgroundRoundness(qreal diameter) |
設定圖表背景的圓角直徑 |
setMargins(const QMargins &margins) |
設定圖表的外邊距 |
setTheme(QChart::ChartTheme theme) |
設定圖表的主題 |
注意，上述表格中的方法並非 exhaustive，只是介紹了一些常見的和常用的方法。在實際使用中，可以根據需要查閱官方文件獲取更詳細的資訊。
1.1 繪製折線圖
接著我們來建立一個最基本的折線圖，首先需要使用圖形介面中的Graphics View元件做好UI佈局，但由於該元件並不是用於繪製圖形的，所以如果需要繪製圖形則要在元件上右鍵，選中提升為按鈕將其提升為繪圖元件，如下圖；
此時會彈出如下所示的提示框，我們直接輸入QChartView類名稱，並點選新增按鈕，最後選擇提升按鈕，此時元件將將被支援繪製圖形；
為了能讓後續的程式碼能夠更更容易的被讀著理解，此處還需要為讀者提供一份QGraphicsView元件的常用方法，如下表格是QGraphicsView的一些常用方法的概述：
| 方法 | 描述 |
|---|---|
QGraphicsView(QWidget *parent = nullptr) |
預設建構函式，建立一個QGraphicsView物件。 |
setScene(QGraphicsScene *scene) |
將指定的QGraphicsScene設定為檢視的場景。 |
scene() const |
獲取當前檢視關聯的場景。 |
setRenderHint(QPainter::RenderHint hint, bool on = true) |
設定渲染提示，例如抗鋸齒等。 |
setRenderHints(QPainter::RenderHints hints) |
設定多個渲染提示。 |
renderHints() const |
獲取當前的渲染提示。 |
setViewportUpdateMode(ViewportUpdateMode mode) |
設定視口更新模式，決定何時重繪視口。 |
setSceneRect(const QRectF &rect) |
設定場景矩形，指定在檢視中可見的場景區域。 |
setSceneRect(qreal x, qreal y, qreal w, qreal h) |
設定場景矩形，指定在檢視中可見的場景區域。 |
sceneRect() const |
獲取當前場景矩形。 |
setTransform(const QTransform &matrix, bool combine = false) |
設定檢視的座標變換矩陣。 |
resetTransform() |
重置檢視的座標變換矩陣為單位矩陣。 |
translate(qreal dx, qreal dy) |
將檢視進行平移。 |
rotate(qreal angle) |
將檢視進行旋轉。 |
scale(qreal sx, qreal sy) |
將檢視進行縮放。 |
resetMatrix() |
將檢視的座標變換矩陣重置為單位矩陣。 |
setViewportMargins(int left, int top, int right, int bottom) |
設定視口的邊緣，以保留用於顯示檢視的場景區域之外的空間。 |
setBackgroundBrush(const QBrush &brush) |
設定檢視的背景刷。 |
viewport() const |
獲取視口視窗部件，即檢視的直接子部件。 |
setOptimizationFlag(OptimizationFlag flag, bool enabled = true) |
啟用或禁用指定的最佳化標誌，以提高效能。 |
optimizationFlag(OptimizationFlag flag) const |
獲取指定的最佳化標誌狀態。 |
centerOn(const QGraphicsItem *item) |
將檢視中心對準指定的圖形項。 |
centerOn(const QPointF &pos) |
將檢視中心對準指定的場景座標。 |
setInteractive(bool allowed) |
啟用或禁用與場景中的項的互動。 |
setDragMode(DragMode mode) |
設定拖動模式，用於選擇或移動項。 |
setViewportMargins(int left, int top, int right, int bottom) |
設定視口的邊緣，以保留用於顯示檢視的場景區域之外的空間。 |
viewport() const |
獲取視口視窗部件，即檢視的直接子部件。 |
這些方法提供了對QGraphicsView的各種設定和操作，用於管理檢視的外觀和行為。可以根據實際需要選擇適當的方法進行使用。
接著，我們來實現一個簡單的繪圖功能，在MainWindow建構函式中我們首先透過new QChart()建立一個圖表類，接著透過使用ui->graphicsView->setChart方法可以將QChart()類附加到QGraphicsView圖形元件上，當有了元件指標以後，就可以動態的透過折線圖的規則來建立圖例，當有了圖例以後則就可以透過series0->append()方法依次向圖形表格中追加記錄。
以下是對功能的概述：
- 建立圖表和序列：
- 建立一個
QChart物件，並設定圖表標題。 - 將圖表新增到
QChartView中，以便在UI中顯示。 - 建立兩個曲線序列
QLineSeries，分別代表一分鐘和五分鐘的系統負載。 - 將這兩個序列新增到圖表中。
- 建立一個
- 設定圖表屬性：
- 設定圖表的渲染提示，以提高圖表的渲染質量。
- 設定圖表的主題色。
- 建立座標軸：
- 建立 X 軸和 Y 軸物件，並設定它們的範圍、標題、格式和刻度。
- 為每個序列設定相應的座標軸。
- 初始化資料：
- 使用
QRandomGenerator生成介於0和100之間的隨機整數，模擬系統負載的變化。 - 將生成的隨機整數新增到兩個曲線序列中，分別對應一分鐘和五分鐘的負載。
- 在X軸上遞增，以模擬時間的推移。
- 使用
- 清空圖例和賦予資料：
- 獲取序列的指標。
- 清空曲線序列的資料，以便重新載入新的資料。
- 透過迴圈生成的隨機數填充曲線序列。
總體來說，這段程式碼建立了一個簡單的系統效能統計圖，其中包括兩條曲線，每條曲線代表不同時間段的系統負載。透過使用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圖形元件的強大功能。