Qt 是一個(gè)跨平臺(tái)C++圖形界面開發(fā)庫，利用Qt可以快速開發(fā)跨平臺(tái)窗體應(yīng)用程序，在Qt中我們可以通過拖拽的方式將不同組件放到指定的位置，實(shí)現(xiàn)圖形化開發(fā)極大的方便了開發(fā)效率，本章將重點(diǎn)介紹QCharts折線圖的常用方法及靈活運(yùn)用。

折線圖（Line Chart）是一種常用的數(shù)據(jù)可視化圖表，用于展示隨著時(shí)間、類別或其他有序變量而變化的趨勢。折線圖通過將數(shù)據(jù)點(diǎn)連接起來形成折線，直觀地展示了變量之間的趨勢和關(guān)系。

折線圖通常用于以下環(huán)境：

1. 時(shí)間序列數(shù)據(jù)： 顯示隨時(shí)間變化的數(shù)據(jù)趨勢，例如股票價(jià)格、氣溫變化等。
2. 比較趨勢： 可以比較不同組之間的趨勢，例如不同產(chǎn)品的銷售趨勢。
3. 展示模式或關(guān)聯(lián)關(guān)系： 用于顯示變量之間的相關(guān)性或模式，例如銷售額和廣告投入之間的關(guān)系。

折線圖的基本結(jié)構(gòu)包括：

• 橫軸（X軸）： 通常表示時(shí)間或類別。
• 縱軸（Y軸）： 表示變量的值。可以是數(shù)值，也可以是百分比或其他度量。
• 數(shù)據(jù)點(diǎn)： 在圖表上表示具體的數(shù)據(jù)值的點(diǎn)。
• 折線： 將數(shù)據(jù)點(diǎn)連接起來的線，形成變化趨勢。

在Qt中，可以使用圖表庫來創(chuàng)建折線圖。通過在程序中添加相應(yīng)的數(shù)據(jù)點(diǎn)，并設(shè)置合適的軸和樣式，你可以輕松創(chuàng)建出漂亮且具有信息表達(dá)能力的折線圖。

在之前的文章中筆者簡單創(chuàng)建了一個(gè)折線圖，由于之前的文章只是一個(gè)概述其目的是用于讓讀者理解繪圖組件是如何被引用到項(xiàng)目中的，以及如何實(shí)際使用，本章我們將具體分析折線圖的繪制功能，詳細(xì)介紹圖表各個(gè)部分的設(shè)置和操作，包括圖標(biāo)的標(biāo)題、圖例、邊距等屬性的設(shè)置，QLineSeries序列的屬性設(shè)置，QValueAxis坐標(biāo)軸的屬性設(shè)置等，通過本章的學(xué)習(xí)讀者可以掌握QChart繪圖的核心方法。

1.1 圖表設(shè)置

1.1.1 設(shè)置標(biāo)題

首先我們來實(shí)現(xiàn)對(duì)圖表的設(shè)置，通常情況下圖表中的標(biāo)題可以通過setTitle來設(shè)置，而通過setTitleFont可以設(shè)置標(biāo)題字體，通常設(shè)置字體需要使用QFont類，以下是 QFont 類中常用的方法的說明和概述：

方法	描述
QFont()	默認(rèn)構(gòu)造函數(shù)，創(chuàng)建一個(gè)默認(rèn)字體。
QFont(const QString &family, int pointSize = -1, int weight = -1, bool italic = false)	帶參數(shù)的構(gòu)造函數(shù)，創(chuàng)建一個(gè)具有指定族、大小、粗細(xì)和斜體屬性的字體。
QString family() const	返回字體的族（family）。
void setFamily(const QString &family)	設(shè)置字體的族。
int pointSize() const	返回字體的大小（以點(diǎn)為單位）。
void setPointSize(int pointSize)	設(shè)置字體的大小。
int weight() const	返回字體的粗細(xì)。
void setWeight(int weight)	設(shè)置字體的粗細(xì)。
bool italic() const	返回字體是否為斜體。
void setItalic(bool italic)	設(shè)置字體是否為斜體。
QString styleName() const	返回字體的樣式名稱。
void setStyleName(const QString &styleName)	設(shè)置字體的樣式名稱。
bool bold() const	返回字體是否為粗體。
void setBold(bool enable)	設(shè)置字體是否為粗體。
bool exactMatch() const	檢查字體是否與指定的字體精確匹配。
QFontMetrics metrics() const	返回字體的度量信息，如字符高度、寬度等。
bool operator==(const QFont &other) const	比較兩個(gè)字體是否相等。
bool operator!=(const QFont &other) const	比較兩個(gè)字體是否不相等。
QFont &operator=(const QFont &font)	重載賦值運(yùn)算符，用于將一個(gè)字體的值賦給另一個(gè)字體。

