C++ Qt開發(fā):Charts繪制各類圖表詳解
Qt 是一個跨平臺C++圖形界面開發(fā)庫,利用Qt可以快速開發(fā)跨平臺窗體應(yīng)用程序,在Qt中我們可以通過拖拽的方式將不同組件放到指定的位置,實現(xiàn)圖形化開發(fā)極大的方便了開發(fā)效率,本章將重點介紹TreeWidget與QCharts的常用方法及靈活運用。
在之前的文章中筆者介紹了如何使用QCharts模塊來繪制簡單的折線圖并對通用API接口進(jìn)行了概括,本章我們通過在TreeWidget組件中提取數(shù)據(jù),并依次實現(xiàn)柱狀圖、餅狀圖、堆疊圖、百分比圖、散點圖等。
1.1 創(chuàng)建柱狀圖
柱狀圖(Bar Chart)用于顯示各類別之間的數(shù)量關(guān)系。它通過在一個坐標(biāo)系中繪制垂直的矩形條(柱)來表示數(shù)據(jù)。每個柱的高度表示相應(yīng)類別的數(shù)量或數(shù)值,柱的寬度一般是固定的,類別之間的間隔可以根據(jù)需要調(diào)整。
柱狀圖主要用于比較不同類別的數(shù)值或數(shù)量,幫助觀察數(shù)據(jù)的分布趨勢、對比不同類別的數(shù)據(jù)大小,以及發(fā)現(xiàn)數(shù)據(jù)之間的關(guān)系。柱狀圖通常在橫軸上表示不同的類別,縱軸上表示數(shù)量或數(shù)值。
以下是柱狀圖的一些主要特點:
- 垂直柱狀圖(Vertical Bar Chart):柱狀圖的柱是垂直排列的,縱軸表示數(shù)值或數(shù)量。
- 水平柱狀圖(Horizontal Bar Chart):柱狀圖的柱是水平排列的,橫軸表示數(shù)值或數(shù)量。
- 分組柱狀圖(Grouped Bar Chart):將柱按照類別分組,同一組內(nèi)的柱一般在相同的位置。
- 堆疊柱狀圖(Stacked Bar Chart):將柱疊加在一起,柱的高度表示總和。
- 百分比柱狀圖(Percentage Bar Chart):每個柱的高度表示相對于總和的百分比。
柱狀圖是數(shù)據(jù)可視化中常用的工具之一,易于理解且能夠直觀地傳達(dá)信息。在業(yè)務(wù)、科學(xué)研究、金融等領(lǐng)域,柱狀圖被廣泛用于展示數(shù)據(jù)的分布和趨勢。在Qt中柱狀圖的繪制離不開三個類的支持,其分別是QBarSet、QBarSeries、QBarCategoryAxis這三個類提供了用于操作和管理條形圖數(shù)據(jù)集的方法。
QBarSet類主要用于創(chuàng)建或表示一個柱狀圖的集合元素。以下是關(guān)于QBarSet的主要方法的說明和概述,以表格形式呈現(xiàn):
| 方法 | 描述 |
|---|---|
QBarSet(const QString &label = QString()) |
構(gòu)造函數(shù),創(chuàng)建一個空的 QBarSet 對象,可以通過提供標(biāo)簽進(jìn)行初始化。 |
void append(qreal value) |
將一個值添加到數(shù)據(jù)集的末尾。 |
void append(const QList<qreal> &values) |
將一組值添加到數(shù)據(jù)集的末尾。 |
void replace(int index, qreal value) |
替換數(shù)據(jù)集中指定索引位置的值。 |
void replace(const QList<qreal> &values) |
用提供的一組值替換整個數(shù)據(jù)集。 |
void clear() |
清除數(shù)據(jù)集中的所有值。 |
int count() const |
返回數(shù)據(jù)集中值的數(shù)量。 |
bool isEmpty() const |
檢查數(shù)據(jù)集是否為空。 |
QString label() const |
返回數(shù)據(jù)集的標(biāo)簽。 |
void setLabel(const QString &label) |
設(shè)置數(shù)據(jù)集的標(biāo)簽。 |
qreal at(int index) const |
返回數(shù)據(jù)集中指定索引位置的值。 |
QList<qreal> values() const |
返回包含數(shù)據(jù)集所有值的列表。 |
QBarSeries 用于表示條形圖數(shù)據(jù)系列。以下是 QBarSeries 類的一些主要方法和概述:
| 方法 | 描述 |
|---|---|
QBarSeries(QObject *parent = nullptr) |
構(gòu)造函數(shù),創(chuàng)建一個空的 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 對象的數(shù)量。 |
bool isEmpty() const |
檢查系列是否為空。 |
QBarSet* at(int index) const |
返回系列中指定索引位置的 QBarSet 對象。 |
QList<QBarSet*> barSets() const |
返回包含系列所有 QBarSet 對象的列表。 |
QBarCategoryAxis 表示條形圖橫坐標(biāo),用于管理和顯示條形圖中的分類軸,其中每個條形圖都屬于特定的類別。以下是 QBarCategoryAxis 類的一些主要方法和概述:
| 方法 | 描述 |
|---|---|
QBarCategoryAxis(QObject *parent = nullptr) |
構(gòu)造函數(shù),創(chuàng)建一個空的 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) |
從指定索引位置開始移除指定數(shù)量的類別。 |
void clear() |
清除軸中的所有類別。 |
int count() const |
返回軸中類別的數(shù)量。 |
QString categoryAt(int index) const |
返回軸中指定索引位置的類別。 |
QStringList categories() const |
返回包含軸所有類別的列表。 |
void setCategories(const QStringList &categories) |
設(shè)置軸的類別。 |
void setStartValue(qreal value) |
設(shè)置軸的起始值。 |
qreal startValue() const |
返回軸的起始值。 |
void setRange(qreal min, qreal max) |
設(shè)置軸的范圍。 |
void append(const QVector<QPointF> &points) |
將一組點添加到軸的末尾,用于自動設(shè)置類別。 |
void replace(const QVector<QPointF> &points) |
用提供的一組點替換整個軸,用于自動設(shè)置類別。 |
如下代碼是使用 Qt 的圖表模塊創(chuàng)建一個包含柱狀圖和折線圖的圖表,并顯示在 QGraphicsView 控件中,在MainWindow::MainWindow構(gòu)造函數(shù)中我們可以使用如下代碼實現(xiàn)柱狀圖的創(chuàng)建。
圖表初始化:創(chuàng)建一個 QChart 對象,并設(shè)置圖表的標(biāo)題和動畫效果。然后將圖表設(shè)置給 ui->graphicsView 控件,同時啟用抗鋸齒渲染。
QChart *chart = new QChart();
chart->setTitle("柱狀圖統(tǒng)計");
chart->setAnimationOptions(QChart::SeriesAnimations);
// 為graphicsView設(shè)置chart
ui->graphicsView->setChart(chart);
ui->graphicsView->setRenderHint(QPainter::Antialiasing);
// 構(gòu)造柱狀圖
chart =ui->graphicsView->chart();
chart->removeAllSeries(); // 刪除所有序列
chart->removeAxis(chart->axisX()); // 刪除坐標(biāo)軸
chart->removeAxis(chart->axisY()); // 刪除坐標(biāo)軸
創(chuàng)建數(shù)據(jù)集:構(gòu)造三個 QBarSet 對象,分別表示數(shù)學(xué)、語文、英語的數(shù)據(jù)集。同時創(chuàng)建一個 QLineSeries 對象,表示平均分?jǐn)?shù)據(jù)集,并設(shè)置線條的顏色和寬度。
QBarSet *setMath = new QBarSet(theModel->horizontalHeaderItem(1)->text()); // 數(shù)學(xué)字段
QBarSet *setChinese = new QBarSet(theModel->horizontalHeaderItem(2)->text()); // 語文字段
QBarSet *setEnglish= new QBarSet(theModel->horizontalHeaderItem(3)->text()); // 英語字段
// 創(chuàng)建折線線條
QLineSeries *Line = new QLineSeries();
Line->setName(theModel->horizontalHeaderItem(4)->text()); // 表示平均分
QPen pen;
pen.setColor(Qt::red); // 使用紅色
pen.setWidth(2); // 設(shè)置寬度
Line->setPen(pen); // 繪制
添加數(shù)據(jù):遍歷前10個數(shù)據(jù)行,將數(shù)學(xué)、語文、英語的成績和平均分添加到相應(yīng)的數(shù)據(jù)集中。
for(int i=0;i< 10;i++)
{
// 從數(shù)據(jù)模型獲取數(shù)據(jù)
setMath->append(theModel->item(i,1)->text().toInt()); // 數(shù)學(xué)
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())); // 平均分
}
創(chuàng)建柱狀圖序列:使用 QBarSeries 創(chuàng)建一個柱狀圖序列,并將三個數(shù)據(jù)集添加到序列中。同時,將折線圖序列也添加到圖表中。
cppCopy codeQBarSeries *series = new QBarSeries();
series->append(setMath);
series->append(setChinese);
series->append(setEnglish);
chart->addSeries(series);
chart->addSeries(Line);
設(shè)置坐標(biāo)軸:創(chuàng)建橫坐標(biāo)軸 axisX 和縱坐標(biāo)軸 axisY,設(shè)置它們的范圍、標(biāo)簽等信息,然后將它們與相應(yīng)的序列關(guān)聯(lián)。
// 創(chuàng)建柱狀圖序列 QBarSeries 并添加三個數(shù)據(jù)集
QBarSeries *series = new QBarSeries();
series->append(setMath);
series->append(setChinese);
series->append(setEnglish);
chart->addSeries(series); // 添加柱狀圖序列
chart->addSeries(Line); // 添加折線圖序列
// 用于橫坐標(biāo)在字符串列表 即UID
QStringList categories;
for (int i=0;i<10;i++)
{
categories <<theModel->item(i,0)->text();
}
// 柱狀圖的坐標(biāo)軸
QBarCategoryAxis *axisX = new QBarCategoryAxis();
axisX->append(categories); // 添加橫坐標(biāo)文字列表
chart->setAxisX(axisX, series); // 設(shè)置橫坐標(biāo)
chart->setAxisX(axisX, Line); // 設(shè)置橫坐標(biāo)
// 設(shè)置坐標(biāo)范圍
axisX->setRange(categories.at(0), categories.at(categories.count()-1));
// 數(shù)值型坐標(biāo)作為縱軸
QValueAxis *axisY = new QValueAxis;
axisY->setRange(0, 100);
axisY->setTitleText("分?jǐn)?shù)");
axisY->setTickCount(6);
axisY->setLabelFormat("%.0f");
圖例顯示設(shè)置:顯示圖例,并設(shè)置圖例在底部對齊。
chart->setAxisY(axisY, series);
chart->setAxisY(axisY, Line);
chart->legend()->setVisible(true);
chart->legend()->setAlignment(Qt::AlignBottom);
這樣,你就創(chuàng)建了一個包含柱狀圖和折線圖的圖表,并將其顯示在 QGraphicsView 控件中,運行后則可以得到如下圖所示的圖例;

