【QCustomPlot】繪製 x-y 曲線圖

来源:https://www.cnblogs.com/young520/archive/2023/06/19/17492537.html
-Advertisement-
Play Games

使用 QCustomPlot 繪圖庫輔助開發時整理的學習筆記。本篇介紹如何使用 QCustomPlot 繪製 x-y 曲線圖，需要 x 軸數據與 y 軸數據都已知，示例中使用的 QCustomPlot 版本為 Version 2.1.1，QT 版本為 5.9.2。 ...


說明

使用 QCustomPlot 繪圖庫輔助開發時整理的學習筆記。同系列文章目錄可見 《繪圖庫 QCustomPlot 學習筆記》目錄。本篇介紹如何使用 QCustomPlot 繪製 x-y 曲線圖，需要 x 軸數據與 y 軸數據都已知，示例中使用的 QCustomPlot 版本為 Version 2.1.1，QT 版本為 5.9.2。

目錄


1. 示例工程配置

通過包含源碼的方式來使用 QCustomPlot 繪圖庫，方法詳見本人同系列文章 使用方法（源碼方式）。此外，庫官網有提供繪圖的示例代碼，詳見 QCustomPlot - Introduction，下載壓縮包 QCustomPlot.tar.gz 中也有示例的工程代碼，詳見同系列文章 下載。下麵示例中所用的工程文件（demoQCP.pro）內容為：

QT       += core gui
greaterThan(QT_MAJOR_VERSION, 4): QT += widgets printsupport

greaterThan(QT_MAJOR_VERSION, 4): CONFIG += c++11
lessThan(QT_MAJOR_VERSION, 5): QMAKE_CXXFLAGS += -std=c++11

TARGET = demoQCP
TEMPLATE = app

SOURCES += main.cpp\
           qcustomplot.cpp

HEADERS  += qcustomplot.h

實際使用 QCustomPlot 進行繪圖時，通常是將 UI 界面中的某個 QWidget 控制項提升為 QCustomPlot，然後以指針的方式調用 QCustomPlot 的類方法繪製圖像。這一方式用在示例中有點繁瑣（需要 .ui 文件），為了突出示例重點，減少文件依賴，示例代碼直接在 main.cpp 中聲明瞭一個 QCustomPlot 對象，示例工程所需的文件如下，只需四個文件，demoQCP.pro 的文件內容已在上面給出，main.cpp 的文件內容會在後面給出，qcustomplot.h 與 qcustomplot.cpp 兩個文件下載自官網。

Oh Shit!-圖片走丟了-打個廣告-歡迎來博客園關註“木三百川”

main.cpp 文件的框架如下，demoPlot() 裡面用來寫繪圖的示例代碼。

#include <QApplication>
#include <QMainWindow>
#include "qcustomplot.h"

void demoPlot(QCustomPlot *customPlot)
{
    // 繪圖示例代碼
}

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    QMainWindow window;

    // 將QCustomPlot視窗作為QMainWindow中心視窗
    QCustomPlot customPlot;
    window.setCentralWidget(&customPlot);

    // 繪圖
    demoPlot(&customPlot);

    // 顯示
    window.setWindowTitle(QStringLiteral("x-y 曲線圖示例 @木三百川"));
    window.setGeometry(100, 100, 800, 600);
    window.show();

    return a.exec();
}

關於繪圖顏色、線型、字體、網格線等外觀上的美化，會在本人同系列文章 《繪圖庫 QCustomPlot 學習筆記》目錄 中再做介紹，想學習的不妨關註一下。本文章只介紹繪製 x-y 曲線圖的基礎方法。

2. 常用 API 介紹

繪製 x-y 曲線圖所使用的類為 QCPGraph，它提供的類方法可在 Documentation - QCPGraph 中找到。常用的介面有以下幾個：

// 重置/添加繪圖數據的介面
void setData(const QVector<double> &keys, const QVector<double> &values, bool alreadySorted=false)
void addData(const QVector<double> &keys, const QVector<double> &values, bool alreadySorted=false)
void addData(double key, double value)
    
// 設置線型
void setLineStyle(LineStyle ls)
    
// 設置點型
void setScatterStyle(const QCPScatterStyle &style)

3. 繪製一條 x-y 曲線

demoPlot() 函數如下：