這些方法允許你設(shè)置和獲取字體的各種屬性，如族、大小、粗細(xì)、斜體等。你可以使用這些方法來創(chuàng)建和調(diào)整字體，以滿足應(yīng)用程序的設(shè)計(jì)需求。

通過創(chuàng)建一個(gè) QFont 對(duì)象 titleFont，然后設(shè)置字體的家族、大小和粗細(xì)。最后，通過 setTitleFont 方法將這個(gè)字體應(yīng)用到圖表的標(biāo)題上，具體實(shí)現(xiàn)代碼如下所示；

// 設(shè)置頂部標(biāo)題
chart->setTitle("系統(tǒng)性能統(tǒng)計(jì)圖");

// 設(shè)置字體
QFont titleFont;
titleFont.setFamily("Arial");
titleFont.setPointSize(25);
titleFont.setBold(true);

// 設(shè)置圖表標(biāo)題的字體
chart->setTitleFont(titleFont);

你可以根據(jù)需要調(diào)整字體的其他屬性，例如設(shè)置斜體、下劃線等。調(diào)整 setFamily、setPointSize、setBold 等方法的參數(shù)，則用于控制這三個(gè)屬性，當(dāng)然如果不希望出現(xiàn)頂部提示則可以忽略設(shè)置setTitle屬性；

1.1.2 圖表主題

圖表主題的選擇可以通過setTheme屬性設(shè)置，在Qt中默認(rèn)支持的主題有8種可以選擇，通過使用不同的屬性可以設(shè)置不同的樣式表或主題，以影響應(yīng)用程序的外觀和感覺。

• Light（亮）: 一種明亮的主題或樣式，通常背景顏色較淺，前景顏色較深，使得界面看起來清晰明了。
• BlueCerulean（藍(lán)天藍(lán)）: 一個(gè)以藍(lán)色為主調(diào)的主題，可能會(huì)給應(yīng)用程序帶來清新和現(xiàn)代的感覺。
• Dark（暗）: 一種較暗的主題，背景顏色可能較深，前景顏色相應(yīng)較亮。適合創(chuàng)建更為暗調(diào)的用戶界面。
• BrownSand（棕沙）: 以棕色為主的主題，可能給應(yīng)用程序帶來溫暖和自然的感覺。
• BlueNcs（藍(lán)NCS）: 一種以藍(lán)色為主的主題，NCS 可能指的是一種顏色標(biāo)準(zhǔn)。
• HighContrast（高對(duì)比度）: 一個(gè)高對(duì)比度的主題，通常用于提供更好的可訪問性，特別適用于視力受損的用戶。
• BlueIcy（藍(lán)冷）: 一種以藍(lán)色為主，可能帶有冷色調(diào)的主題。
• Qt（默認(rèn)）: 使用 Qt 默認(rèn)主題，這個(gè)主題通常會(huì)遵循操作系統(tǒng)的外觀，保持一致性。

而同樣的設(shè)置圖表展示動(dòng)畫則可以通過setAnimationOptions屬性來設(shè)置，通常動(dòng)畫屬性有4種選項(xiàng)，這些設(shè)置通常用于控制圖表和軸的動(dòng)畫效果。以下是簡要說明：

1. NoAnimation（無動(dòng)畫）:
   • 不使用動(dòng)畫效果。圖表和軸的狀態(tài)變化將會(huì)立即生效，沒有平滑的過渡效果。
2. GridAxisAnimations（軸網(wǎng)格動(dòng)畫）:
   • 使用動(dòng)畫效果來顯示或隱藏軸的網(wǎng)格線。在顯示或隱藏軸網(wǎng)格時(shí)，會(huì)有一個(gè)平滑的過渡效果。
3. SeriesAnimations（數(shù)據(jù)系列動(dòng)畫）:
   • 使用動(dòng)畫效果來顯示或隱藏?cái)?shù)據(jù)系列。當(dāng)數(shù)據(jù)系列被添加或移除時(shí)，或者改變可見性時(shí)，會(huì)有平滑的過渡效果。
4. AllAnimations（所有動(dòng)畫）:
   • 同時(shí)啟用軸網(wǎng)格動(dòng)畫和數(shù)據(jù)系列動(dòng)畫。這樣會(huì)在顯示或隱藏軸網(wǎng)格和數(shù)據(jù)系列時(shí)都有平滑的過渡效果。

這些效果的設(shè)置通常需要使用下標(biāo)的方式，而下標(biāo)索引是從0開始的，案例中我們使用Qt默認(rèn)主題，并將動(dòng)畫AllAnimations完全啟用，當(dāng)然讀者也可以將其定義為特定字符串方便使用，如下所示；

// ------------------------------------------
// 主題色定義
// ------------------------------------------
#define Theme_Light 0
#define Theme_BlueCerulean 1
#define Theme_Dark 2
#define Theme_BrownSand 3
#define Theme_BlueNcs 4
#define Theme_HighContrast 5
#define Theme_BlueIcy 6
#define Theme_Qt 7

