當前位置：首頁 > 运维知识 > windows >内容正文

windows

C++ Qt开发：Charts绘制各类图表详解

發布時間：2023/12/29 windows 43 coder

生活随笔收集整理的這篇文章主要介紹了 C++ Qt开发：Charts绘制各类图表详解小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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

在之前的文章中筆者介紹了如何使用QCharts模塊來繪制簡單的折線圖并對通用API接口進行了概括，本章我們通過在TreeWidget組件中提取數據，并依次實現柱狀圖、餅狀圖、堆疊圖、百分比圖、散點圖等。

1.1 創建柱狀圖

柱狀圖（Bar Chart）用于顯示各類別之間的數量關系。它通過在一個坐標系中繪制垂直的矩形條（柱）來表示數據。每個柱的高度表示相應類別的數量或數值，柱的寬度一般是固定的，類別之間的間隔可以根據需要調整。

柱狀圖主要用于比較不同類別的數值或數量，幫助觀察數據的分布趨勢、對比不同類別的數據大小，以及發現數據之間的關系。柱狀圖通常在橫軸上表示不同的類別，縱軸上表示數量或數值。

以下是柱狀圖的一些主要特點：

垂直柱狀圖（Vertical Bar Chart）：柱狀圖的柱是垂直排列的，縱軸表示數值或數量。
水平柱狀圖（Horizontal Bar Chart）：柱狀圖的柱是水平排列的，橫軸表示數值或數量。
分組柱狀圖（Grouped Bar Chart）：將柱按照類別分組，同一組內的柱一般在相同的位置。
堆疊柱狀圖（Stacked Bar Chart）：將柱疊加在一起，柱的高度表示總和。
百分比柱狀圖（Percentage Bar Chart）：每個柱的高度表示相對于總和的百分比。

柱狀圖是數據可視化中常用的工具之一，易于理解且能夠直觀地傳達信息。在業務、科學研究、金融等領域，柱狀圖被廣泛用于展示數據的分布和趨勢。在Qt中柱狀圖的繪制離不開三個類的支持，其分別是QBarSet、QBarSeries、QBarCategoryAxis這三個類提供了用于操作和管理條形圖數據集的方法。

QBarSet類主要用于創建或表示一個柱狀圖的集合元素。以下是關于QBarSet的主要方法的說明和概述，以表格形式呈現：

方法	描述
`QBarSet(const QString &label = QString())`	構造函數，創建一個空的 `QBarSet` 對象，可以通過提供標簽進行初始化。
`void append(qreal value)`	將一個值添加到數據集的末尾。
`void append(const QList<qreal> &values)`	將一組值添加到數據集的末尾。
`void replace(int index, qreal value)`	替換數據集中指定索引位置的值。
`void replace(const QList<qreal> &values)`	用提供的一組值替換整個數據集。
`void clear()`	清除數據集中的所有值。
`int count() const`	返回數據集中值的數量。
`bool isEmpty() const`	檢查數據集是否為空。
`QString label() const`	返回數據集的標簽。
`void setLabel(const QString &label)`	設置數據集的標簽。
`qreal at(int index) const`	返回數據集中指定索引位置的值。
`QList<qreal> values() const`	返回包含數據集所有值的列表。

QBarSeries 用于表示條形圖數據系列。以下是 QBarSeries 類的一些主要方法和概述：

方法	描述
`QBarSeries(QObject *parent = nullptr)`	構造函數，創建一個空的 `QBarSeries` 對象。
`void append(QBarSet *set)`	將一個 `QBarSet` 對象添加到系列的末尾。
`void append(const QList<QBarSet*> &sets)`	將一組 `QBarSet` 對象添加到系列的末尾。
`void replace(int index, QBarSet *set)`	替換系列中指定索引位置的 `QBarSet` 對象。
`void replace(const QList<QBarSet*> &sets)`	用提供的一組 `QBarSet` 對象替換整個系列。
`void remove(int index)`	移除系列中指定索引位置的 `QBarSet` 對象。
`void clear()`	清除系列中的所有 `QBarSet` 對象。
`int count() const`	返回系列中 `QBarSet` 對象的數量。
`bool isEmpty() const`	檢查系列是否為空。
`QBarSet* at(int index) const`	返回系列中指定索引位置的 `QBarSet` 對象。
`QList<QBarSet*> barSets() const`	返回包含系列所有 `QBarSet` 對象的列表。

QBarCategoryAxis 表示條形圖橫坐標，用于管理和顯示條形圖中的分類軸，其中每個條形圖都屬于特定的類別。以下是 QBarCategoryAxis 類的一些主要方法和概述：