1.2 創(chuàng)建餅狀圖
餅狀圖(Pie Chart)用于展示各部分占整體的比例關(guān)系。它通過在一個圓形區(qū)域內(nèi)繪制扇形來表示數(shù)據(jù)的相對大小。整個圓表示總體,而每個扇形的弧長(或面積)表示相應(yīng)類別的數(shù)量或比例。
餅狀圖的主要特點包括:
- 占比表示:每個扇形的大小表示相應(yīng)類別在總體中所占的比例,從而直觀地展示各類別之間的相對關(guān)系。
- 圓形布局:餅狀圖的數(shù)據(jù)以圓形的方式呈現(xiàn),使得用戶能夠輕松比較各部分的大小。
- 清晰易懂:餅狀圖通常用于表示數(shù)據(jù)的相對比例,特別適用于展示類別之間的占比關(guān)系,非常直觀。
- 單一變量:餅狀圖適合展示單一變量的占比關(guān)系,不適用于多個變量或時間序列的比較。
- 限制數(shù)據(jù)量:由于餅狀圖是基于整個圓的,適合表示少量類別的占比關(guān)系。當(dāng)類別過多時,可能導(dǎo)致圖形復(fù)雜,難以解讀。
餅狀圖常見的應(yīng)用場景包括市場份額分析、調(diào)查結(jié)果的占比展示、資源分配比例等。然而,有時候,為了更好地表達(dá)數(shù)據(jù),也會使用改進(jìn)版的餅狀圖,如環(huán)形圖(Donut Chart)等。
QPieSeries 是 Qt Charts 模塊中用于繪制餅狀圖的數(shù)據(jù)序列類。它派生自 QAbstractSeries 類,用于管理和展示餅狀圖中的數(shù)據(jù)。以下是 QPieSeries 類的一些常用方法和屬性,以表格形式概述:
| 方法 | 描述 |
|---|---|
QPieSeries(QObject *parent = nullptr) |
構(gòu)造函數(shù),創(chuàng)建一個 QPieSeries 對象。 |
~QPieSeries() |
析構(gòu)函數(shù),釋放 QPieSeries 對象。 |
append(QPieSlice *slice) |
向餅狀圖序列中追加一個餅塊。 |
insert(int index, QPieSlice *slice) |
在指定位置插入一個餅塊。 |
remove(QPieSlice *slice) |
從餅狀圖序列中移除指定的餅塊。 |
clear() |
清除餅狀圖序列中的所有餅塊。 |
slices() |
返回餅狀圖序列中的所有餅塊。 |
count() |
返回餅狀圖序列中的餅塊數(shù)量。 |
at(int index) |
返回餅狀圖序列中指定索引位置的餅塊。 |
setVisible(bool visible) |
設(shè)置餅狀圖序列的可見性。 |
isVisible() |
返回餅狀圖序列的可見性。 |
setHoleSize(double size) |
設(shè)置餅狀圖中間空心的大小,范圍為 [0.0, 1.0],0.0 表示沒有空心,1.0 表示整個餅狀圖都是空心。 |
holeSize() |
返回餅狀圖中間空心的大小。 |
setPieSize(double size) |
設(shè)置餅狀圖的大小,范圍為 [0.0, 1.0],默認(rèn)為 1.0。 |
pieSize() |
返回餅狀圖的大小。 |
setLabelsVisible(bool visible) |
設(shè)置餅塊的標(biāo)簽是否可見。 |
labelsVisible() |
返回餅塊的標(biāo)簽是否可見。 |
setLabelsPosition(QPieSlice::LabelPosition position) |
設(shè)置餅塊標(biāo)簽的位置。 |
labelsPosition() |
返回餅塊標(biāo)簽的位置。 |
setLabelsPrecision(int precision) |
設(shè)置餅塊標(biāo)簽顯示的小數(shù)位數(shù)。 |
labelsPrecision() |
返回餅塊標(biāo)簽顯示的小數(shù)位數(shù)。 |
clicked(QPieSlice *slice) |
點擊餅塊時發(fā)出的信號,參數(shù)為被點擊的餅塊。 |
hovered(QPieSlice *slice, bool state) |
鼠標(biāo)懸停在餅塊上時發(fā)出的信號,參數(shù)為被懸停的餅塊和懸停狀態(tài)。 |
pressed(QPieSlice *slice) |
鼠標(biāo)按下餅塊時發(fā)出的信號,參數(shù)為被按下的餅塊。 |
released(QPieSlice *slice) |
鼠標(biāo)釋放餅塊時發(fā)出的信號,參數(shù)為被釋放的餅塊。 |
QPieSlice 是 Qt Charts 模塊中用于表示餅狀圖中的單個餅塊的類。每個 QPieSlice 對象都代表餅狀圖中的一個數(shù)據(jù)分塊。
以下是關(guān)于 QPieSlice 的一些方法以及說明:
| 方法 | 描述 |
|---|---|
QPieSlice(qreal value, QString label) |
構(gòu)造函數(shù),創(chuàng)建一個帶有給定值和標(biāo)簽的 QPieSlice 對象。 |
~QPieSlice() |
析構(gòu)函數(shù),釋放 QPieSlice 對象。 |
setLabel(QString label) |
設(shè)置餅塊的標(biāo)簽文字。 |
label() |
返回餅塊的標(biāo)簽文字。 |
setValue(qreal value) |
設(shè)置餅塊的值。 |
value() |
返回餅塊的值。 |
setExploded(bool exploded) |
設(shè)置餅塊是否為爆炸狀態(tài),即是否與餅圖分離。 |
isExploded() |
返回餅塊是否為爆炸狀態(tài)。 |
setPieSeries(QPieSeries *series) |
設(shè)置餅塊所屬的 QPieSeries 對象。 |
pieSeries() |
返回餅塊所屬的 QPieSeries 對象。 |
setBrush(const QBrush &brush) |
設(shè)置餅塊的畫刷,即填充顏色。 |
brush() |
返回餅塊的畫刷。 |
setLabelBrush(const QBrush &brush) |
設(shè)置餅塊標(biāo)簽的畫刷,即標(biāo)簽的顏色。 |
labelBrush() |
返回餅塊標(biāo)簽的畫刷。 |
setPen(const QPen &pen) |
設(shè)置餅塊的畫筆,即邊框顏色和樣式。 |
pen() |
返回餅塊的畫筆。 |
setLabelVisible(bool visible) |
設(shè)置餅塊標(biāo)簽是否可見。 |
isLabelVisible() |
返回餅塊標(biāo)簽是否可見。 |
setExplodeDistanceFactor(qreal factor) |
設(shè)置餅塊爆炸時的距離因子,即與餅圖分離的距離。 |
explodeDistanceFactor() |
返回餅塊爆炸時的距離因子。 |
setPercentage(qreal percentage) |
設(shè)置餅塊的百分比值。 |
percentage() |
返回餅塊的百分比值。 |
clicked(bool state) |
鼠標(biāo)點擊餅塊時發(fā)出的信號,參數(shù)為鼠標(biāo)點擊的狀態(tài)(按下或釋放)。 |
hovered(bool state) |
鼠標(biāo)懸停在餅塊上時發(fā)出的信號,參數(shù)為懸停狀態(tài)。 |
pressed() |
鼠標(biāo)按下餅塊時發(fā)出的信號。 |
released() |
鼠標(biāo)釋放餅塊時發(fā)出的信號。 |
QPieSlice 主要用于配置和管理餅狀圖中的單個數(shù)據(jù)分塊,包括設(shè)置餅塊的標(biāo)簽、值、顏色、樣式等屬性。
餅狀圖的繪制流程與柱狀圖一樣,主要以下幾個步驟:
餅圖初始化: 創(chuàng)建一個QChart對象,并設(shè)置其動畫選項。然后將該圖表對象設(shè)置為QGraphicsView的圖表,并啟用反鋸齒渲染。
// 餅圖初始化
QChart *chart = new QChart();
chart->setAnimationOptions(QChart::SeriesAnimations);
ui->graphicsView->setChart(chart);
ui->graphicsView->setRenderHint(QPainter::Antialiasing);
// 繪制餅圖
chart->removeAllSeries();
創(chuàng)建餅圖序列:為圖表創(chuàng)建一個新的餅圖序列(QPieSeries),并通過循環(huán)的方式向序列中添加成績。
// 創(chuàng)建餅圖序列
QPieSeries *series = new QPieSeries();
// 餅圖中間空心的大小
series->setHoleSize(0.30);
// 添加分塊數(shù)據(jù)
for (int i=0;i<=4;i++)
{
// 獲得QTreeWidgetItem的item
QTreeWidgetItem* item=ui->treeWidget->topLevelItem(i);
// 獲取分析對象,數(shù)學(xué)、英語、語文或平均分,添加一個餅圖分塊數(shù)據(jù),標(biāo)簽,數(shù)值
series->append(item->text(0),item->text(1).toFloat());
}
添加分塊數(shù)據(jù)到餅圖: 從QTreeWidget中獲取每個分析對象(數(shù)學(xué)、英語、語文或平均分),并將其添加到餅圖序列中。
// 餅圖分塊
QPieSlice *slice;
// 設(shè)置每個分塊的標(biāo)簽文字
for(int i=0;i<=4;i++)
{
// 獲取分塊
slice =series->slices().at(i);
// 設(shè)置分塊的標(biāo)簽
slice->setLabel(slice->label()+QString::asprintf(": %.0f人, %.1f%%", slice->value(),slice->percentage()*100));
// 信號與槽函數(shù)關(guān)聯(lián),鼠標(biāo)落在某個分塊上時,此分塊彈出
connect(slice, SIGNAL(hovered(bool)),this, SLOT(on_PieSliceHighlight(bool)));
}
slice->setExploded(true); // 最后一個設(shè)置為exploded
series->setLabelsVisible(true); // 只影響當(dāng)前的slices,必須添加完slice之后再設(shè)置
chart->addSeries(series); // 添加餅圖序列
chart->legend()->setVisible(true); // 圖例
chart->legend()->setAlignment(Qt::AlignRight);
設(shè)置餅圖分塊的標(biāo)簽和槽函數(shù)關(guān)聯(lián): 對于每個分塊,設(shè)置其標(biāo)簽文字,包括數(shù)值和百分比,并關(guān)聯(lián)鼠標(biāo)懸停事件的槽函數(shù)。
// 鼠標(biāo)移入移出時觸發(fā)hovered信號
void MainWindow::on_PieSliceHighlight(bool show)
{
QPieSlice *slice;
slice=(QPieSlice *)sender();
// 動態(tài)設(shè)置setExploded效果
// slice->setLabelVisible(show);
slice->setExploded(show);
}
上述代碼流程實現(xiàn)了在Qt中使用QPieSeries和QPieSlice繪制餅狀圖的功能,包括圖表的初始化、數(shù)據(jù)的設(shè)置、分塊標(biāo)簽的添加、餅圖分塊的突出顯示等。在圖表中,每個分塊代表一種分析對象,標(biāo)簽包含人數(shù)和百分比信息,運行后輸出如下效果;