// 設(shè)置圖表主題
ui->graphicsView->chart()->setTheme(QChart::ChartTheme(Theme_Qt));

// ------------------------------------------
// 動(dòng)畫定義
// ------------------------------------------
#define NoAnimation 0
#define GridAxisAnimations 1
#define SeriesAnimations 2
#define AllAnimations 3

// 設(shè)置動(dòng)畫效果
ui->graphicsView->chart()->setAnimationOptions(QChart::AnimationOptions(AllAnimations));

當(dāng)設(shè)置動(dòng)畫與主題色以后，再次打開程序此時(shí)就會(huì)展現(xiàn)出所有的過度動(dòng)畫以及默認(rèn)的主題，如下圖所示；

1.1.3 圖例設(shè)置

圖例設(shè)置，圖例指的是上圖中的頂部（一分鐘負(fù)載、五分鐘負(fù)載）的提示信息，通常是一個(gè)QLegend類的對(duì)象，通過QChart::legend()可以獲取到圖表的圖例，圖例是Qt組件根據(jù)數(shù)據(jù)集自動(dòng)生成的，當(dāng)然某些屬性我們也是可以調(diào)整的，例如圖例位置、顏色、字體等。

例如，設(shè)置圖例在圖標(biāo)的上下左右四個(gè)方位，以下枚舉常量代表了對(duì)齊方式，可以用于設(shè)置控件或繪圖元素在其父元素中的位置。

1. Qt::AlignTop（頂部對(duì)齊）:
   • 控件或元素將與其父元素的頂部對(duì)齊。
2. Qt::AlignBottom（底部對(duì)齊）:
   • 控件或元素將與其父元素的底部對(duì)齊。
3. Qt::AlignLeft（左對(duì)齊）:
   • 控件或元素將與其父元素的左側(cè)對(duì)齊。
4. Qt::AlignRight（右對(duì)齊）:
   • 控件或元素將與其父元素的右側(cè)對(duì)齊。

這些對(duì)齊方式常用于設(shè)置布局、排列控件或繪圖元素的位置。例如，當(dāng)你使用布局管理器（如 QVBoxLayout 或 QHBoxLayout）時(shí)，可以通過設(shè)置對(duì)齊方式來控制子控件在父控件中的相對(duì)位置，同理當(dāng)使用setAlignment()函數(shù)時(shí)就可以用于設(shè)置QChart圖表中的圖例位置。

// ------------------------------------------
// 設(shè)置圖例屬性
// ------------------------------------------

// 圖例是否可見
ui->graphicsView->chart()->legend()->setVisible(true);

// 圖例背景框是否可見
ui->graphicsView->chart()->legend()->setBackgroundVisible(false);

// 將圖例設(shè)置到頂部
ui->graphicsView->chart()->legend()->setAlignment(Qt::AlignTop);

// 將圖例設(shè)置到底部
ui->graphicsView->chart()->legend()->setAlignment(Qt::AlignBottom);

// 將圖例設(shè)置到左側(cè)
ui->graphicsView->chart()->legend()->setAlignment(Qt::AlignLeft);

// 將圖例設(shè)置到右側(cè)
ui->graphicsView->chart()->legend()->setAlignment(Qt::AlignRight);

如上代碼所示，由于我們最終覆蓋了上下左屬性，圖例將會(huì)停留在最右側(cè)，輸出效果圖如下；

圖例的字體與顏色也可以被自定義，字體的定義與頂部標(biāo)題的定義相同，通過調(diào)用QFont來設(shè)置字體，通過QColor則用于設(shè)置顏色，字體類我們說過了，這里就說一下QColor中有哪些方法可以使用吧。

以下是 QColor 類中常用的方法的說明和概述：

方法	描述
QColor()	默認(rèn)構(gòu)造函數(shù)，創(chuàng)建一個(gè)無效的顏色對(duì)象。
QColor(int r, int g, int b, int a = 255)	構(gòu)造函數(shù)，使用RGB值和可選的透明度（Alpha通道）創(chuàng)建顏色對(duì)象。
QColor(Qt::GlobalColor color)	構(gòu)造函數(shù)，使用Qt全局顏色枚舉值創(chuàng)建顏色對(duì)象。
QColor(const QString &name)	構(gòu)造函數(shù)，使用顏色名創(chuàng)建顏色對(duì)象。例如，"red"或"#RRGGBB"。
int red() const	返回顏色的紅色分量。
int green() const	返回顏色的綠色分量。
int blue() const	返回顏色的藍(lán)色分量。
int alpha() const	返回顏色的透明度分量（Alpha通道）。
QRgb rgb() const	返回顏色的32位整數(shù)表示（0xRRGGBB）。
QColor darker(int factor = 200) const	返回一個(gè)較暗的顏色，可以通過指定因子調(diào)整暗度。
QColor lighter(int factor = 150) const	返回一個(gè)較亮的顏色，可以通過指定因子調(diào)整亮度。
bool isValid() const	檢查顏色是否為有效的顏色。
bool setNamedColor(const QString &name)	設(shè)置顏色為指定顏色名。如果顏色名有效，返回 true。
bool setRgb(int r, int g, int b, int a = 255)	設(shè)置顏色的RGB值和可選的透明度。如果值有效，返回 true。
bool setRgba(qreal r, qreal g, qreal b, qreal a = 1.0)	設(shè)置顏色的RGB浮點(diǎn)值和可選的透明度。如果值有效，返回 true。
QString name() const	返回顏色的名稱。如果顏色是基本顏色，則返回基本顏色的名稱。
QColor toRgb() const	返回顏色的RGB表示。
QColor toHsv() const	返回顏色的HSV表示。
QColor fromRgb(int r, int g, int b, int a = 255)	靜態(tài)方法，創(chuàng)建一個(gè)顏色對(duì)象，使用RGB值和可選的透明度。
QColor fromHsv(int h, int s, int v, int a = 255)	靜態(tài)方法，創(chuàng)建一個(gè)顏色對(duì)象，使用HSV值和可選的透明度。