方法	描述
`QBarCategoryAxis(QObject *parent = nullptr)`	構造函數，創建一個空的 `QBarCategoryAxis` 對象。
`void append(const QStringList &categories)`	將一組類別添加到軸的末尾。
`void append(const QString &category)`	將一個類別添加到軸的末尾。
`void insert(int index, const QString &category)`	在指定索引位置插入一個類別。
`void insert(int index, const QStringList &categories)`	在指定索引位置插入一組類別。
`void remove(const QString &category)`	移除指定的類別。
`void remove(int index, int count = 1)`	從指定索引位置開始移除指定數量的類別。
`void clear()`	清除軸中的所有類別。
`int count() const`	返回軸中類別的數量。
`QString categoryAt(int index) const`	返回軸中指定索引位置的類別。
`QStringList categories() const`	返回包含軸所有類別的列表。
`void setCategories(const QStringList &categories)`	設置軸的類別。
`void setStartValue(qreal value)`	設置軸的起始值。
`qreal startValue() const`	返回軸的起始值。
`void setRange(qreal min, qreal max)`	設置軸的范圍。
`void append(const QVector<QPointF> &points)`	將一組點添加到軸的末尾，用于自動設置類別。
`void replace(const QVector<QPointF> &points)`	用提供的一組點替換整個軸，用于自動設置類別。

如下代碼是使用 Qt 的圖表模塊創建一個包含柱狀圖和折線圖的圖表，并顯示在 QGraphicsView 控件中，在MainWindow::MainWindow構造函數中我們可以使用如下代碼實現柱狀圖的創建。

圖表初始化：創建一個 QChart 對象，并設置圖表的標題和動畫效果。然后將圖表設置給 ui->graphicsView 控件，同時啟用抗鋸齒渲染。

QChart *chart = new QChart();
chart->setTitle("柱狀圖統計");
chart->setAnimationOptions(QChart::SeriesAnimations);

// 為graphicsView設置chart
ui->graphicsView->setChart(chart);
ui->graphicsView->setRenderHint(QPainter::Antialiasing);

// 構造柱狀圖
chart =ui->graphicsView->chart();
chart->removeAllSeries();            // 刪除所有序列
chart->removeAxis(chart->axisX());   // 刪除坐標軸
chart->removeAxis(chart->axisY());   // 刪除坐標軸

創建數據集：構造三個 QBarSet 對象，分別表示數學、語文、英語的數據集。同時創建一個 QLineSeries 對象，表示平均分數據集，并設置線條的顏色和寬度。

QBarSet *setMath = new QBarSet(theModel->horizontalHeaderItem(1)->text());      // 數學字段
QBarSet *setChinese = new QBarSet(theModel->horizontalHeaderItem(2)->text());   // 語文字段
QBarSet *setEnglish= new QBarSet(theModel->horizontalHeaderItem(3)->text());    // 英語字段

// 創建折線線條
QLineSeries *Line = new QLineSeries();
Line->setName(theModel->horizontalHeaderItem(4)->text());  // 表示平均分
QPen pen;
pen.setColor(Qt::red);  // 使用紅色
pen.setWidth(2);        // 設置寬度
Line->setPen(pen);      // 繪制

添加數據：遍歷前10個數據行，將數學、語文、英語的成績和平均分添加到相應的數據集中。

for(int i=0;i< 10;i++)
{
    // 從數據模型獲取數據
    setMath->append(theModel->item(i,1)->text().toInt());            // 數學
    setChinese->append(theModel->item(i,2)->text().toInt());         // 語文
    setEnglish->append(theModel->item(i,3)->text().toInt());         // 英語
    Line->append(QPointF(i,theModel->item(i,4)->text().toFloat()));  // 平均分
}

創建柱狀圖序列：使用 QBarSeries 創建一個柱狀圖序列，并將三個數據集添加到序列中。同時，將折線圖序列也添加到圖表中。

cppCopy codeQBarSeries *series = new QBarSeries();
series->append(setMath);
series->append(setChinese);
series->append(setEnglish);

chart->addSeries(series);
chart->addSeries(Line);

設置坐標軸：創建橫坐標軸 axisX 和縱坐標軸 axisY，設置它們的范圍、標簽等信息，然后將它們與相應的序列關聯。

// 創建柱狀圖序列 QBarSeries 并添加三個數據集
QBarSeries *series = new QBarSeries();
series->append(setMath);
series->append(setChinese);
series->append(setEnglish);

chart->addSeries(series); // 添加柱狀圖序列
chart->addSeries(Line);   // 添加折線圖序列

// 用于橫坐標在字符串列表 即UID
QStringList categories;
for (int i=0;i<10;i++)
{
    categories <<theModel->item(i,0)->text();
}

// 柱狀圖的坐標軸
QBarCategoryAxis *axisX = new QBarCategoryAxis();
axisX->append(categories);            // 添加橫坐標文字列表
chart->setAxisX(axisX, series);       // 設置橫坐標
chart->setAxisX(axisX, Line);         // 設置橫坐標

// 設置坐標范圍
axisX->setRange(categories.at(0), categories.at(categories.count()-1));

// 數值型坐標作為縱軸
QValueAxis *axisY = new QValueAxis;
axisY->setRange(0, 100);
axisY->setTitleText("分數");
axisY->setTickCount(6);
axisY->setLabelFormat("%.0f");

圖例顯示設置：顯示圖例，并設置圖例在底部對齊。

chart->setAxisY(axisY, series);
chart->setAxisY(axisY, Line);
chart->legend()->setVisible(true);
chart->legend()->setAlignment(Qt::AlignBottom);

這樣，你就創建了一個包含柱狀圖和折線圖的圖表，并將其顯示在 QGraphicsView 控件中，運行后則可以得到如下圖所示的圖例；

1.2 創建餅狀圖

