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圖形組件的強大功能。