C++ Qt開發:Charts折線圖繪製詳解

lyshark發表於2023-12-23

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

折線圖(Line Chart)是一種常用的資料視覺化圖表,用於展示隨著時間、類別或其他有序變數而變化的趨勢。折線圖透過將資料點連線起來形成折線,直觀地展示了變數之間的趨勢和關係。

折線圖通常用於以下環境:

  1. 時間序列資料: 顯示隨時間變化的資料趨勢,例如股票價格、氣溫變化等。
  2. 比較趨勢: 可以比較不同組之間的趨勢,例如不同產品的銷售趨勢。
  3. 展示模式或關聯關係: 用於顯示變數之間的相關性或模式,例如銷售額和廣告投入之間的關係。

折線圖的基本結構包括:

  • 橫軸(X軸): 通常表示時間或類別。
  • 縱軸(Y軸): 表示變數的值。可以是數值,也可以是百分比或其他度量。
  • 資料點: 在圖表上表示具體的資料值的點。
  • 折線: 將資料點連線起來的線,形成變化趨勢。

在Qt中,可以使用圖表庫來建立折線圖。透過在程式中新增相應的資料點,並設定合適的軸和樣式,你可以輕鬆建立出漂亮且具有資訊表達能力的折線圖。

在之前的文章中筆者簡單建立了一個折線圖,由於之前的文章只是一個概述其目的是用於讓讀者理解繪圖元件是如何被引用到專案中的,以及如何實際使用,本章我們將具體分析折線圖的繪製功能,詳細介紹圖表各個部分的設定和操作,包括圖示的標題、圖例、邊距等屬性的設定,QLineSeries序列的屬性設定,QValueAxis座標軸的屬性設定等,透過本章的學習讀者可以掌握QChart繪圖的核心方法。

1.1 圖表設定

1.1.1 設定標題

首先我們來實現對圖表的設定,通常情況下圖表中的標題可以透過setTitle來設定,而透過setTitleFont可以設定標題字型,通常設定字型需要使用QFont類,以下是 QFont 類中常用的方法的說明和概述:

方法 描述
QFont() 預設建構函式,建立一個預設字型。
QFont(const QString &family, int pointSize = -1, int weight = -1, bool italic = false) 帶引數的建構函式,建立一個具有指定族、大小、粗細和斜體屬性的字型。
QString family() const 返回字型的族(family)。
void setFamily(const QString &family) 設定字型的族。
int pointSize() const 返回字型的大小(以點為單位)。
void setPointSize(int pointSize) 設定字型的大小。
int weight() const 返回字型的粗細。
void setWeight(int weight) 設定字型的粗細。
bool italic() const 返回字型是否為斜體。
void setItalic(bool italic) 設定字型是否為斜體。
QString styleName() const 返回字型的樣式名稱。
void setStyleName(const QString &styleName) 設定字型的樣式名稱。
bool bold() const 返回字型是否為粗體。
void setBold(bool enable) 設定字型是否為粗體。
bool exactMatch() const 檢查字型是否與指定的字型精確匹配。
QFontMetrics metrics() const 返回字型的度量資訊,如字元高度、寬度等。
bool operator==(const QFont &other) const 比較兩個字型是否相等。
bool operator!=(const QFont &other) const 比較兩個字型是否不相等。
QFont &operator=(const QFont &font) 過載賦值運算子,用於將一個字型的值賦給另一個字型。

這些方法允許你設定和獲取字型的各種屬性,如族、大小、粗細、斜體等。你可以使用這些方法來建立和調整字型,以滿足應用程式的設計需求。

透過建立一個 QFont 物件 titleFont,然後設定字型的家族、大小和粗細。最後,透過 setTitleFont 方法將這個字型應用到圖表的標題上,具體實現程式碼如下所示;

// 設定頂部標題
chart->setTitle("系統效能統計圖");

// 設定字型
QFont titleFont;
titleFont.setFamily("Arial");
titleFont.setPointSize(25);
titleFont.setBold(true);

// 設定圖表標題的字型
chart->setTitleFont(titleFont);

你可以根據需要調整字型的其他屬性,例如設定斜體、下劃線等。調整 setFamilysetPointSizesetBold 等方法的引數,則用於控制這三個屬性,當然如果不希望出現頂部提示則可以忽略設定setTitle屬性;

1.1.2 圖表主題