餅狀圖（Pie Chart）用于展示各部分占整體的比例關系。它通過在一個圓形區域內繪制扇形來表示數據的相對大小。整個圓表示總體，而每個扇形的弧長（或面積）表示相應類別的數量或比例。

餅狀圖的主要特點包括：

占比表示：每個扇形的大小表示相應類別在總體中所占的比例，從而直觀地展示各類別之間的相對關系。
圓形布局：餅狀圖的數據以圓形的方式呈現，使得用戶能夠輕松比較各部分的大小。
清晰易懂：餅狀圖通常用于表示數據的相對比例，特別適用于展示類別之間的占比關系，非常直觀。
單一變量：餅狀圖適合展示單一變量的占比關系，不適用于多個變量或時間序列的比較。
限制數據量：由于餅狀圖是基于整個圓的，適合表示少量類別的占比關系。當類別過多時，可能導致圖形復雜，難以解讀。

餅狀圖常見的應用場景包括市場份額分析、調查結果的占比展示、資源分配比例等。然而，有時候，為了更好地表達數據，也會使用改進版的餅狀圖，如環形圖（Donut Chart）等。

QPieSeries 是 Qt Charts 模塊中用于繪制餅狀圖的數據序列類。它派生自 QAbstractSeries 類，用于管理和展示餅狀圖中的數據。以下是 QPieSeries 類的一些常用方法和屬性，以表格形式概述：

方法	描述
`QPieSeries(QObject *parent = nullptr)`	構造函數，創建一個 `QPieSeries` 對象。
`~QPieSeries()`	析構函數，釋放 `QPieSeries` 對象。
`append(QPieSlice *slice)`	向餅狀圖序列中追加一個餅塊。
`insert(int index, QPieSlice *slice)`	在指定位置插入一個餅塊。
`remove(QPieSlice *slice)`	從餅狀圖序列中移除指定的餅塊。
`clear()`	清除餅狀圖序列中的所有餅塊。
`slices()`	返回餅狀圖序列中的所有餅塊。
`count()`	返回餅狀圖序列中的餅塊數量。
`at(int index)`	返回餅狀圖序列中指定索引位置的餅塊。
`setVisible(bool visible)`	設置餅狀圖序列的可見性。
`isVisible()`	返回餅狀圖序列的可見性。
`setHoleSize(double size)`	設置餅狀圖中間空心的大小，范圍為 [0.0, 1.0]，0.0 表示沒有空心，1.0 表示整個餅狀圖都是空心。
`holeSize()`	返回餅狀圖中間空心的大小。
`setPieSize(double size)`	設置餅狀圖的大小，范圍為 [0.0, 1.0]，默認為 1.0。
`pieSize()`	返回餅狀圖的大小。
`setLabelsVisible(bool visible)`	設置餅塊的標簽是否可見。
`labelsVisible()`	返回餅塊的標簽是否可見。
`setLabelsPosition(QPieSlice::LabelPosition position)`	設置餅塊標簽的位置。
`labelsPosition()`	返回餅塊標簽的位置。
`setLabelsPrecision(int precision)`	設置餅塊標簽顯示的小數位數。
`labelsPrecision()`	返回餅塊標簽顯示的小數位數。
`clicked(QPieSlice *slice)`	點擊餅塊時發出的信號，參數為被點擊的餅塊。
`hovered(QPieSlice *slice, bool state)`	鼠標懸停在餅塊上時發出的信號，參數為被懸停的餅塊和懸停狀態。
`pressed(QPieSlice *slice)`	鼠標按下餅塊時發出的信號，參數為被按下的餅塊。
`released(QPieSlice *slice)`	鼠標釋放餅塊時發出的信號，參數為被釋放的餅塊。

QPieSlice 是 Qt Charts 模塊中用于表示餅狀圖中的單個餅塊的類。每個 QPieSlice 對象都代表餅狀圖中的一個數據分塊。

以下是關于 QPieSlice 的一些方法以及說明：

方法	描述
`QPieSlice(qreal value, QString label)`	構造函數，創建一個帶有給定值和標簽的 `QPieSlice` 對象。
`~QPieSlice()`	析構函數，釋放 `QPieSlice` 對象。
`setLabel(QString label)`	設置餅塊的標簽文字。
`label()`	返回餅塊的標簽文字。
`setValue(qreal value)`	設置餅塊的值。
`value()`	返回餅塊的值。
`setExploded(bool exploded)`	設置餅塊是否為爆炸狀態，即是否與餅圖分離。
`isExploded()`	返回餅塊是否為爆炸狀態。
`setPieSeries(QPieSeries *series)`	設置餅塊所屬的 `QPieSeries` 對象。
`pieSeries()`	返回餅塊所屬的 `QPieSeries` 對象。
`setBrush(const QBrush &brush)`	設置餅塊的畫刷，即填充顏色。
`brush()`	返回餅塊的畫刷。
`setLabelBrush(const QBrush &brush)`	設置餅塊標簽的畫刷，即標簽的顏色。
`labelBrush()`	返回餅塊標簽的畫刷。
`setPen(const QPen &pen)`	設置餅塊的畫筆，即邊框顏色和樣式。
`pen()`	返回餅塊的畫筆。
`setLabelVisible(bool visible)`	設置餅塊標簽是否可見。
`isLabelVisible()`	返回餅塊標簽是否可見。
`setExplodeDistanceFactor(qreal factor)`	設置餅塊爆炸時的距離因子，即與餅圖分離的距離。
`explodeDistanceFactor()`	返回餅塊爆炸時的距離因子。
`setPercentage(qreal percentage)`	設置餅塊的百分比值。
`percentage()`	返回餅塊的百分比值。
`clicked(bool state)`	鼠標點擊餅塊時發出的信號，參數為鼠標點擊的狀態（按下或釋放）。
`hovered(bool state)`	鼠標懸停在餅塊上時發出的信號，參數為懸停狀態。
`pressed()`	鼠標按下餅塊時發出的信號。
`released()`	鼠標釋放餅塊時發出的信號。