這些方法允許你創(chuàng)建、操作和查詢顏色對(duì)象的各種屬性，包括RGB值、透明度、HSV值等。你可以使用這些方法來定制和操作顏色，以滿足應(yīng)用程序的設(shè)計(jì)需求。

由于我們并不是所有的參數(shù)都需要修改，所以可以先通過legend()->font()先將默認(rèn)的屬性讀入，然后再其基礎(chǔ)之上對(duì)特定的字體和顏色進(jìn)行屬性調(diào)整，如下我們分別調(diào)整字體顏色；

// ------------------------------------------
// 設(shè)置圖例字體與顏色
// ------------------------------------------

// 獲取當(dāng)前字體
QFont font = ui->graphicsView->chart()->legend()->font();

// 設(shè)置字體
font.setFamily("Arial");
font.setPointSize(25);
font.setBold(true);

// 設(shè)置到頁面
ui->graphicsView->chart()->legend()->setFont(font);

// 獲取當(dāng)前顏色
QColor color = ui->graphicsView->chart()->legend()->labelColor();

// 設(shè)置標(biāo)簽顏色
color.setRgb(170,0,255,255);

// 設(shè)置到頁面
ui->graphicsView->chart()->legend()->setLabelColor(color);

運(yùn)行后，我們可以看到圖例中的數(shù)字變大了，并且居右側(cè)對(duì)齊了，顏色則是紫色，如下圖所示；

1.1.4 邊距設(shè)置

邊距的設(shè)置在多數(shù)時(shí)候是用不到的，因?yàn)镼t中默認(rèn)的邊距已經(jīng)就很合理了，但是在某些時(shí)候邊距也需要被調(diào)整，調(diào)整邊距可以通過調(diào)用setMargins函數(shù)來實(shí)現(xiàn)，該函數(shù)需要接收QMargins類，該類常用于表示矩形邊界。

以下是 QMargins 類中常用的方法的說明和概述：

方法	描述
QMargins()	默認(rèn)構(gòu)造函數(shù)，創(chuàng)建一個(gè)無邊距的對(duì)象。
QMargins(int left, int top, int right, int bottom)	構(gòu)造函數(shù)，使用指定的邊距值創(chuàng)建對(duì)象。
int left() const	返回左邊距值。
void setLeft(int left)	設(shè)置左邊距值。
int top() const	返回上邊距值。
void setTop(int top)	設(shè)置上邊距值。
int right() const	返回右邊距值。
void setRight(int right)	設(shè)置右邊距值。
int bottom() const	返回下邊距值。
void setBottom(int bottom)	設(shè)置下邊距值。
bool isNull() const	檢查邊距是否為零，即是否所有邊距值都為零。
bool operator==(const QMargins &other) const	比較兩個(gè)邊距對(duì)象是否相等。
bool operator!=(const QMargins &other) const	比較兩個(gè)邊距對(duì)象是否不相等。
QMargins &operator+=(const QMargins &margins)	將另一個(gè)邊距對(duì)象的值添加到當(dāng)前對(duì)象。
QMargins &operator-=(const QMargins &margins)	從當(dāng)前對(duì)象的值中減去另一個(gè)邊距對(duì)象的值。
QMargins operator+(const QMargins &margins) const	返回當(dāng)前對(duì)象與另一個(gè)邊距對(duì)象相加的結(jié)果。
QMargins operator-(const QMargins &margins) const	返回當(dāng)前對(duì)象與另一個(gè)邊距對(duì)象相減的結(jié)果。

QMargins 類表示矩形的邊距，其包含了四個(gè)整數(shù)值，分別表示左、上、右、下的邊距。這些方法允許你設(shè)置和獲取邊距的各個(gè)部分，進(jìn)行邊距的比較和運(yùn)算等。這在界面布局和繪圖等場景中經(jīng)常用到，用于定義邊距和間距。