圖表主題的選擇可以透過setTheme屬性設定,在Qt中預設支援的主題有8種可以選擇,透過使用不同的屬性可以設定不同的樣式表或主題,以影響應用程式的外觀和感覺。

  • Light(亮): 一種明亮的主題或樣式,通常背景顏色較淺,前景顏色較深,使得介面看起來清晰明瞭。
  • BlueCerulean(藍天藍): 一個以藍色為主調的主題,可能會給應用程式帶來清新和現代的感覺。
  • Dark(暗): 一種較暗的主題,背景顏色可能較深,前景顏色相應較亮。適合建立更為暗調的使用者介面。
  • BrownSand(棕沙): 以棕色為主的主題,可能給應用程式帶來溫暖和自然的感覺。
  • BlueNcs(藍NCS): 一種以藍色為主的主題,NCS 可能指的是一種顏色標準。
  • HighContrast(高對比度): 一個高對比度的主題,通常用於提供更好的可訪問性,特別適用於視力受損的使用者。
  • BlueIcy(藍冷): 一種以藍色為主,可能帶有冷色調的主題。
  • Qt(預設): 使用 Qt 預設主題,這個主題通常會遵循作業系統的外觀,保持一致性。

而同樣的設定圖表展示動畫則可以透過setAnimationOptions屬性來設定,通常動畫屬性有4種選項,這些設定通常用於控制圖表和軸的動畫效果。以下是簡要說明:

  1. NoAnimation(無動畫):
    • 不使用動畫效果。圖表和軸的狀態變化將會立即生效,沒有平滑的過渡效果。
  2. GridAxisAnimations(軸網格動畫):
    • 使用動畫效果來顯示或隱藏軸的網格線。在顯示或隱藏軸網格時,會有一個平滑的過渡效果。
  3. SeriesAnimations(資料系列動畫):
    • 使用動畫效果來顯示或隱藏資料系列。當資料系列被新增或移除時,或者改變可見性時,會有平滑的過渡效果。
  4. AllAnimations(所有動畫):
    • 同時啟用軸網格動畫和資料系列動畫。這樣會在顯示或隱藏軸網格和資料系列時都有平滑的過渡效果。

這些效果的設定通常需要使用下標的方式,而下標索引是從0開始的,案例中我們使用Qt預設主題,並將動畫AllAnimations完全啟用,當然讀者也可以將其定義為特定字串方便使用,如下所示;

// ------------------------------------------
// 主題色定義
// ------------------------------------------
#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

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

// ------------------------------------------
// 動畫定義
// ------------------------------------------
#define NoAnimation 0
#define GridAxisAnimations 1
#define SeriesAnimations 2
#define AllAnimations 3

// 設定動畫效果
ui->graphicsView->chart()->setAnimationOptions(QChart::AnimationOptions(AllAnimations));

當設定動畫與主題色以後,再次開啟程式此時就會展現出所有的過度動畫以及預設的主題,如下圖所示;

1.1.3 圖例設定

圖例設定,圖例指的是上圖中的頂部(一分鐘負載、五分鐘負載)的提示資訊,通常是一個QLegend類的物件,透過QChart::legend()可以獲取到圖表的圖例,圖例是Qt元件根據資料集自動生成的,當然某些屬性我們也是可以調整的,例如圖例位置、顏色、字型等。

例如,設定圖例在圖示的上下左右四個方位,以下列舉常量代表了對齊方式,可以用於設定控制元件或繪圖元素在其父元素中的位置。

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

這些對齊方式常用於設定佈局、排列控制元件或繪圖元素的位置。例如,當你使用佈局管理器(如 QVBoxLayoutQHBoxLayout)時,可以透過設定對齊方式來控制子控制元件在父控制元件中的相對位置,同理當使用setAlignment()函式時就可以用於設定QChart圖表中的圖例位置。

// ------------------------------------------
// 設定圖例屬性
// ------------------------------------------

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

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

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

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

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

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

如上程式碼所示,由於我們最終覆蓋了上下左屬性,圖例將會停留在最右側,輸出效果圖如下;

圖例的字型與顏色也可以被自定義,字型的定義與頂部標題的定義相同,透過呼叫QFont來設定字型,透過QColor則用於設定顏色,字型類我們說過了,這裡就說一下QColor中有哪些方法可以使用吧。

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