void demoPlot(QCustomPlot *customPlot)
{
    // 顯示上方橫軸(xAxis2)與右方縱軸(yAxis2)，並與xAxis/yAxis保持同步
    customPlot->axisRect()->setupFullAxesBox(true);
    
    // 生成x-y數據, y=x^2, 定義域[-1,1]
    QVector<double> x(101), y(101);
    for (int i = 0; i < 101; ++i)
    {
        x[i] = i/50.0 - 1;
        y[i] = x[i]*x[i];
    }
    
    // 新建QCPGraph對象，並設置繪圖數據
    customPlot->addGraph();
    customPlot->graph(0)->setData(x, y);
    
    // 設置標題
    customPlot->plotLayout()->insertRow(0);
    customPlot->plotLayout()->addElement(0, 0, new QCPTextElement(customPlot, "Test-Title", QFont("sans", 17, QFont::Bold)));
    
    // 設置坐標軸標簽
    customPlot->xAxis->setLabel("x");
    customPlot->yAxis->setLabel("y");
    
    // 設置坐標軸範圍
    customPlot->xAxis->setRange(-1, 1);
    customPlot->yAxis->setRange(0, 1);
    
    // 刷新顯示
    customPlot->replot();
}

繪製效果：

Oh Shit!-圖片走丟了-打個廣告-歡迎來博客園關註“木三百川”

4. 繪製多條 x-y 曲線

demoPlot() 函數如下：

void demoPlot(QCustomPlot *customPlot)
{
    // 顯示上方橫軸(xAxis2)與右方縱軸(yAxis2)，並與xAxis/yAxis保持同步
    customPlot->axisRect()->setupFullAxesBox(true);

    // 生成x-y數據，y1=x^2，y2=x^3，定義域[-1,1]
    QVector<double> x(101), y1(101), y2(101);
    for (int i = 0; i < 101; ++i)
    {
        x[i] = i/50.0 - 1;
        y1[i] = x[i]*x[i];
        y2[i] = x[i]*x[i]*x[i];
    }

    // 新建QCPGraph對象，並設置繪圖數據x-y1
    customPlot->addGraph();
    customPlot->graph(0)->setPen(QPen(Qt::blue));
    customPlot->graph(0)->setData(x, y1);
    customPlot->graph(0)->setName(QStringLiteral("二次曲線圖例"));

    // 新建QCPGraph對象，並設置繪圖數據x-y2
    customPlot->addGraph();
    customPlot->graph(1)->setPen(QPen(Qt::red));
    customPlot->graph(1)->setData(x, y2);
    customPlot->graph(1)->setName(QStringLiteral("三次曲線圖例"));

    // 顯示圖例
    customPlot->legend->setVisible(true);

    // 設置標題
    customPlot->plotLayout()->insertRow(0);
    customPlot->plotLayout()->addElement(0, 0, new QCPTextElement(customPlot, "Test-Title", QFont("sans", 17, QFont::Bold)));

    // 設置坐標軸標簽
    customPlot->xAxis->setLabel("x");
    customPlot->yAxis->setLabel("y");

    // 設置坐標軸範圍
    customPlot->xAxis->setRange(-1, 1);
    customPlot->yAxis->setRange(-1, 1);

    // 刷新顯示
    customPlot->replot();
}

繪製效果：

Oh Shit!-圖片走丟了-打個廣告-歡迎來博客園關註“木三百川”

5. 繪製往回走的 x-y 曲線

舉個例子，若需要繪製 \(x=(y+0.8)\times y\times (y-0.8),y\in [-1,1]\) 曲線，有三種方法：

  • 方法一：新建 QCPGraph 對象時，指定 yAxis 為 keyAxis，指定 xAxis 為 valueAxis，即互換一下坐標軸的角色，這是最靠譜也最常用的方法。
  • 方法二：仍以 xAxis 為 keyAxis、yAxis 為 valueAxis（預設情況），但在調用 setData() 時，需傳入第三個參數 true。這是一種偷懶的做法，並且繪圖的橫軸數據（keyAxis）需滿足一定的條件：keyData 必須先遞增再減小、且減小時不得離 keyData[0] 太近，否則繪圖會出錯。
  • 方法三：導出繪圖數據的記憶體地址，直接將數據寫入記憶體中，這種做法常被用來提升 QCustomPlot 性能，縮短數據更新時間，但用此來繪製往回走的 x-y 曲線時，繪圖的橫軸數據也需要滿足上面的條件，否則繪圖會出錯。

當曲線形成的環路很複雜時，一般採用繪製參數曲線的方法來表現，詳見 Documentation - QCPCurve 或本人同系列文章。

5.1 靠譜方法：互換 x-y 軸

demoPlot() 函數如下：