邊界的設(shè)置很簡單，來看如下代碼案例的演示，Qt中默認(rèn)的邊界值應(yīng)該均為10這個(gè)可以自己去驗(yàn)證。

// ------------------------------------------
// 設(shè)置上下左右邊界
// ------------------------------------------

QMargins mgs;

// 設(shè)置邊界
mgs.setLeft(-10);
mgs.setRight(-10);
mgs.setTop(-10);
mgs.setBottom(-10);

// 刷新到圖表
ui->graphicsView->chart()->setMargins(mgs);

當(dāng)運(yùn)行后，讀者可觀察圖表中的變化，來體會(huì)邊界值是什么，當(dāng)然了如果讀者設(shè)置的負(fù)數(shù)太大繪圖很有可能脫離繪圖區(qū)；

2.1 序列與坐標(biāo)軸

2.1.1 QLineSeries序列類

首先在繪圖之前，我們必須要先看一下QLineSeries折線圖類，以及QValueAxis坐標(biāo)軸類，此處如果讀者需要繪制其他的圖形，比如折線圖中有另一種光滑折線圖，則就需要使用QSplineSeries類，根據(jù)不同的圖表需要使用不同的繪制類，此處我們就以普通折線圖為例，讓我們來看一下繪圖類中所支持的接口吧。

QLineSeries 是 Qt 中用于繪制折線圖的類，下面是關(guān)于 QLineSeries 常用的方法的說明和概述：

方法	描述
void append(const QPointF &point)	向折線系列中追加一個(gè)數(shù)據(jù)點(diǎn)。
void append(QPointF &&point)	向折線系列中追加一個(gè)數(shù)據(jù)點(diǎn)（移動(dòng)語義版本）。
void append(double x, double y)	向折線系列中追加指定坐標(biāo)的數(shù)據(jù)點(diǎn)。
void replace(int index, const QPointF &point)	替換指定索引處的數(shù)據(jù)點(diǎn)。
void replace(int index, double x, double y)	替換指定索引處的數(shù)據(jù)點(diǎn)，使用指定坐標(biāo)。
void remove(int index)	從折線系列中移除指定索引處的數(shù)據(jù)點(diǎn)。
void removePoints(int index, int count)	從折線系列中移除指定索引開始的指定數(shù)量的數(shù)據(jù)點(diǎn)。
void clear()	清空折線系列中的所有數(shù)據(jù)點(diǎn)。
QPointF at(int index) const	返回指定索引處的數(shù)據(jù)點(diǎn)。
int count() const	返回折線系列中數(shù)據(jù)點(diǎn)的數(shù)量。
bool isEmpty() const	檢查折線系列是否為空（不包含數(shù)據(jù)點(diǎn)）。
void setPen(const QPen &pen)	設(shè)置繪制折線時(shí)使用的筆。
QPen pen() const	返回當(dāng)前用于繪制折線的筆。
void setPointLabelsFormat(const QString &format)	設(shè)置數(shù)據(jù)點(diǎn)標(biāo)簽的顯示格式。
QString pointLabelsFormat() const	返回當(dāng)前數(shù)據(jù)點(diǎn)標(biāo)簽的顯示格式。
void setPointLabelsVisible(bool visible)	設(shè)置是否顯示數(shù)據(jù)點(diǎn)標(biāo)簽。
bool pointsVisible() const	返回是否顯示數(shù)據(jù)點(diǎn)標(biāo)簽。
void setUseOpenGL(bool enable)	設(shè)置是否使用OpenGL進(jìn)行渲染。
bool useOpenGL() const	返回是否使用OpenGL進(jìn)行渲染。
void setColor(const QColor &color)	設(shè)置折線的顏色。
QColor color() const	返回當(dāng)前折線的顏色。
void setOpacity(qreal opacity)	設(shè)置折線的透明度。
qreal opacity() const	返回當(dāng)前折線的透明度。

上述方法提供了一些基本的操作，例如追加、替換、移除數(shù)據(jù)點(diǎn)，以及設(shè)置折線的樣式、顏色等屬性。你可以根據(jù)需要使用這些方法來自定義和控制折線圖的外觀和行為。

首先我們先來實(shí)現(xiàn)對(duì)繪制線條的自定義，在創(chuàng)建序列線條時(shí)，我們通常會(huì)自定義線條的顏色，顏色的自定義可以使用QPen類來指定，以下是 QPen 類中常用的方法的說明和概述：