方法 描述
QColor() 預設建構函式,建立一個無效的顏色物件。
QColor(int r, int g, int b, int a = 255) 建構函式,使用RGB值和可選的透明度(Alpha通道)建立顏色物件。
QColor(Qt::GlobalColor color) 建構函式,使用Qt全域性顏色列舉值建立顏色物件。
QColor(const QString &name) 建構函式,使用顏色名建立顏色物件。例如,"red"或"#RRGGBB"。
int red() const 返回顏色的紅色分量。
int green() const 返回顏色的綠色分量。
int blue() const 返回顏色的藍色分量。
int alpha() const 返回顏色的透明度分量(Alpha通道)。
QRgb rgb() const 返回顏色的32位整數表示(0xRRGGBB)。
QColor darker(int factor = 200) const 返回一個較暗的顏色,可以透過指定因子調整暗度。
QColor lighter(int factor = 150) const 返回一個較亮的顏色,可以透過指定因子調整亮度。
bool isValid() const 檢查顏色是否為有效的顏色。
bool setNamedColor(const QString &name) 設定顏色為指定顏色名。如果顏色名有效,返回 true。
bool setRgb(int r, int g, int b, int a = 255) 設定顏色的RGB值和可選的透明度。如果值有效,返回 true。
bool setRgba(qreal r, qreal g, qreal b, qreal a = 1.0) 設定顏色的RGB浮點值和可選的透明度。如果值有效,返回 true。
QString name() const 返回顏色的名稱。如果顏色是基本顏色,則返回基本顏色的名稱。
QColor toRgb() const 返回顏色的RGB表示。
QColor toHsv() const 返回顏色的HSV表示。
QColor fromRgb(int r, int g, int b, int a = 255) 靜態方法,建立一個顏色物件,使用RGB值和可選的透明度。
QColor fromHsv(int h, int s, int v, int a = 255) 靜態方法,建立一個顏色物件,使用HSV值和可選的透明度。

這些方法允許你建立、操作和查詢顏色物件的各種屬性,包括RGB值、透明度、HSV值等。你可以使用這些方法來定製和操作顏色,以滿足應用程式的設計需求。

由於我們並不是所有的引數都需要修改,所以可以先透過legend()->font()先將預設的屬性讀入,然後再其基礎之上對特定的字型和顏色進行屬性調整,如下我們分別調整字型顏色;

// ------------------------------------------
// 設定圖例字型與顏色
// ------------------------------------------

// 獲取當前字型
QFont font = ui->graphicsView->chart()->legend()->font();

// 設定字型
font.setFamily("Arial");
font.setPointSize(25);
font.setBold(true);

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

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

// 設定標籤顏色
color.setRgb(170,0,255,255);

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

執行後,我們可以看到圖例中的數字變大了,並且居右側對齊了,顏色則是紫色,如下圖所示;

1.1.4 邊距設定

邊距的設定在多數時候是用不到的,因為Qt中預設的邊距已經就很合理了,但是在某些時候邊距也需要被調整,調整邊距可以透過呼叫setMargins函式來實現,該函式需要接收QMargins類,該類常用於表示矩形邊界。

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

方法 描述
QMargins() 預設建構函式,建立一個無邊距的物件。
QMargins(int left, int top, int right, int bottom) 建構函式,使用指定的邊距值建立物件。
int left() const 返回左邊距值。
void setLeft(int left) 設定左邊距值。
int top() const 返回上邊距值。
void setTop(int top) 設定上邊距值。
int right() const 返回右邊距值。
void setRight(int right) 設定右邊距值。
int bottom() const 返回下邊距值。
void setBottom(int bottom) 設定下邊距值。
bool isNull() const 檢查邊距是否為零,即是否所有邊距值都為零。
bool operator==(const QMargins &other) const 比較兩個邊距物件是否相等。
bool operator!=(const QMargins &other) const 比較兩個邊距物件是否不相等。
QMargins &operator+=(const QMargins &margins) 將另一個邊距物件的值新增到當前物件。
QMargins &operator-=(const QMargins &margins) 從當前物件的值中減去另一個邊距物件的值。
QMargins operator+(const QMargins &margins) const 返回當前物件與另一個邊距物件相加的結果。
QMargins operator-(const QMargins &margins) const 返回當前物件與另一個邊距物件相減的結果。

QMargins 類表示矩形的邊距,其包含了四個整數值,分別表示左、上、右、下的邊距。這些方法允許你設定和獲取邊距的各個部分,進行邊距的比較和運算等。這在介面佈局和繪圖等場景中經常用到,用於定義邊距和間距。

邊界的設定很簡單,來看如下程式碼案例的演示,Qt中預設的邊界值應該均為10這個可以自己去驗證。

// ------------------------------------------
// 設定上下左右邊界
// ------------------------------------------

QMargins mgs;

// 設定邊界
mgs.setLeft(-10);
mgs.setRight(-10);
mgs.setTop(-10);
mgs.setBottom(-10);

// 重新整理到圖表
ui->graphicsView->chart()->setMargins(mgs);

當執行後,讀者可觀察圖表中的變化,來體會邊界值是什麼,當然瞭如果讀者設定的負數太大繪圖很有可能脫離繪圖區;