QPieSlice 主要用于配置和管理餅狀圖中的單個數據分塊，包括設置餅塊的標簽、值、顏色、樣式等屬性。

餅狀圖的繪制流程與柱狀圖一樣，主要以下幾個步驟：

餅圖初始化： 創建一個QChart對象，并設置其動畫選項。然后將該圖表對象設置為QGraphicsView的圖表，并啟用反鋸齒渲染。

// 餅圖初始化
QChart *chart = new QChart();
chart->setAnimationOptions(QChart::SeriesAnimations);
ui->graphicsView->setChart(chart);
ui->graphicsView->setRenderHint(QPainter::Antialiasing);

// 繪制餅圖
chart->removeAllSeries();

創建餅圖序列：為圖表創建一個新的餅圖序列(QPieSeries)，并通過循環的方式向序列中添加成績。

// 創建餅圖序列
QPieSeries *series = new QPieSeries();

// 餅圖中間空心的大小
series->setHoleSize(0.30);

// 添加分塊數據
for (int i=0;i<=4;i++)
{
    // 獲得QTreeWidgetItem的item
    QTreeWidgetItem* item=ui->treeWidget->topLevelItem(i);

    // 獲取分析對象，數學、英語、語文或平均分,添加一個餅圖分塊數據,標簽，數值
    series->append(item->text(0),item->text(1).toFloat());
}

添加分塊數據到餅圖： 從QTreeWidget中獲取每個分析對象（數學、英語、語文或平均分），并將其添加到餅圖序列中。

// 餅圖分塊
QPieSlice *slice;

// 設置每個分塊的標簽文字
for(int i=0;i<=4;i++)
{
    // 獲取分塊
    slice =series->slices().at(i);

    // 設置分塊的標簽
    slice->setLabel(slice->label()+QString::asprintf(": %.0f人, %.1f%%", slice->value(),slice->percentage()*100));

    // 信號與槽函數關聯，鼠標落在某個分塊上時，此分塊彈出
    connect(slice, SIGNAL(hovered(bool)),this, SLOT(on_PieSliceHighlight(bool)));
}

slice->setExploded(true);           // 最后一個設置為exploded
series->setLabelsVisible(true);     // 只影響當前的slices，必須添加完slice之后再設置
chart->addSeries(series);           // 添加餅圖序列

chart->legend()->setVisible(true);  // 圖例
chart->legend()->setAlignment(Qt::AlignRight);

設置餅圖分塊的標簽和槽函數關聯： 對于每個分塊，設置其標簽文字，包括數值和百分比，并關聯鼠標懸停事件的槽函數。

// 鼠標移入移出時觸發hovered信號
void MainWindow::on_PieSliceHighlight(bool show)
{
    QPieSlice *slice;
    slice=(QPieSlice *)sender();

    // 動態設置setExploded效果
    // slice->setLabelVisible(show);
    slice->setExploded(show);
}

上述代碼流程實現了在Qt中使用QPieSeries和QPieSlice繪制餅狀圖的功能，包括圖表的初始化、數據的設置、分塊標簽的添加、餅圖分塊的突出顯示等。在圖表中，每個分塊代表一種分析對象，標簽包含人數和百分比信息，運行后輸出如下效果；

1.3 創建堆疊圖

堆疊圖（Stacked Chart）用于展示多個數據系列的累積效果，即將不同系列的數據在同一數值點上進行堆疊顯示。這種圖表形式旨在突出整體的趨勢以及各組成部分的相對貢獻。

堆疊圖有多種形式，其中兩種常見的類型包括：

堆疊柱狀圖（Stacked Bar Chart）：在同一類別或數值點上，將不同系列的柱狀圖堆疊在一起。每個柱狀圖的高度表示該系列在該點上的數值，而整個柱狀圖的高度表示各個系列在該點上的累積總和。
堆疊面積圖（Stacked Area Chart）：在同一類別或數值點上，將不同系列的面積圖堆疊在一起。每個面積圖的面積表示該系列在該點上的數值，而整個堆疊面積圖的高度表示各個系列在該點上的累積總和。

堆疊圖的優勢在于能夠直觀地顯示各部分在整體中的相對比例，并清晰地展示隨時間或其他維度的變化。這種圖表類型通常用于比較多個系列的總體趨勢，并強調各個系列之間的相對貢獻。在堆疊圖中，每個系列的數值貢獻會在相同的數值點上疊加顯示，使得讀者能夠更容易比較各系列的相對大小。

