C++ Qt開發：Charts繪製各類圖表詳解

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

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

1.1 創建柱狀圖

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

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

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

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

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

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

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

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

如下代碼是使用 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）用於展示各部分占整體的比例關係。它通過在一個圓形區域內繪製扇形來表示數據的相對大小。整個圓表示總體，而每個扇形的弧長（或面積）表示相應類別的數量或比例。

餅狀圖的主要特點包括：

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

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

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

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

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

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

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

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

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

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

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

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）用於顯示各部分占整體的百分比關係的圖表。這種圖表通過以百分比形式展示每個部分在總體中所占比例，提供了一種直觀的方式來比較不同部分的相對大小。

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

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

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

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

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

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

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）是一種二維圖表，用於顯示兩個變數之間的關係。散點圖的每個數據點由兩個數值組成，分別對應於圖表的橫軸和縱軸。通過在圖表中繪製這些點，可以觀察和分析變數之間的關聯性、趨勢、聚集程度等。

散點圖的特點包括：

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

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

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

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

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

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

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

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

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

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

// 散點圖初始化
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()));
}

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