void demoPlot(QCustomPlot *customPlot)
{
    // 顯示上方橫軸(xAxis2)與右方縱軸(yAxis2)，並與xAxis/yAxis保持同步
    customPlot->axisRect()->setupFullAxesBox(true);

    // 生成y-x數據, x=(y+0.8)*y*(y-0.8), 定義域[-1,1]
    QVector<double> x(101), y(101);
    for (int i = 0; i < 101; ++i)
    {
        y[i] = i/50.0 - 1;
        x[i] = (y[i]+0.8)*y[i]*(y[i]-0.8);
    }

    // 新建QCPGraph對象(互換xAxis/yAxis)，並設置繪圖數據
    customPlot->addGraph(customPlot->yAxis, customPlot->xAxis);
    customPlot->graph(0)->setData(y, x);

    // 設置標題
    customPlot->plotLayout()->insertRow(0);
    customPlot->plotLayout()->addElement(0, 0, new QCPTextElement(customPlot, "Test-Title", QFont("sans", 17, QFont::Bold)));

    // 設置坐標軸標簽
    customPlot->xAxis->setLabel("x");
    customPlot->yAxis->setLabel("y");

    // 設置坐標軸範圍
    customPlot->xAxis->setRange(-0.5, 0.5);
    customPlot->yAxis->setRange(-1, 1);

    // 刷新顯示
    customPlot->replot();
}

繪製效果：

Oh Shit!-圖片走丟了-打個廣告-歡迎來博客園關註“木三百川”

5.2 偷懶方法：設置 alreadySorted = true

demoPlot() 函數如下：

void demoPlot(QCustomPlot *customPlot)
{
    // 顯示上方橫軸(xAxis2)與右方縱軸(yAxis2)，並與xAxis/yAxis保持同步
    customPlot->axisRect()->setupFullAxesBox(true);

    // 生成y-x數據, x=(y+0.8)*y*(y-0.8), 定義域[-1,1]
    QVector<double> x(101), y(101);
    for (int i = 0; i < 101; ++i)
    {
        y[i] = i/50.0 - 1;
        x[i] = (y[i]+0.8)*y[i]*(y[i]-0.8);
    }

    // 新建QCPGraph對象，並設置繪圖數據以及 alreadySorted = true
    customPlot->addGraph();
    customPlot->graph(0)->setData(x, y, true);

    // 設置標題
    customPlot->plotLayout()->insertRow(0);
    customPlot->plotLayout()->addElement(0, 0, new QCPTextElement(customPlot, "Test-Title", QFont("sans", 17, QFont::Bold)));

    // 設置坐標軸標簽
    customPlot->xAxis->setLabel("x");
    customPlot->yAxis->setLabel("y");

    // 設置坐標軸範圍
    customPlot->xAxis->setRange(-0.5, 0.5);
    customPlot->yAxis->setRange(-1, 1);

    // 刷新顯示
    customPlot->replot();
}

繪製效果：

Oh Shit!-圖片走丟了-打個廣告-歡迎來博客園關註“木三百川”

註意這張圖中，keyData （橫軸）滿足先遞增再減小、且減小時的最小值（約為 -0.197）大於 keyData[0]（約為 -0.360），所以繪製沒有出錯。有興趣的可以嘗試一下，當橫軸數據減小且比較接近 keyData[0] 時，繪製的效果。

5.3 備用方法：導出繪圖數據記憶體地址

關於如何導出一維繪圖數據的記憶體地址，詳見本人另一篇文章 【QCustomPlot】性能提升之修改源碼（版本 V2.x.x）。demoPlot() 函數如下：

void demoPlot(QCustomPlot *customPlot)
{
    // 顯示上方橫軸(xAxis2)與右方縱軸(yAxis2)，並與xAxis/yAxis保持同步
    customPlot->axisRect()->setupFullAxesBox(true);

    // 新建QCPGraph對象，獲得繪圖數據的記憶體地址，並設置繪圖數據
    customPlot->addGraph();
    QVector<QCPGraphData> *mData = customPlot->graph(0)->data()->coreData();
    mData->reserve(101);
    mData->resize(101);
    for (int i = 0; i < 101; ++i)
    {
        double y = i/50.0 - 1;
        (*mData)[i].key = (y+0.8)*y*(y-0.8);
        (*mData)[i].value = y;
    }

    // 設置標題
    customPlot->plotLayout()->insertRow(0);
    customPlot->plotLayout()->addElement(0, 0, new QCPTextElement(customPlot, "Test-Title", QFont("sans", 17, QFont::Bold)));

    // 設置坐標軸標簽
    customPlot->xAxis->setLabel("x");
    customPlot->yAxis->setLabel("y");

    // 設置坐標軸範圍
    customPlot->xAxis->setRange(-0.5, 0.5);
    customPlot->yAxis->setRange(-1, 1);

    // 刷新顯示
    customPlot->replot();
}