1.3 創(chuàng)建堆疊圖
堆疊圖(Stacked Chart)用于展示多個數(shù)據(jù)系列的累積效果,即將不同系列的數(shù)據(jù)在同一數(shù)值點上進(jìn)行堆疊顯示。這種圖表形式旨在突出整體的趨勢以及各組成部分的相對貢獻(xiàn)。
堆疊圖有多種形式,其中兩種常見的類型包括:
- 堆疊柱狀圖(Stacked Bar Chart):在同一類別或數(shù)值點上,將不同系列的柱狀圖堆疊在一起。每個柱狀圖的高度表示該系列在該點上的數(shù)值,而整個柱狀圖的高度表示各個系列在該點上的累積總和。
- 堆疊面積圖(Stacked Area Chart):在同一類別或數(shù)值點上,將不同系列的面積圖堆疊在一起。每個面積圖的面積表示該系列在該點上的數(shù)值,而整個堆疊面積圖的高度表示各個系列在該點上的累積總和。
堆疊圖的優(yōu)勢在于能夠直觀地顯示各部分在整體中的相對比例,并清晰地展示隨時間或其他維度的變化。這種圖表類型通常用于比較多個系列的總體趨勢,并強(qiáng)調(diào)各個系列之間的相對貢獻(xiàn)。在堆疊圖中,每個系列的數(shù)值貢獻(xiàn)會在相同的數(shù)值點上疊加顯示,使得讀者能夠更容易比較各系列的相對大小。
堆疊圖的創(chuàng)建需要用到QStackedBarSeries和QBarCategoryAxis類,QStackedBarSeries 是 Qt Charts 模塊中用于創(chuàng)建堆疊柱狀圖的類。堆疊柱狀圖顯示多個柱狀系列的堆疊效果,每個柱狀系列由一個或多個柱狀條組成,這些柱狀條按照數(shù)據(jù)堆疊在一起,形成整體的柱狀圖。
以下是 QStackedBarSeries 的一些重要方法和屬性:
| 方法 | 描述 |
|---|---|
QStackedBarSeries(QObject *parent = nullptr) |
構(gòu)造函數(shù),創(chuàng)建一個 QStackedBarSeries 對象。 |
void append(QBarSet *set) |
將一個 QBarSet 添加到序列中。 |
void append(QList<QBarSet *> sets) |
將一組 QBarSet 添加到序列中。 |
QList<QBarSet *> barSets() const |
返回序列中的所有 QBarSet。 |
void setLabelsVisible(bool visible) |
設(shè)置是否顯示柱狀圖的標(biāo)簽。 |
bool labelsVisible() const |
返回柱狀圖的標(biāo)簽可見性。 |
void setLabelsFormat(const QString &format) |
設(shè)置標(biāo)簽的顯示格式。 |
QString labelsFormat() const |
返回標(biāo)簽的顯示格式。 |
void setLabelsPosition(QAbstractBarSeries::LabelsPosition position) |
設(shè)置標(biāo)簽的位置。 |
QAbstractBarSeries::LabelsPosition labelsPosition() const |
返回標(biāo)簽的位置。 |
QStackedBarSeries 通過添加不同的 QBarSet 對象來創(chuàng)建堆疊效果。每個 QBarSet 對象代表一個柱狀系列,它包含了一組柱狀條的數(shù)據(jù)。標(biāo)簽、顏色和其他樣式屬性可以通過 QBarSet 進(jìn)行定制。使用這些方法和屬性,可以方便地控制堆疊柱狀圖的外觀和行為,如下代碼則是堆疊圖創(chuàng)建的實現(xiàn);
// 初始化疊加柱狀圖繪制窗口
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());
// 創(chuàng)建三門課程的數(shù)據(jù)集
QBarSet *setMath = new QBarSet(theModel->horizontalHeaderItem(1)->text());
QBarSet *setChinese = new QBarSet(theModel->horizontalHeaderItem(2)->text());
QBarSet *setEnglish= new QBarSet(theModel->horizontalHeaderItem(3)->text());
// 添加前十個分?jǐn)?shù)數(shù)據(jù)到數(shù)據(jù)集
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());
}
// 創(chuàng)建QStackedBarSeries對象并添加數(shù)據(jù)集
QStackedBarSeries *series = new QStackedBarSeries();
series->append(setMath);
series->append(setChinese);
series->append(setEnglish);
series->setLabelsVisible(true);
// 添加序列到圖表
chart->addSeries(series);
QStringList categories;
// 繪制前十個數(shù)據(jù)
for (int i=0;i<10;i++)
{
categories <<theModel->item(i,0)->text();
}
// 類別坐標(biāo)軸 作為橫軸
QBarCategoryAxis *axisX = new QBarCategoryAxis();
axisX->append(categories);
chart->setAxisX(axisX, series);
axisX->setRange(categories.at(0), categories.at(categories.count()-1));
// 數(shù)值坐標(biāo)軸 作為縱軸
QValueAxis *axisY = new QValueAxis;
axisY->setRange(0, 300);
axisY->setTitleText("總分");
axisY->setTickCount(6);
axisY->setLabelFormat("%.0f");
chart->setAxisY(axisY, series);
// 設(shè)置圖表屬性
chart->legend()->setVisible(true);
chart->legend()->setAlignment(Qt::AlignBottom);
運行后,通過QBarSet保存課程數(shù)據(jù)集,最后增加橫軸縱軸區(qū)間,當(dāng)數(shù)據(jù)被加載后,圖表則會輸出如下所示的數(shù)據(jù)集;