方法	描述
QPen()	默認(rèn)構(gòu)造函數(shù)，創(chuàng)建一個(gè)默認(rèn)的畫筆。
QPen(Qt::PenStyle style)	使用指定的畫筆風(fēng)格創(chuàng)建畫筆。
QPen(const QColor &color)	使用指定的顏色創(chuàng)建畫筆。
QPen(const QBrush &brush, qreal width = 0, Qt::PenStyle style = Qt::SolidLine, Qt::PenCapStyle cap = Qt::SquareCap, Qt::PenJoinStyle join = Qt::BevelJoin)	使用指定的畫刷、寬度、風(fēng)格、端點(diǎn)樣式和連接樣式創(chuàng)建畫筆。
void setColor(const QColor &color)	設(shè)置畫筆的顏色。
QColor color() const	返回畫筆的顏色。
void setStyle(Qt::PenStyle style)	設(shè)置畫筆的風(fēng)格。
Qt::PenStyle style() const	返回畫筆的風(fēng)格。
void setWidth(qreal width)	設(shè)置畫筆的寬度。
qreal width() const	返回畫筆的寬度。
void setCapStyle(Qt::PenCapStyle style)	設(shè)置畫筆的端點(diǎn)樣式。
Qt::PenCapStyle capStyle() const	返回畫筆的端點(diǎn)樣式。
void setJoinStyle(Qt::PenJoinStyle style)	設(shè)置畫筆的連接樣式。
Qt::PenJoinStyle joinStyle() const	返回畫筆的連接樣式。
void setBrush(const QBrush &brush)	設(shè)置畫筆的畫刷。
QBrush brush() const	返回畫筆的畫刷。
void setDashPattern(const QVector<qreal> &pattern)	設(shè)置虛線的模式。
QVector<qreal> dashPattern() const	返回虛線的模式。
void setDashOffset(qreal offset)	設(shè)置虛線的偏移。
qreal dashOffset() const	返回虛線的偏移。
void setCosmetic(bool cosmetic)	設(shè)置畫筆是否為“化妝品”筆。當(dāng)為 true 時(shí)，筆將忽略設(shè)備的變換，保持筆寬度為一個(gè)像素。
bool isCosmetic() const	返回畫筆是否為“化妝品”筆。
void setTransform(const QTransform &matrix, bool combine = false)	設(shè)置畫筆的變換矩陣。
QTransform transform() const	返回畫筆的變換矩陣。
void setMiterLimit(qreal limit)	設(shè)置斜接連接的限制。
qreal miterLimit() const	返回斜接連接的限制。
bool operator==(const QPen &other) const	比較兩個(gè)畫筆是否相等。
bool operator!=(const QPen &other) const	比較兩個(gè)畫筆是否不相等。

這些方法允許你設(shè)置和獲取畫筆的各種屬性，如顏色、風(fēng)格、寬度、樣式等。QPen 類用于定義在繪圖中如何繪制線條和邊框。你可以使用這些方法來自定義畫筆，以滿足應(yīng)用程序的設(shè)計(jì)需求。

當(dāng)有了QPen類就可以對(duì)顏色進(jìn)行自定義了，讀者需要注意，曲線畫筆中有一個(gè)setStyle屬性，該屬性是用于指定畫筆風(fēng)格的枚舉值，常用于設(shè)置 QPen 的風(fēng)格。以下是這些枚舉值的說明：

1. Qt::SolidLine（實(shí)線）:
   • 表示使用實(shí)線繪制。
2. Qt::DashLine（短劃線）:
   • 表示使用短劃線繪制，即通過交替的短線和空白段繪制。
3. Qt::DotLine（點(diǎn)線）:
   • 表示使用點(diǎn)線繪制，即通過交替的點(diǎn)和空白段繪制。
4. Qt::DashDotLine（點(diǎn)劃線）:
   • 表示使用點(diǎn)劃線繪制，即通過交替的點(diǎn)、短劃線和空白段繪制。

這些枚舉值通常用于設(shè)置畫筆的風(fēng)格，當(dāng)有了這些前置條件以后，相信讀者能更容易地理解曲線序列是如何被創(chuàng)建出來的了，如下代碼則是一個(gè)完整版的創(chuàng)建流程，讀者可自行參考學(xué)習(xí)；

// ------------------------------------------
// 創(chuàng)建曲線序列
// ------------------------------------------

QLineSeries *series0 = new QLineSeries();
QLineSeries *series1 = new QLineSeries();

// 為序列設(shè)置名字
series0->setName("一分鐘負(fù)載");
series1->setName("五分鐘負(fù)載");

// 為曲線指定類型和屬性
QPen pen;

// 設(shè)置線條類型：Qt::SolidLine, Qt::DashLine, Qt::DotLine, Qt::DashDotLine
pen.setStyle(Qt::DotLine);
pen.setWidth(2);             // 設(shè)置序列寬度
pen.setColor(Qt::green);     // 設(shè)置綠色
series0->setPen(pen);        // 折線序列的線條設(shè)置

// 設(shè)置線條類型：Qt::SolidLine, Qt::DashLine, Qt::DotLine, Qt::DashDotLine
pen.setStyle(Qt::SolidLine);
pen.setColor(Qt::blue);      // 設(shè)置藍(lán)色
pen.setWidth(2);             // 設(shè)置序列寬度
series1->setPen(pen);        // 折線序列的線條設(shè)置