2.1 序列與座標軸

2.1.1 QLineSeries序列類

首先在繪圖之前,我們必須要先看一下QLineSeries折線圖類,以及QValueAxis座標軸類,此處如果讀者需要繪製其他的圖形,比如折線圖中有另一種光滑折線圖,則就需要使用QSplineSeries類,根據不同的圖表需要使用不同的繪製類,此處我們就以普通折線圖為例,讓我們來看一下繪圖類中所支援的介面吧。

QLineSeries 是 Qt 中用於繪製折線圖的類,下面是關於 QLineSeries 常用的方法的說明和概述:

方法 描述
void append(const QPointF &point) 向折線系列中追加一個資料點。
void append(QPointF &&point) 向折線系列中追加一個資料點(移動語義版本)。
void append(double x, double y) 向折線系列中追加指定座標的資料點。
void replace(int index, const QPointF &point) 替換指定索引處的資料點。
void replace(int index, double x, double y) 替換指定索引處的資料點,使用指定座標。
void remove(int index) 從折線系列中移除指定索引處的資料點。
void removePoints(int index, int count) 從折線系列中移除指定索引開始的指定數量的資料點。
void clear() 清空折線系列中的所有資料點。
QPointF at(int index) const 返回指定索引處的資料點。
int count() const 返回折線系列中資料點的數量。
bool isEmpty() const 檢查折線系列是否為空(不包含資料點)。
void setPen(const QPen &pen) 設定繪製折線時使用的筆。
QPen pen() const 返回當前用於繪製折線的筆。
void setPointLabelsFormat(const QString &format) 設定資料點標籤的顯示格式。
QString pointLabelsFormat() const 返回當前資料點標籤的顯示格式。
void setPointLabelsVisible(bool visible) 設定是否顯示資料點標籤。
bool pointsVisible() const 返回是否顯示資料點標籤。
void setUseOpenGL(bool enable) 設定是否使用OpenGL進行渲染。
bool useOpenGL() const 返回是否使用OpenGL進行渲染。
void setColor(const QColor &color) 設定折線的顏色。
QColor color() const 返回當前折線的顏色。
void setOpacity(qreal opacity) 設定折線的透明度。
qreal opacity() const 返回當前折線的透明度。

上述方法提供了一些基本的操作,例如追加、替換、移除資料點,以及設定折線的樣式、顏色等屬性。你可以根據需要使用這些方法來自定義和控制折線圖的外觀和行為。

首先我們先來實現對繪製線條的自定義,在建立序列線條時,我們通常會自定義線條的顏色,顏色的自定義可以使用QPen類來指定,以下是 QPen 類中常用的方法的說明和概述:

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

這些方法允許你設定和獲取畫筆的各種屬性,如顏色、風格、寬度、樣式等。QPen 類用於定義在繪圖中如何繪製線條和邊框。你可以使用這些方法來自定義畫筆,以滿足應用程式的設計需求。

當有了QPen類就可以對顏色進行自定義了,讀者需要注意,曲線畫筆中有一個setStyle屬性,該屬性是用於指定畫筆風格的列舉值,常用於設定 QPen 的風格。以下是這些列舉值的說明:

  1. Qt::SolidLine(實線):
    • 表示使用實線繪製。
  2. Qt::DashLine(短劃線):
    • 表示使用短劃線繪製,即透過交替的短線和空白段繪製。
  3. Qt::DotLine(點線):
    • 表示使用點線繪製,即透過交替的點和空白段繪製。
  4. Qt::DashDotLine(點劃線):
    • 表示使用點劃線繪製,即透過交替的點、短劃線和空白段繪製。

這些列舉值通常用於設定畫筆的風格,當有了這些前置條件以後,相信讀者能更容易地理解曲線序列是如何被建立出來的了,如下程式碼則是一個完整版的建立流程,讀者可自行參考學習;

// ------------------------------------------
// 建立曲線序列
// ------------------------------------------

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

// 為序列設定名字
series0->setName("一分鐘負載");
series1->setName("五分鐘負載");

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

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

// 設定線條型別:Qt::SolidLine, Qt::DashLine, Qt::DotLine, Qt::DashDotLine
pen.setStyle(Qt::SolidLine);
pen.setColor(Qt::blue);      // 設定藍色
pen.setWidth(2);             // 設定序列寬度
series1->setPen(pen);        // 折線序列的線條設定

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

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

// -----------------------------------------------
// 其他附加引數
// -----------------------------------------------

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

// 序列的資料點是否可見
series0->setPointsVisible(true);
series1->setPointsVisible(false);