1.4 創(chuàng)建百分比圖
百分比圖(Percentage Chart)用于顯示各部分占整體的百分比關(guān)系的圖表。這種圖表通過以百分比形式展示每個部分在總體中所占比例,提供了一種直觀的方式來比較不同部分的相對大小。
百分比圖有多種形式,其中一些常見的類型包括:
- 百分比柱狀圖(Percentage Bar Chart):類似于常規(guī)柱狀圖,但每個柱的高度表示相對于整體的百分比。
- 百分比堆疊柱狀圖(Percentage Stacked Bar Chart):將柱疊加在一起,每個部分的高度表示相對于總體的百分比。
- 百分比餅狀圖(Percentage Pie Chart):類似于餅狀圖,但每個扇形的角度或面積表示相對于整體的百分比。
- 百分比面積圖(Percentage Area Chart):面積圖的每個區(qū)域表示相對于整體的百分比。
- 百分比堆疊面積圖(Percentage Stacked Area Chart):將面積疊加在一起,每個區(qū)域的面積表示相對于總體的百分比。
這些圖表形式在不同情境下用于展示數(shù)據(jù)的占比關(guān)系,特別適用于需要強(qiáng)調(diào)相對比例的場景。百分比圖通常能夠幫助觀眾更容易地理解各部分在整體中的貢獻(xiàn),是一種有力的數(shù)據(jù)可視化工具。
使用百分比圖時,注意確保數(shù)據(jù)的總和為100%。百分比圖在市場份額分析、調(diào)查結(jié)果的占比展示、資源分配比例等方面得到廣泛應(yīng)用。
QPercentBarSeries 是 Qt Charts 模塊中用于繪制百分比柱狀圖的類。它派生自 QAbstractBarSeries 類,表示一個二維坐標(biāo)系中的數(shù)據(jù)系列,其中的數(shù)據(jù)以百分比柱狀圖的形式呈現(xiàn)。
以下是關(guān)于 QPercentBarSeries 的一些方法以及說明:
| 方法 | 描述 |
|---|---|
QPercentBarSeries() |
構(gòu)造函數(shù),創(chuàng)建一個 QPercentBarSeries 對象。 |
~QPercentBarSeries() |
析構(gòu)函數(shù),釋放 QPercentBarSeries 對象。 |
setLabelsVisible(bool) |
設(shè)置百分比柱狀圖上的數(shù)據(jù)標(biāo)簽是否可見。 |
labelsVisible() |
返回百分比柱狀圖上的數(shù)據(jù)標(biāo)簽是否可見的狀態(tài)。 |
setLabelsPosition(Position) |
設(shè)置百分比柱狀圖上的數(shù)據(jù)標(biāo)簽位置,Position 是一個枚舉類型,表示標(biāo)簽的位置,如上方、下方、內(nèi)部等。 |
labelsPosition() |
返回百分比柱狀圖上的數(shù)據(jù)標(biāo)簽位置。 |
setLabelsFormat(QString) |
設(shè)置百分比柱狀圖上的數(shù)據(jù)標(biāo)簽的格式,使用字符串指定標(biāo)簽的顯示格式。 |
labelsFormat() |
返回百分比柱狀圖上的數(shù)據(jù)標(biāo)簽的顯示格式。 |
setPercentageVisible(bool) |
設(shè)置百分比柱狀圖上的百分比標(biāo)簽是否可見。 |
percentageVisible() |
返回百分比柱狀圖上的百分比標(biāo)簽是否可見的狀態(tài)。 |
setStackingGap(qreal) |
設(shè)置百分比柱狀圖中堆疊的百分比柱之間的間隙。 |
stackingGap() |
返回百分比柱狀圖中堆疊的百分比柱之間的間隙。 |
append(QBarSet*) |
在百分比柱狀圖中追加一個數(shù)據(jù)集。 |
insert(int, QBarSet*) |
在百分比柱狀圖中插入一個數(shù)據(jù)集,參數(shù)為位置索引和 QBarSet 對象。 |
remove(QBarSet*) |
從百分比柱狀圖中移除指定的數(shù)據(jù)集。 |
take(int) |
從百分比柱狀圖中移除并返回指定位置的數(shù)據(jù)集。 |
take(QBarSet*) |
從百分比柱狀圖中移除指定的數(shù)據(jù)集并返回。 |
count() |
返回百分比柱狀圖中數(shù)據(jù)集的數(shù)量。 |
barSets() |
返回百分比柱狀圖中所有數(shù)據(jù)集的列表。 |
barWidth() |
返回百分比柱狀圖中百分比柱的寬度。 |
barWidthChanged(qreal) |
當(dāng)百分比柱狀圖中百分比柱的寬度發(fā)生變化時發(fā)出的信號,參數(shù)為新的寬度值。 |
QPercentBarSeries 類主要用于在圖表中繪制百分比柱狀圖,其中的數(shù)據(jù)集可以包含多個柱子,每個柱子表示一個百分比。
// 百分比柱狀圖初始化
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());
// 創(chuàng)建數(shù)據(jù)集
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++)
{
// 從分?jǐn)?shù)段統(tǒng)計數(shù)據(jù)表里獲取數(shù)據(jù)添加到數(shù)據(jù)集
item=ui->treeWidget->topLevelItem(i);
// 橫坐標(biāo)的標(biāo)簽
categories<<item->text(0);
// 添加數(shù)據(jù)到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);
// 添加橫坐標(biāo)
QBarCategoryAxis *axisX = new QBarCategoryAxis();
axisX->append(categories);
chart->setAxisX(axisX, series);
axisX->setRange(categories.at(0), categories.at(categories.count()-1));
// 添加縱坐標(biāo)
QValueAxis *axisY = new QValueAxis;
axisY->setRange(0, 100);
axisY->setTitleText("百分比");
axisY->setTickCount(6);
axisY->setLabelFormat("%.1f");
chart->setAxisY(axisY, series);
// 設(shè)置屬性
chart->legend()->setVisible(true);
chart->legend()->setAlignment(Qt::AlignRight);
運行后則可輸出不同分?jǐn)?shù)段每一門成績的百分比分布情況,如下圖所示;