// 為序列曲線設(shè)置顏色
QColor color;
color.setRgb(170,0,255,255);   // 紫色配色
series0->setColor(color);      // 設(shè)置序列0

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

// -----------------------------------------------
// 其他附加參數(shù)
// -----------------------------------------------

// 序列是否可見
series0->setVisible(true);
series1->setVisible(true);

// 序列的數(shù)據(jù)點(diǎn)是否可見
series0->setPointsVisible(true);
series1->setPointsVisible(false);

// 序列的數(shù)據(jù)點(diǎn)標(biāo)簽是否可見
series0->setPointLabelsVisible(false);
series1->setPointLabelsVisible(true);

// 序列數(shù)據(jù)點(diǎn)標(biāo)簽顯示格式
series0->setPointLabelsFormat("(@xPoint,@yPoint)");
series1->setPointLabelsFormat("@yPoint");

// 序列透明度設(shè)置
series0->setOpacity(100/10.0);
series1->setOpacity(100/10.0);

// 設(shè)置序列數(shù)據(jù)點(diǎn)標(biāo)簽顏色
QColor scolor=series0->pointLabelsColor();

scolor.setRgb(170,0,255,255);
series0->setPointLabelsColor(scolor);
series1->setPointLabelsColor(scolor);

// 設(shè)置序列數(shù)據(jù)點(diǎn)標(biāo)簽字體
QFont font = series0->pointLabelsFont();
series0->setPointLabelsFont(font);

運(yùn)行上述繪制代碼，讀者可以看到如下圖所示的案例，這里之所以很亂是為了更好的演示函數(shù)功能，讀者可以自行關(guān)閉這些選項(xiàng)后依次觀察效果；

2.1.2 QValueAxis坐標(biāo)軸類

接著我們就需要設(shè)置圖表中的坐標(biāo)軸參數(shù)，本例中我們使用QValueAxis類的坐標(biāo)軸，這是數(shù)值型坐標(biāo)軸，其剛好可以與QLineSeries配合使用，當(dāng)如Qt中提供了許多坐標(biāo)軸，但他們都是從QAbstractAxis類繼承而來的。

QValueAxis 是用于處理數(shù)值軸的類，通常用于折線圖、散點(diǎn)圖等圖表類型。以下是關(guān)于 QValueAxis 常用的方法的說明和概述：

方法	描述
void setRange(qreal min, qreal max)	設(shè)置軸的數(shù)值范圍。
void setTickCount(int count)	設(shè)置軸上的刻度數(shù)量。
void setMinorTickCount(int count)	設(shè)置軸上每個(gè)刻度之間的小刻度數(shù)量。
void setLabelFormat(const QString &format)	設(shè)置刻度標(biāo)簽的顯示格式。
void setLabelsVisible(bool visible)	設(shè)置是否顯示刻度標(biāo)簽。
void setTitleText(const QString &title)	設(shè)置軸的標(biāo)題。
void setTitleVisible(bool visible)	設(shè)置是否顯示軸的標(biāo)題。
void setGridLineVisible(bool visible)	設(shè)置是否顯示網(wǎng)格線。
void setGridLineColor(const QColor &color)	設(shè)置網(wǎng)格線的顏色。
void setGridLinePen(const QPen &pen)	設(shè)置用于繪制網(wǎng)格線的筆。
void setLinePen(const QPen &pen)	設(shè)置軸線的筆。
qreal min() const	返回軸的最小值。
qreal max() const	返回軸的最大值。
int tickCount() const	返回軸上的刻度數(shù)量。
int minorTickCount() const	返回軸上每個(gè)刻度之間的小刻度數(shù)量。
QString labelFormat() const	返回刻度標(biāo)簽的顯示格式。
bool isLabelsVisible() const	返回是否顯示刻度標(biāo)簽。
QString titleText() const	返回軸的標(biāo)題。
bool isTitleVisible() const	返回是否顯示軸的標(biāo)題。
bool isGridLineVisible() const	返回是否顯示網(wǎng)格線。
QColor gridLineColor() const	返回網(wǎng)格線的顏色。
QPen gridLinePen() const	返回用于繪制網(wǎng)格線的筆。
QPen linePen() const	返回軸線的筆。

這些方法提供了對(duì)數(shù)值軸的各種設(shè)置和屬性獲取，包括范圍、刻度、標(biāo)簽、標(biāo)題、網(wǎng)格線等。你可以使用這些方法來定制數(shù)值軸以滿足你圖表的需求。

如下是坐標(biāo)軸的常用配置參數(shù)，讀者可自行選擇不同的函數(shù)設(shè)置使用，其完整代碼如下所示；

// -----------------------------------------------
// 坐標(biāo)軸配置
// -----------------------------------------------