堆疊圖的創建需要用到QStackedBarSeries和QBarCategoryAxis類，QStackedBarSeries 是 Qt Charts 模塊中用于創建堆疊柱狀圖的類。堆疊柱狀圖顯示多個柱狀系列的堆疊效果，每個柱狀系列由一個或多個柱狀條組成，這些柱狀條按照數據堆疊在一起，形成整體的柱狀圖。

以下是 QStackedBarSeries 的一些重要方法和屬性：

方法	描述
`QStackedBarSeries(QObject *parent = nullptr)`	構造函數，創建一個 `QStackedBarSeries` 對象。
`void append(QBarSet *set)`	將一個 `QBarSet` 添加到序列中。
`void append(QList<QBarSet *> sets)`	將一組 `QBarSet` 添加到序列中。
`QList<QBarSet *> barSets() const`	返回序列中的所有 `QBarSet`。
`void setLabelsVisible(bool visible)`	設置是否顯示柱狀圖的標簽。
`bool labelsVisible() const`	返回柱狀圖的標簽可見性。
`void setLabelsFormat(const QString &format)`	設置標簽的顯示格式。
`QString labelsFormat() const`	返回標簽的顯示格式。
`void setLabelsPosition(QAbstractBarSeries::LabelsPosition position)`	設置標簽的位置。
`QAbstractBarSeries::LabelsPosition labelsPosition() const`	返回標簽的位置。

QStackedBarSeries 通過添加不同的 QBarSet 對象來創建堆疊效果。每個 QBarSet 對象代表一個柱狀系列，它包含了一組柱狀條的數據。標簽、顏色和其他樣式屬性可以通過 QBarSet 進行定制。使用這些方法和屬性，可以方便地控制堆疊柱狀圖的外觀和行為，如下代碼則是堆疊圖創建的實現；

// 初始化疊加柱狀圖繪制窗口
QChart *chart = new QChart();
chart->setAnimationOptions(QChart::SeriesAnimations);
ui->graphicsView->setChart(chart);
ui->graphicsView->setRenderHint(QPainter::Antialiasing);

// 繪制疊加柱狀圖
chart->removeAllSeries();
chart->removeAxis(chart->axisX());
chart->removeAxis(chart->axisY());

// 創建三門課程的數據集
QBarSet *setMath = new QBarSet(theModel->horizontalHeaderItem(1)->text());
QBarSet *setChinese = new QBarSet(theModel->horizontalHeaderItem(2)->text());
QBarSet *setEnglish= new QBarSet(theModel->horizontalHeaderItem(3)->text());

// 添加前十個分數數據到數據集
for(int i=0;i<20;i++)
{
    setMath->append(theModel->item(i,1)->text().toInt());
    setChinese->append(theModel->item(i,2)->text().toInt());
    setEnglish->append(theModel->item(i,3)->text().toInt());
}

// 創建QStackedBarSeries對象并添加數據集
QStackedBarSeries *series = new QStackedBarSeries();
series->append(setMath);
series->append(setChinese);
series->append(setEnglish);
series->setLabelsVisible(true);

// 添加序列到圖表
chart->addSeries(series);

QStringList categories;

// 繪制前十個數據
for (int i=0;i<10;i++)
{
    categories <<theModel->item(i,0)->text();
}

// 類別坐標軸 作為橫軸
QBarCategoryAxis *axisX = new QBarCategoryAxis();
axisX->append(categories);
chart->setAxisX(axisX, series);
axisX->setRange(categories.at(0), categories.at(categories.count()-1));

// 數值坐標軸 作為縱軸
QValueAxis *axisY = new QValueAxis;
axisY->setRange(0, 300);
axisY->setTitleText("總分");
axisY->setTickCount(6);
axisY->setLabelFormat("%.0f");
chart->setAxisY(axisY, series);

// 設置圖表屬性
chart->legend()->setVisible(true);
chart->legend()->setAlignment(Qt::AlignBottom);

運行后，通過QBarSet保存課程數據集，最后增加橫軸縱軸區間，當數據被加載后，圖表則會輸出如下所示的數據集；

1.4 創建百分比圖

百分比圖（Percentage Chart）用于顯示各部分占整體的百分比關系的圖表。這種圖表通過以百分比形式展示每個部分在總體中所占比例，提供了一種直觀的方式來比較不同部分的相對大小。

百分比圖有多種形式，其中一些常見的類型包括：

百分比柱狀圖（Percentage Bar Chart）：類似于常規柱狀圖，但每個柱的高度表示相對于整體的百分比。
百分比堆疊柱狀圖（Percentage Stacked Bar Chart）：將柱疊加在一起，每個部分的高度表示相對于總體的百分比。
百分比餅狀圖（Percentage Pie Chart）：類似于餅狀圖，但每個扇形的角度或面積表示相對于整體的百分比。
百分比面積圖（Percentage Area Chart）：面積圖的每個區域表示相對于整體的百分比。
百分比堆疊面積圖（Percentage Stacked Area Chart）：將面積疊加在一起，每個區域的面積表示相對于總體的百分比。

這些圖表形式在不同情境下用于展示數據的占比關系，特別適用于需要強調相對比例的場景。百分比圖通常能夠幫助觀眾更容易地理解各部分在整體中的貢獻，是一種有力的數據可視化工具。