// 序列的資料點標籤是否可見
series0->setPointLabelsVisible(false);
series1->setPointLabelsVisible(true);

// 序列資料點標籤顯示格式
series0->setPointLabelsFormat("(@xPoint,@yPoint)");
series1->setPointLabelsFormat("@yPoint");

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

// 設定序列資料點標籤顏色
QColor scolor=series0->pointLabelsColor();

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

// 設定序列資料點標籤字型
QFont font = series0->pointLabelsFont();
series0->setPointLabelsFont(font);

執行上述繪製程式碼,讀者可以看到如下圖所示的案例,這裡之所以很亂是為了更好的演示函式功能,讀者可以自行關閉這些選項後依次觀察效果;

2.1.2 QValueAxis座標軸類

接著我們就需要設定圖表中的座標軸引數,本例中我們使用QValueAxis類的座標軸,這是數值型座標軸,其剛好可以與QLineSeries配合使用,當如Qt中提供了許多座標軸,但他們都是從QAbstractAxis類繼承而來的。

QValueAxis 是用於處理數值軸的類,通常用於折線圖、散點圖等圖表型別。以下是關於 QValueAxis 常用的方法的說明和概述:

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

這些方法提供了對數值軸的各種設定和屬性獲取,包括範圍、刻度、標籤、標題、網格線等。你可以使用這些方法來定製數值軸以滿足你圖表的需求。

如下是座標軸的常用配置引數,讀者可自行選擇不同的函式設定使用,其完整程式碼如下所示;

// -----------------------------------------------
// 座標軸配置
// -----------------------------------------------

// 建立座標軸X
QValueAxis *axisX = new QValueAxis;

axisX->setRange(0, 10);             // 設定座標軸範圍
axisX->setLabelFormat("%.1f");      // 標籤格式
axisX->setTickCount(11);            // 主分隔個數
axisX->setMinorTickCount(4);        // 設定軸上每個刻度之間的小刻度數量
axisX->setTitleText("X軸座標");      // 標題

// 建立座標軸Y
QValueAxis *axisY = new QValueAxis;
axisY->setRange(-2, 2);
axisY->setTitleText("Y軸座標");
axisY->setTickCount(5);
axisY->setLabelFormat("%.2f");
axisY->setMinorTickCount(4);

// 設定座標軸
chart->addAxis(axisX,Qt::AlignBottom);
chart->addAxis(axisY,Qt::AlignLeft);

 //序列 series0 附加座標軸
series0->attachAxis(axisX);
series0->attachAxis(axisY);

//序列 series1 附加座標軸
series1->attachAxis(axisX);
series1->attachAxis(axisY);

// -----------------------------------------------
// 其他附加引數
// -----------------------------------------------

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

// 座標軸標題是否可見
axisX->setTitleVisible(true);
axisY->setTitleVisible(true);

// 軸的刻度標籤是否可見
axisX->setLabelsVisible(true);
axisY->setLabelsVisible(true);

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

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

// 設定座標軸的標題的字型
QFont fontX=axisX->titleFont();
axisX->setTitleFont(font);

// 設定座標軸刻度標籤的文字顏色
QColor colorX=axisX->labelsColor();
axisX->setLabelsColor(colorX);

// 設定座標軸刻度標籤的文字字型
axisX->setLabelsFont(font);

// 網格線的顏色設定
QColor colorLine=axisX->gridLineColor();
axisX->setGridLineColor(colorLine);

// 網格線的Pen設定
QPen penW;
penW=axisX->gridLinePen();
axisX->setGridLinePen(penW);

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

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

// 次級刻度線Pen設定
QPen penC;
penC=axisX->minorGridLinePen();
axisX->setMinorGridLinePen(pen);

最後是對資料進行初始化,因為初始化資料之前需要拿到series物件的指標,當得到該指標後,就可以透過呼叫append()方法或者是<<符號進行資料的追加操作,每次遞增intv迴圈直到cnt計數結束;

// ---------------------------------------------------
// 開始初始化資料
// ---------------------------------------------------

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

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

// 隨機數初始化
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;       // 隨機數,-5~+5
    y1=qSin(t)+rd/50;
    *series0<<QPointF(t,y1);   // 序列新增資料點
    // series0->append(t,y1);  // 序列新增資料點

    rd=(qrand() % 10)-5; //隨機數,-5~+5
    y2=qCos(t)+rd/50;
    // series1->append(t,y2);  // 序列新增資料點
    *series1<<QPointF(t,y2);   // 序列新增資料點

    t+=intv;
}

執行後讀者可以看到如下圖所示的輸出效果;

相關文章