// 創(chuàng)建坐標(biāo)軸X
QValueAxis *axisX = new QValueAxis;

axisX->setRange(0, 10);             // 設(shè)置坐標(biāo)軸范圍
axisX->setLabelFormat("%.1f");      // 標(biāo)簽格式
axisX->setTickCount(11);            // 主分隔個(gè)數(shù)
axisX->setMinorTickCount(4);        // 設(shè)置軸上每個(gè)刻度之間的小刻度數(shù)量
axisX->setTitleText("X軸坐標(biāo)");      // 標(biāo)題

// 創(chuàng)建坐標(biāo)軸Y
QValueAxis *axisY = new QValueAxis;
axisY->setRange(-2, 2);
axisY->setTitleText("Y軸坐標(biāo)");
axisY->setTickCount(5);
axisY->setLabelFormat("%.2f");
axisY->setMinorTickCount(4);

// 設(shè)置坐標(biāo)軸
chart->addAxis(axisX,Qt::AlignBottom);
chart->addAxis(axisY,Qt::AlignLeft);

 //序列 series0 附加坐標(biāo)軸
series0->attachAxis(axisX);
series0->attachAxis(axisY);

//序列 series1 附加坐標(biāo)軸
series1->attachAxis(axisX);
series1->attachAxis(axisY);

// -----------------------------------------------
// 其他附加參數(shù)
// -----------------------------------------------

// 刻度是否可見
axisX->setLineVisible(true);
axisY->setLineVisible(true);

// 坐標(biāo)軸標(biāo)題是否可見
axisX->setTitleVisible(true);
axisY->setTitleVisible(true);

// 軸的刻度標(biāo)簽是否可見
axisX->setLabelsVisible(true);
axisY->setLabelsVisible(true);

// 軸的網(wǎng)格線是否可見
axisX->setGridLineVisible(true);
axisY->setGridLineVisible(true);

// 次級(jí)刻度是否可見
axisX->setMinorGridLineVisible(true);
axisY->setMinorGridLineVisible(true);

// 設(shè)置坐標(biāo)軸的標(biāo)題的字體
QFont fontX=axisX->titleFont();
axisX->setTitleFont(font);

// 設(shè)置坐標(biāo)軸刻度標(biāo)簽的文字顏色
QColor colorX=axisX->labelsColor();
axisX->setLabelsColor(colorX);

// 設(shè)置坐標(biāo)軸刻度標(biāo)簽的文字字體
axisX->setLabelsFont(font);

// 網(wǎng)格線的顏色設(shè)置
QColor colorLine=axisX->gridLineColor();
axisX->setGridLineColor(colorLine);

// 網(wǎng)格線的Pen設(shè)置
QPen penW;
penW=axisX->gridLinePen();
axisX->setGridLinePen(penW);

// 設(shè)置線條顏色
axisX->setLinePen(penW);
axisX->setLinePenColor(color);

// 次級(jí)刻度網(wǎng)格線顏色
QColor colorC=axisX->minorGridLineColor();
axisX->setMinorGridLineColor(colorC);

// 次級(jí)刻度線Pen設(shè)置
QPen penC;
penC=axisX->minorGridLinePen();
axisX->setMinorGridLinePen(pen);

最后是對(duì)數(shù)據(jù)進(jìn)行初始化，因?yàn)槌跏蓟瘮?shù)據(jù)之前需要拿到series對(duì)象的指針，當(dāng)?shù)玫皆撝羔樅?，就可以通過調(diào)用append()方法或者是<<符號(hào)進(jìn)行數(shù)據(jù)的追加操作，每次遞增intv循環(huán)直到cnt計(jì)數(shù)結(jié)束；

// ---------------------------------------------------
// 開始初始化數(shù)據(jù)
// ---------------------------------------------------

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

// 清空?qǐng)D例
series0->clear();
series1->clear();

// 隨機(jī)數(shù)初始化
qsrand(QTime::currentTime().second());

qreal t=0,y1,y2,intv=0.1;
qreal rd;
int cnt=100;
for(int i=0;i<cnt;i++)
{
    rd=(qrand() % 10)-5;       // 隨機(jī)數(shù),-5~+5
    y1=qSin(t)+rd/50;
    *series0<<QPointF(t,y1);   // 序列添加數(shù)據(jù)點(diǎn)
    // series0->append(t,y1);  // 序列添加數(shù)據(jù)點(diǎn)

    rd=(qrand() % 10)-5; //隨機(jī)數(shù),-5~+5
    y2=qCos(t)+rd/50;
    // series1->append(t,y2);  // 序列添加數(shù)據(jù)點(diǎn)
    *series1<<QPointF(t,y2);   // 序列添加數(shù)據(jù)點(diǎn)

    t+=intv;
}

運(yùn)行后讀者可以看到如下圖所示的輸出效果；

總結(jié)

以上是生活随笔為你收集整理的C++ Qt开发：Charts折线图绘制详解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。