使用百分比圖時，注意確保數據的總和為100%。百分比圖在市場份額分析、調查結果的占比展示、資源分配比例等方面得到廣泛應用。

QPercentBarSeries 是 Qt Charts 模塊中用于繪制百分比柱狀圖的類。它派生自 QAbstractBarSeries 類，表示一個二維坐標系中的數據系列，其中的數據以百分比柱狀圖的形式呈現。

以下是關于 QPercentBarSeries 的一些方法以及說明：

方法	描述
`QPercentBarSeries()`	構造函數，創建一個 `QPercentBarSeries` 對象。
`~QPercentBarSeries()`	析構函數，釋放 `QPercentBarSeries` 對象。
`setLabelsVisible(bool)`	設置百分比柱狀圖上的數據標簽是否可見。
`labelsVisible()`	返回百分比柱狀圖上的數據標簽是否可見的狀態。
`setLabelsPosition(Position)`	設置百分比柱狀圖上的數據標簽位置，`Position` 是一個枚舉類型，表示標簽的位置，如上方、下方、內部等。
`labelsPosition()`	返回百分比柱狀圖上的數據標簽位置。
`setLabelsFormat(QString)`	設置百分比柱狀圖上的數據標簽的格式，使用字符串指定標簽的顯示格式。
`labelsFormat()`	返回百分比柱狀圖上的數據標簽的顯示格式。
`setPercentageVisible(bool)`	設置百分比柱狀圖上的百分比標簽是否可見。
`percentageVisible()`	返回百分比柱狀圖上的百分比標簽是否可見的狀態。
`setStackingGap(qreal)`	設置百分比柱狀圖中堆疊的百分比柱之間的間隙。
`stackingGap()`	返回百分比柱狀圖中堆疊的百分比柱之間的間隙。
`append(QBarSet*)`	在百分比柱狀圖中追加一個數據集。
`insert(int, QBarSet*)`	在百分比柱狀圖中插入一個數據集，參數為位置索引和 `QBarSet` 對象。
`remove(QBarSet*)`	從百分比柱狀圖中移除指定的數據集。
`take(int)`	從百分比柱狀圖中移除并返回指定位置的數據集。
`take(QBarSet*)`	從百分比柱狀圖中移除指定的數據集并返回。
`count()`	返回百分比柱狀圖中數據集的數量。
`barSets()`	返回百分比柱狀圖中所有數據集的列表。
`barWidth()`	返回百分比柱狀圖中百分比柱的寬度。
`barWidthChanged(qreal)`	當百分比柱狀圖中百分比柱的寬度發生變化時發出的信號，參數為新的寬度值。

QPercentBarSeries 類主要用于在圖表中繪制百分比柱狀圖，其中的數據集可以包含多個柱子，每個柱子表示一個百分比。

// 百分比柱狀圖初始化
QChart *chart = new QChart();
chart->setAnimationOptions(QChart::SeriesAnimations);
ui->graphicsView->setChart(chart);
ui->graphicsView->setRenderHint(QPainter::Antialiasing);

// 繪制百分比柱狀圖
chart->removeAllSeries();
chart->removeAxis(chart->axisX());
chart->removeAxis(chart->axisY());

// 創建數據集
QBarSet *setMath = new QBarSet(theModel->horizontalHeaderItem(1)->text());
QBarSet *setChinese = new QBarSet(theModel->horizontalHeaderItem(2)->text());
QBarSet *setEnglish= new QBarSet(theModel->horizontalHeaderItem(3)->text());

QTreeWidgetItem *item;
QStringList categories;

for (int i=0;i<=4;i++)
{
    // 從分數段統計數據表里獲取數據添加到數據集
    item=ui->treeWidget->topLevelItem(i);

    // 橫坐標的標簽
    categories<<item->text(0);

    // 添加數據到QBarSet中
    setMath->append(item->text(1).toFloat());
    setChinese->append(item->text(2).toFloat());
    setEnglish->append(item->text(3).toFloat());
}

// 添加序列
QPercentBarSeries *series = new QPercentBarSeries();
series->append(setMath);
series->append(setChinese);
series->append(setEnglish);
series->setLabelsVisible(true);
series->setLabelsFormat("@value人");
chart->addSeries(series);

// 添加橫坐標
QBarCategoryAxis *axisX = new QBarCategoryAxis();
axisX->append(categories);
chart->setAxisX(axisX, series);
axisX->setRange(categories.at(0), categories.at(categories.count()-1));

// 添加縱坐標
QValueAxis *axisY = new QValueAxis;
axisY->setRange(0, 100);
axisY->setTitleText("百分比");
axisY->setTickCount(6);
axisY->setLabelFormat("%.1f");
chart->setAxisY(axisY, series);

// 設置屬性
chart->legend()->setVisible(true);
chart->legend()->setAlignment(Qt::AlignRight);

運行后則可輸出不同分數段每一門成績的百分比分布情況，如下圖所示；

1.5 創建散點圖

散點圖（Scatter Plot）是一種二維圖表，用于顯示兩個變量之間的關系。散點圖的每個數據點由兩個數值組成，分別對應于圖表的橫軸和縱軸。通過在圖表中繪制這些點，可以觀察和分析變量之間的關聯性、趨勢、聚集程度等。

散點圖的特點包括：