繪製效果：

Oh Shit!-圖片走丟了-打個廣告-歡迎來博客園關註“木三百川”

6. 繪製間隙中斷的 x-y 曲線

當 keyAxis 數據中存在 NaN 時，繪製曲線會出現間隙中斷的效果，demoPlot() 函數如下：

void demoPlot(QCustomPlot *customPlot)
{
    // 顯示上方橫軸(xAxis2)與右方縱軸(yAxis2)，並與xAxis/yAxis保持同步
    customPlot->axisRect()->setupFullAxesBox(true);

    // 生成x-y數據, y=x^2, 定義域[-1,1]
    QVector<double> x(101), y(101);
    for (int i = 0; i < 101; ++i)
    {
        x[i] = i/50.0 - 1;
        y[i] = x[i]*x[i];
    }
    y[30] = qQNaN();
    y[60] = std::numeric_limits<double>::quiet_NaN();

    // 新建QCPGraph對象，並設置繪圖數據
    customPlot->addGraph();
    customPlot->graph(0)->setData(x, y);

    // 設置標題
    customPlot->plotLayout()->insertRow(0);
    customPlot->plotLayout()->addElement(0, 0, new QCPTextElement(customPlot, "Test-Title", QFont("sans", 17, QFont::Bold)));

    // 設置坐標軸標簽
    customPlot->xAxis->setLabel("x");
    customPlot->yAxis->setLabel("y");

    // 設置坐標軸範圍
    customPlot->xAxis->setRange(-1, 1);
    customPlot->yAxis->setRange(0, 1);

    // 刷新顯示
    customPlot->replot();
}

繪製效果：

Oh Shit!-圖片走丟了-打個廣告-歡迎來博客園關註“木三百川”

本文作者：木三百川

本文鏈接：https://www.cnblogs.com/young520/p/17492537.html

版權聲明：本文系博主原創文章，著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請附上出處鏈接。遵循 署名-非商業性使用-相同方式共用 4.0 國際版 (CC BY-NC-SA 4.0) 版權協議。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • StencilJs學習之組件裝飾器
    stenciljs 可以方便的構建互動式組件 支持以下裝飾器 - component - state - prop - watch - method - element - event - listen ## Component 裝飾器 `@Component` 是一個裝飾器，它將 TypeScri ...
  • JavaScript的數學計算庫：decimal.js
    An arbitrary-precision Decimal type for JavaScript. ## 功能 - 整數和浮點數 - 簡單但功能齊全的 API - 複製 JavaScript 和對象的許多方法`Number.prototype` `Math` - 還處理十六進位、二進位和八進位值 ...
  • JavaScript 顯示數據
    ## JavaScript 顯示數據 JavaScript 可以通過不同的方式來輸出數據： - 使用 **window.alert()** 彈出警告框。 - 使用 **document.write()** 方法將內容寫到 HTML 文檔中。 - 使用 **innerHTML** 寫入到 HTML 元 ...
  • Tab切換以及倒計時組件封裝
    ### 1、Tab組件 ![](https://img2023.cnblogs.com/blog/1103967/202306/1103967-20230608203245862-2093631029.gif) **功能** - 支持預設選中tab - 子元素可以是文本或者圖片 - 自定義tab的數 ...
  • 手牽手帶你實現mini-vue
    Vue 的雙向數據綁定實現原理是什麼樣的，如果讓我們自己去實現一個這樣的雙向數據綁定要怎麼做呢，本文就與大家分享一下 Vue 的綁定原理及其簡單實現 ...
  • 前端Vue圖片上傳組件支持單個文件多個文件上傳 自定義上傳數量 預覽刪除圖片 圖片壓縮
    ## 1 安裝環境 ### Node.js js的運行環境，相當於 java 的 jvm 官網：https://nodejs.org/en，下載最新穩定版 `18.16.0 LTS`，雙擊安裝即可 自動安裝了npm，終端驗證： ```bash C:\Users\Administrator>node ...
  • 微服務中「組件」集成
    在微服務工程的技術選型中，會涉及到很多組件的集成，最常用包括：緩存、消息隊列、搜索、定時任務、存儲等幾個方面；隨著系統的服務數量上升，統一管理各種組件的複雜度也會提高； ...
  • 爬蟲小試牛刀（爬取學校通知公告）
    初識Java 1.Java背景知識 java是美國sun公司（Stanford University Network）在1995年推出的一門電腦高級編程語言。 Java早期稱為Oak（橡樹），後期改名為Java。 Java之父：詹姆斯·高斯林（James Gosling）。 2009年sun公司被 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類