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

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 對象 titleFont，然後設置字體的家族、大小和粗細。最後，通過 setTitleFont 方法將這個字體應用到圖表的標題上，具體實現代碼如下所示；

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

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

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

你可以根據需要調整字體的其他屬性，例如設置斜體、下劃線等。調整 setFamily、setPointSize、setBold 等方法的參數，則用於控制這三個屬性，當然如果不希望出現頂部提示則可以忽略設置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（右對齊）:
   • 控制項或元素將與其父元素的右側對齊。

這些對齊方式常用於設置佈局、排列控制項或繪圖元素的位置。例如，當你使用佈局管理器（如 QVBoxLayout 或 QHBoxLayout）時，可以通過設置對齊方式來控制子控制項在父控制項中的相對位置，同理當使用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 類中常用的方法的說明和概述：

這些方法允許你創建、操作和查詢顏色對象的各種屬性，包括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 類表示矩形的邊距，其包含了四個整數值，分別表示左、上、右、下的邊距。這些方法允許你設置和獲取邊距的各個部分，進行邊距的比較和運算等。這在界面佈局和繪圖等場景中經常用到，用於定義邊距和間距。

邊界的設置很簡單，來看如下代碼案例的演示，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 常用的方法的說明和概述：

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

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

這些方法允許你設置和獲取畫筆的各種屬性，如顏色、風格、寬度、樣式等。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 常用的方法的說明和概述：

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

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

// -----------------------------------------------
// 坐標軸配置
// -----------------------------------------------

// 創建坐標軸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;
}

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