數據點表示：每個數據點在圖表上表示為一個獨立的點，其中橫軸對應一個變量，縱軸對應另一個變量。
關系展示：散點圖主要用于展示兩個變量之間的關系，例如相關性、分布情況、趨勢等。
離散數據：適用于離散型數據，每個點表示一個具體的觀測值。
聚類發現：通過觀察數據點的分布，可以發現數據是否呈現出某種聚類模式。
異常值檢測：可以用于檢測異常值，即圖表中偏離正常分布的離群點。

散點圖的應用場景非常廣泛，常見的用途包括：

相關性分析：通過觀察散點圖，可以初步了解兩個變量之間的相關性，是進行相關性分析的一種可視化手段。
趨勢分析：散點圖可以用于觀察兩個變量之間是否存在趨勢，是進行趨勢分析的有力工具。
異常值檢測：通過識別離群點，可以發現數據中的異常值，有助于數據清理和分析的準確性。
聚類分析：觀察數據點的分布，可以發現是否存在某種聚類模式，對于數據的分組有一定幫助。

總體而言，散點圖是一種簡單而強大的工具，可用于初步探索和理解兩個變量之間的關系。

QSplineSeries 是 Qt Charts 模塊中用于繪制光滑曲線的類。它表示圖表中的一條曲線，通過一系列的數據點來定義曲線的形狀。

以下是關于 QSplineSeries 的一些方法以及說明：

方法	描述
`QSplineSeries(QObject *parent = nullptr)`	構造函數，創建一個 `QSplineSeries` 對象。
`~QSplineSeries()`	析構函數，釋放 `QSplineSeries` 對象。
`append(QPointF point)`	向曲線中追加一個數據點。
`append(QList<QPointF> points)`	向曲線中追加一組數據點。
`replace(int index, QPointF point)`	替換指定索引處的數據點。
`replace(QList<QPointF> points)`	替換曲線中的所有數據點。
`remove(int index)`	移除指定索引處的數據點。
`remove(int index, int count)`	移除從指定索引開始的指定數量的數據點。
`clear()`	清空曲線中的所有數據點。
`pointsVector()`	返回曲線的數據點。
`setUseOpenGL(bool enable)`	設置是否使用 OpenGL 進行繪制。
`useOpenGL()`	返回是否使用 OpenGL 進行繪制。
`setPen(const QPen &pen)`	設置曲線的畫筆，即曲線的顏色和樣式。
`pen()`	返回曲線的畫筆。
`setBrush(const QBrush &brush)`	設置曲線的畫刷，即填充顏色。
`brush()`	返回曲線的畫刷。
`setPointLabelsVisible(bool visible)`	設置是否顯示數據點的標簽。
`isPointLabelsVisible()`	返回數據點的標簽是否可見。
`setPointLabelsFormat(const QString &format)`	設置數據點標簽的顯示格式，支持使用占位符。
`pointLabelsFormat()`	返回數據點標簽的顯示格式。
`setPointLabelsColor(const QColor &color)`	設置數據點標簽的顏色。
`pointLabelsColor()`	返回數據點標簽的顏色。
`setPointLabelsFont(const QFont &font)`	設置數據點標簽的字體。
`pointLabelsFont()`	返回數據點標簽的字體。
`setPointsVisible(bool visible)`	設置是否顯示數據點。
`arePointsVisible()`	返回數據點是否可見。
`setPointLabelsClipping(bool clipping)`	設置是否裁剪超出繪圖區域的數據點標簽。
`isPointLabelsClipping()`	返回數據點標簽是否裁剪超出繪圖區域。
`clicked(QPointF point)`	鼠標點擊曲線時發出的信號，參數為鼠標點擊的數據點坐標。
`hovered(QPointF point, bool state)`	鼠標懸停在曲線上時發出的信號，參數為懸停狀態以及懸停位置的數據點坐標。
`pressed(QPointF point)`	鼠標按下曲線時發出的信號，參數為鼠標按下的數據點坐標。
`released(QPointF point)`	鼠標釋放曲線時發出的信號，參數為鼠標釋放的數據點坐標。
`doubleClicked(QPointF point)`	鼠標雙擊曲線時發出的信號，參數為鼠標雙擊的數據點坐標。

QSplineSeries 主要用于繪制光滑曲線，通過添加一系列的數據點，可以在圖表中呈現出相應的曲線形狀。

QScatterSeries 是 Qt Charts 模塊中用于繪制散點圖的類。它派生自 QXYSeries 類，用于表示圖表中的一組散點數據，通過一系列的坐標點來顯示離散的數據分布。

以下是關于 QScatterSeries 的一些方法以及說明：