1.5 創(chuàng)建散點圖
散點圖(Scatter Plot)是一種二維圖表,用于顯示兩個變量之間的關(guān)系。散點圖的每個數(shù)據(jù)點由兩個數(shù)值組成,分別對應(yīng)于圖表的橫軸和縱軸。通過在圖表中繪制這些點,可以觀察和分析變量之間的關(guān)聯(lián)性、趨勢、聚集程度等。
散點圖的特點包括:
- 數(shù)據(jù)點表示:每個數(shù)據(jù)點在圖表上表示為一個獨立的點,其中橫軸對應(yīng)一個變量,縱軸對應(yīng)另一個變量。
- 關(guān)系展示:散點圖主要用于展示兩個變量之間的關(guān)系,例如相關(guān)性、分布情況、趨勢等。
- 離散數(shù)據(jù):適用于離散型數(shù)據(jù),每個點表示一個具體的觀測值。
- 聚類發(fā)現(xiàn):通過觀察數(shù)據(jù)點的分布,可以發(fā)現(xiàn)數(shù)據(jù)是否呈現(xiàn)出某種聚類模式。
- 異常值檢測:可以用于檢測異常值,即圖表中偏離正常分布的離群點。
散點圖的應(yīng)用場景非常廣泛,常見的用途包括:
- 相關(guān)性分析:通過觀察散點圖,可以初步了解兩個變量之間的相關(guān)性,是進(jìn)行相關(guān)性分析的一種可視化手段。
- 趨勢分析:散點圖可以用于觀察兩個變量之間是否存在趨勢,是進(jìn)行趨勢分析的有力工具。
- 異常值檢測:通過識別離群點,可以發(fā)現(xiàn)數(shù)據(jù)中的異常值,有助于數(shù)據(jù)清理和分析的準(zhǔn)確性。
- 聚類分析:觀察數(shù)據(jù)點的分布,可以發(fā)現(xiàn)是否存在某種聚類模式,對于數(shù)據(jù)的分組有一定幫助。
總體而言,散點圖是一種簡單而強(qiáng)大的工具,可用于初步探索和理解兩個變量之間的關(guān)系。
QSplineSeries 是 Qt Charts 模塊中用于繪制光滑曲線的類。它表示圖表中的一條曲線,通過一系列的數(shù)據(jù)點來定義曲線的形狀。
以下是關(guān)于 QSplineSeries 的一些方法以及說明:
| 方法 | 描述 |
|---|---|
QSplineSeries(QObject *parent = nullptr) |
構(gòu)造函數(shù),創(chuàng)建一個 QSplineSeries 對象。 |
~QSplineSeries() |
析構(gòu)函數(shù),釋放 QSplineSeries 對象。 |
append(QPointF point) |
向曲線中追加一個數(shù)據(jù)點。 |
append(QList<QPointF> points) |
向曲線中追加一組數(shù)據(jù)點。 |
replace(int index, QPointF point) |
替換指定索引處的數(shù)據(jù)點。 |
replace(QList<QPointF> points) |
替換曲線中的所有數(shù)據(jù)點。 |
remove(int index) |
移除指定索引處的數(shù)據(jù)點。 |
remove(int index, int count) |
移除從指定索引開始的指定數(shù)量的數(shù)據(jù)點。 |
clear() |
清空曲線中的所有數(shù)據(jù)點。 |
pointsVector() |
返回曲線的數(shù)據(jù)點。 |
setUseOpenGL(bool enable) |
設(shè)置是否使用 OpenGL 進(jìn)行繪制。 |
useOpenGL() |
返回是否使用 OpenGL 進(jìn)行繪制。 |
setPen(const QPen &pen) |
設(shè)置曲線的畫筆,即曲線的顏色和樣式。 |
pen() |
返回曲線的畫筆。 |
setBrush(const QBrush &brush) |
設(shè)置曲線的畫刷,即填充顏色。 |
brush() |
返回曲線的畫刷。 |
setPointLabelsVisible(bool visible) |
設(shè)置是否顯示數(shù)據(jù)點的標(biāo)簽。 |
isPointLabelsVisible() |
返回數(shù)據(jù)點的標(biāo)簽是否可見。 |
setPointLabelsFormat(const QString &format) |
設(shè)置數(shù)據(jù)點標(biāo)簽的顯示格式,支持使用占位符。 |
pointLabelsFormat() |
返回數(shù)據(jù)點標(biāo)簽的顯示格式。 |
setPointLabelsColor(const QColor &color) |
設(shè)置數(shù)據(jù)點標(biāo)簽的顏色。 |
pointLabelsColor() |
返回數(shù)據(jù)點標(biāo)簽的顏色。 |
setPointLabelsFont(const QFont &font) |
設(shè)置數(shù)據(jù)點標(biāo)簽的字體。 |
pointLabelsFont() |
返回數(shù)據(jù)點標(biāo)簽的字體。 |
setPointsVisible(bool visible) |
設(shè)置是否顯示數(shù)據(jù)點。 |
arePointsVisible() |
返回數(shù)據(jù)點是否可見。 |
setPointLabelsClipping(bool clipping) |
設(shè)置是否裁剪超出繪圖區(qū)域的數(shù)據(jù)點標(biāo)簽。 |
isPointLabelsClipping() |
返回數(shù)據(jù)點標(biāo)簽是否裁剪超出繪圖區(qū)域。 |
clicked(QPointF point) |
鼠標(biāo)點擊曲線時發(fā)出的信號,參數(shù)為鼠標(biāo)點擊的數(shù)據(jù)點坐標(biāo)。 |
hovered(QPointF point, bool state) |
鼠標(biāo)懸停在曲線上時發(fā)出的信號,參數(shù)為懸停狀態(tài)以及懸停位置的數(shù)據(jù)點坐標(biāo)。 |
pressed(QPointF point) |
鼠標(biāo)按下曲線時發(fā)出的信號,參數(shù)為鼠標(biāo)按下的數(shù)據(jù)點坐標(biāo)。 |
released(QPointF point) |
鼠標(biāo)釋放曲線時發(fā)出的信號,參數(shù)為鼠標(biāo)釋放的數(shù)據(jù)點坐標(biāo)。 |
doubleClicked(QPointF point) |
鼠標(biāo)雙擊曲線時發(fā)出的信號,參數(shù)為鼠標(biāo)雙擊的數(shù)據(jù)點坐標(biāo)。 |
QSplineSeries 主要用于繪制光滑曲線,通過添加一系列的數(shù)據(jù)點,可以在圖表中呈現(xiàn)出相應(yīng)的曲線形狀。
QScatterSeries 是 Qt Charts 模塊中用于繪制散點圖的類。它派生自 QXYSeries 類,用于表示圖表中的一組散點數(shù)據(jù),通過一系列的坐標(biāo)點來顯示離散的數(shù)據(jù)分布。
以下是關(guān)于 QScatterSeries 的一些方法以及說明:
| 方法 | 說明 |
|---|---|
QScatterSeries(QObject *parent = nullptr) |
構(gòu)造函數(shù),創(chuàng)建一個 QScatterSeries 對象。 |
~QScatterSeries() |
析構(gòu)函數(shù),釋放 QScatterSeries 對象。 |
append(QPointF point) |
向散點圖中追加一個數(shù)據(jù)點。 |
append(QList<QPointF> points) |
向散點圖中追加一組數(shù)據(jù)點。 |
replace(int index, QPointF point) |
替換指定索引處的數(shù)據(jù)點。 |
replace(QList<QPointF> points) |
替換散點圖中的所有數(shù)據(jù)點。 |
remove(int index) |
移除指定索引處的數(shù)據(jù)點。 |
remove(int index, int count) |
移除從指定索引開始的指定數(shù)量的數(shù)據(jù)點。 |
clear() |
清空散點圖中的所有數(shù)據(jù)點。 |
pointsVector() |
返回散點圖的數(shù)據(jù)點。 |
setMarkerShape(QScatterSeries::MarkerShape shape) |
設(shè)置散點的形狀,可以是圓形、方形等。 |
markerShape() |
返回散點的形狀。 |
setMarkerSize(qreal size) |
設(shè)置散點的大小。 |
markerSize() |
返回散點的大小。 |
setPen(const QPen &pen) |
設(shè)置散點圖的畫筆,即散點的邊框顏色和樣式。 |
pen() |
返回散點圖的畫筆。 |
setBrush(const QBrush &brush) |
設(shè)置散點圖的畫刷,即散點的填充顏色。 |
brush() |
返回散點圖的畫刷。 |
setBorderColor(const QColor &color) |
設(shè)置散點的邊框顏色。 |
borderColor() |
返回散點的邊框顏色。 |
setBackgroundColor(const QColor &color) |
設(shè)置散點的背景顏色。 |
backgroundColor() |
返回散點的背景顏色。 |
setBorderColor(const QColor &color) |
設(shè)置散點的邊框顏色。 |
borderColor() |
返回散點的邊框顏色。 |
setBrush(const QBrush &brush) |
設(shè)置散點的畫刷,即填充顏色。 |
brush() |
返回散點的畫刷。 |
setPen(const QPen &pen) |
設(shè)置散點的畫筆,即邊框顏色和樣式。 |
pen() |
返回散點的畫筆。 |
setUseOpenGL(bool enable) |
設(shè)置是否使用 OpenGL 進(jìn)行繪制。 |
useOpenGL() |
返回是否使用 OpenGL 進(jìn)行繪制。 |
setMarkerShape(QScatterSeries::MarkerShape shape) |
設(shè)置散點的形狀,可以是圓形、方形等。 |
markerShape() |
返回散點的形狀。 |
setMarkerSize(qreal size) |
設(shè)置散點的大小。 |
markerSize() |
返回散點的大小。 |
setMarkerColor(const QColor &color) |
設(shè)置散點的顏色。 |
markerColor() |
返回散點的顏色。 |
clicked(QPointF point) |
鼠標(biāo)點擊散點時發(fā)出的信號,參數(shù)為鼠標(biāo)點擊的數(shù)據(jù)點坐標(biāo)。 |
hovered(QPointF point, bool state) |
鼠標(biāo)懸停在散點上時發(fā)出的信 |
繪制散點圖實現(xiàn)代碼如下所示;
// 散點圖初始化
QChart *chart = new QChart();
chart->setAnimationOptions(QChart::SeriesAnimations);
ui->graphicsView->setChart(chart);
ui->graphicsView->setRenderHint(QPainter::Antialiasing);
// 清空繪圖區(qū)
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);
// 隨機(jī)數(shù)種子
qsrand(QTime::currentTime().second());
// 設(shè)置曲線隨機(jī)數(shù)
for (int i=0;i<10;i++)
{
int x=(qrand() % 20); // 0到20之間的隨機(jī)數(shù)
int y=(qrand() % 20);
series0->append(x,y); // 散點序列
seriesLine->append(x,y); // 光滑曲線序列
}
chart->addSeries(series0);
chart->addSeries(seriesLine);
// 增加Y坐標(biāo)軸(可注釋)
QValueAxis *axisY = new QValueAxis;
axisY->setRange(0, 20);
axisY->setTitleText("Y坐標(biāo)");
axisY->setTickCount(11);
axisY->setLabelFormat("%.0f");
axisY->setGridLineVisible(true);
chart->setAxisY(axisY, series0);
chart->setAxisY(axisY, seriesLine);
// 增加X坐標(biāo)軸(可注釋)
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);
// 創(chuàng)建缺省的坐標(biāo)軸(默認(rèn)缺省值)
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);
// 綁定槽函數(shù),用于點擊圖例顯示與隱藏數(shù)據(jù)
foreach (QLegendMarker* marker, chart->legend()->markers())
{
QObject::disconnect(marker, SIGNAL(clicked()), this, SLOT(on_chartBarLegendMarkerClicked()));
QObject::connect(marker, SIGNAL(clicked()), this, SLOT(on_chartBarLegendMarkerClicked()));
}
運行上述代碼則可實現(xiàn)輸出隨機(jī)散點圖,其中右側(cè)散點與曲線可以進(jìn)行自定義隱藏與顯示,如下圖所示;

本博客所有文章除特別聲明外,均采用 BY-NC-SA 許可協(xié)議。轉(zhuǎn)載請注明出處!

浙公網(wǎng)安備 33010602011771號