方法	說明
`QScatterSeries(QObject *parent = nullptr)`	構造函數，創建一個 `QScatterSeries` 對象。
`~QScatterSeries()`	析構函數，釋放 `QScatterSeries` 對象。
`append(QPointF point)`	向散點圖中追加一個數據點。
`append(QList<QPointF> points)`	向散點圖中追加一組數據點。
`replace(int index, QPointF point)`	替換指定索引處的數據點。
`replace(QList<QPointF> points)`	替換散點圖中的所有數據點。
`remove(int index)`	移除指定索引處的數據點。
`remove(int index, int count)`	移除從指定索引開始的指定數量的數據點。
`clear()`	清空散點圖中的所有數據點。
`pointsVector()`	返回散點圖的數據點。
`setMarkerShape(QScatterSeries::MarkerShape shape)`	設置散點的形狀，可以是圓形、方形等。
`markerShape()`	返回散點的形狀。
`setMarkerSize(qreal size)`	設置散點的大小。
`markerSize()`	返回散點的大小。
`setPen(const QPen &pen)`	設置散點圖的畫筆，即散點的邊框顏色和樣式。
`pen()`	返回散點圖的畫筆。
`setBrush(const QBrush &brush)`	設置散點圖的畫刷，即散點的填充顏色。
`brush()`	返回散點圖的畫刷。
`setBorderColor(const QColor &color)`	設置散點的邊框顏色。
`borderColor()`	返回散點的邊框顏色。
`setBackgroundColor(const QColor &color)`	設置散點的背景顏色。
`backgroundColor()`	返回散點的背景顏色。
`setBorderColor(const QColor &color)`	設置散點的邊框顏色。
`borderColor()`	返回散點的邊框顏色。
`setBrush(const QBrush &brush)`	設置散點的畫刷，即填充顏色。
`brush()`	返回散點的畫刷。
`setPen(const QPen &pen)`	設置散點的畫筆，即邊框顏色和樣式。
`pen()`	返回散點的畫筆。
`setUseOpenGL(bool enable)`	設置是否使用 OpenGL 進行繪制。
`useOpenGL()`	返回是否使用 OpenGL 進行繪制。
`setMarkerShape(QScatterSeries::MarkerShape shape)`	設置散點的形狀，可以是圓形、方形等。
`markerShape()`	返回散點的形狀。
`setMarkerSize(qreal size)`	設置散點的大小。
`markerSize()`	返回散點的大小。
`setMarkerColor(const QColor &color)`	設置散點的顏色。
`markerColor()`	返回散點的顏色。
`clicked(QPointF point)`	鼠標點擊散點時發出的信號，參數為鼠標點擊的數據點坐標。
`hovered(QPointF point, bool state)`	鼠標懸停在散點上時發出的信

繪制散點圖實現代碼如下所示；

// 散點圖初始化
QChart *chart = new QChart();
chart->setAnimationOptions(QChart::SeriesAnimations);
ui->graphicsView->setChart(chart);
ui->graphicsView->setRenderHint(QPainter::Antialiasing);

// 清空繪圖區
chart->removeAllSeries();
chart->removeAxis(chart->axisX());
chart->removeAxis(chart->axisY());

// 光滑曲線序列
QSplineSeries *seriesLine = new QSplineSeries();
seriesLine->setName("曲線");
QPen pen;
pen.setColor(Qt::blue);
pen.setWidth(2);
seriesLine->setColor(Qt::blue);
seriesLine->setPen(pen);

// 散點序列
QScatterSeries *series0 = new QScatterSeries();
series0->setName("散點");
series0->setMarkerShape(QScatterSeries::MarkerShapeCircle);
series0->setBorderColor(Qt::black);
series0->setBrush(QBrush(Qt::red));
series0->setMarkerSize(12);

// 隨機數種子
qsrand(QTime::currentTime().second());

// 設置曲線隨機數
for (int i=0;i<10;i++)
{
    int x=(qrand() % 20);    // 0到20之間的隨機數
    int y=(qrand() % 20);
    series0->append(x,y);    // 散點序列
    seriesLine->append(x,y); // 光滑曲線序列
}

chart->addSeries(series0);
chart->addSeries(seriesLine);

// 增加Y坐標軸（可注釋）
QValueAxis *axisY = new QValueAxis;
axisY->setRange(0, 20);
axisY->setTitleText("Y坐標");
axisY->setTickCount(11);
axisY->setLabelFormat("%.0f");
axisY->setGridLineVisible(true);
chart->setAxisY(axisY, series0);
chart->setAxisY(axisY, seriesLine);

// 增加X坐標軸（可注釋）
QValueAxis *axisX = new QValueAxis;
axisX->setRange(0, 20);
axisX->setTitleText("X");
axisX->setTickCount(11);
axisX->setLabelFormat("%.0f");
axisX->setGridLineVisible(true);
chart->setAxisX(axisX, series0);
chart->setAxisX(axisX, seriesLine);

// 創建缺省的坐標軸（默認缺省值）
chart->createDefaultAxes();
chart->axisX()->setTitleText("X 軸");
chart->axisX()->setRange(-2,22);

chart->axisY()->setTitleText("Y 軸");
chart->axisY()->setRange(-2,22);

chart->legend()->setVisible(true);
chart->legend()->setAlignment(Qt::AlignRight);

// 綁定槽函數，用于點擊圖例顯示與隱藏數據
foreach (QLegendMarker* marker, chart->legend()->markers())
{
    QObject::disconnect(marker, SIGNAL(clicked()), this, SLOT(on_chartBarLegendMarkerClicked()));
    QObject::connect(marker, SIGNAL(clicked()), this, SLOT(on_chartBarLegendMarkerClicked()));
}

運行上述代碼則可實現輸出隨機散點圖，其中右側散點與曲線可以進行自定義隱藏與顯示，如下圖所示；

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：分页合理化是什么？
下一篇：【UniApp】-uni-app-动态计