QCustomPlot入门

devtools/2025/4/2 8:37:11/

        QCustomPlot 是一个基于 Qt 的 C++ 绘图库,专注于高效、美观的 2D 数据可视化。进入QCustomPlot下载页,下载最新的完整包(包含:源码、文档、示例)。

一、核心架构设计

1. 分层架构模型

层级主要组件职责说明
用户接口层QCustomPlot 类提供顶层API,管理所有子组件
逻辑控制层坐标轴系统、图例管理器、布局系统处理业务逻辑和交互控制
数据管理层QCPDataContainer 及其派生类高效存储和检索绘图数据
渲染绘制层QCPPainter、OpenGL后端执行实际绘图操作
交互处理层鼠标/键盘事件处理器、选择系统处理用户交互行为

2. 模块依赖关系 

3.完整渲染流程

二、核心类介绍

1.核心类关系图 

2.核心类方法详解

 1). QCustomPlot(主控件)

关系

  • 包含多个 QCPLayer(图层)

  • 管理 QCPLayoutElement(布局元素)

  • 持有 QCPAbstractPlottable(可绘图对象)

关键方法

// 图形管理
QCPGraph* addGraph(QCPAxis* keyAxis, QCPAxis* valueAxis);
void removePlottable(QCPAbstractPlottable* plottable);// 坐标轴访问
QCPAxis* xAxis, *yAxis;  // 主坐标轴
QCPAxis* axis(QCPAxis::AxisType type);// 重绘控制
void replot(QCustomPlot::RefreshPriority priority = rpRefreshHint);
2). QCPAbstractPlottable(绘图基类)

子类:折线图(QCPGraph)、曲线图(QCPCurve)、柱状图(QCPBars)、QCPStatiBox(盒子图)、QCPColorMap(色谱图)、QCPFinancial(金融图)。

核心方法

// 数据绑定
virtual void setData(QSharedPointer<QCPDataContainer> data);// 视觉样式
void setPen(const QPen& pen);
void setBrush(const QBrush& brush);// 坐标轴关联
void setKeyAxis(QCPAxis* axis);
void setValueAxis(QCPAxis* axis);
3). QCPGraph(折线图)

扩展方法

// 线型设置
void setLineStyle(QCPGraph::LineStyle ls);  // lsLine, lsStepLeft, lsNone等// 散点样式
void setScatterStyle(const QCPScatterStyle& style);// 数据填充
void addData(const QVector<double>& keys, const QVector<double>& values);
void data()->removeBefore(double key);  // 删除指定范围前的数据

不同于Graph,其他的Plottable需要用new进行构造,而不是用addCurve、addBars等函数创建。已经存在的Plottable可以通过 QCustomPlot ::plottable(int index)访问,plottable的数量可以用  QCustomPlot::plottableCount访问。

    ui->widget1->xAxis->setLabel("x");ui->widget1->yAxis->setLabel("y");ui->widget1->xAxis->setRange(0,10);ui->widget1->yAxis->setRange(0,10);QCPBars *myBars = new QCPBars(ui->widget1->xAxis, ui->widget1->yAxis);// now we can modify properties of myBars:myBars->setName("Bars Series 1");QVector<double> keyData;QVector<double> valueData;keyData << 1 << 2 << 3;valueData << 2 << 4 << 8;myBars->setData(keyData, valueData);ui->widget1->setInteractions(QCP::iRangeDrag | QCP::iRangeZoom | QCP::iSelectPlottables);ui->widget1->replot();
 4). QCPAxis(坐标轴)

关联类

  • QCPGrid(网格)

  • QCPAxisTicker(刻度生成器)

关键方法

// 范围控制
void setRange(double lower, double upper);
void setRange(const QCPRange& range);// 刻度配置
void setTicker(QSharedPointer<QCPAxisTicker> ticker);  // 时间/对数/文本刻度
void setTickLabels(bool show);// 标签设置
void setLabel(const QString& text);
void setLabelFont(const QFont& font);
5). QCPLayoutElement(布局元素)

子类

  • QCPAxisRect(坐标轴矩形)

  • QCPLayoutGrid(网格布局)

  • QCPLegend(图例)

核心方法

// 尺寸控制
void setMinimumSize(const QSize& size);
void setMaximumSize(const QSize& size);// 边距设置
void setMargins(const QMargins& margins);
6. QCPAbstractItem(自定义图元)

子类示例

  • QCPItemText(文本标签)

  • QCPItemLine(参考线)

  • QCPItemRect(矩形框)

通用方法

// 位置锚点
QCPItemPosition* position(const QString& name);  // 例如 "start", "end"// 样式设置
void setPen(const QPen& pen);
void setBrush(const QBrush& brush);
7.QCPLayer图层

管理图层元素(QCPLayerable),所有可显示的对象都是继承自图层元素。 

QCustomPlot 内置了一套默认图层系统,用于组织不同类型的绘图元素。理解这些默认图层对于有效控制绘图顺序和元素管理非常重要。

默认图层层次结构(从底到顶)

  1. background - 最底层,适合放置背景元素

  2. grid - 网格线层

  3. main - 主图层,大多数plottables的默认层

  4. axes - 坐标轴层

  5. legend - 图例层

  6. overlay - 最顶层,适合放置覆盖元素

各默认图层的典型内容

图层名称包含元素默认模式
background背景矩形、背景图片等lmLogical
grid网格线lmLogical
main图形(QCPGraph)、柱状图(QCPBars)等lmLogical
axes坐标轴、轴标签、刻度lmBuffered
legend图例及其项lmBuffered
overlay顶层标注、浮动元素lmLogical

访问和操作默认图层

// 获取特定默认图层
QCPLayer *gridLayer = customPlot->layer("grid");
QCPLayer *mainLayer = customPlot->layer("main");// 检查图层是否存在
if (customPlot->hasLayer("legend")) {qDebug() << "存在legend图层";
}// 获取所有图层列表
QList<QCPLayer*> allLayers = customPlot->layers();// 获取图层在堆叠顺序中的索引
int layerIndex = customPlot->layerToIndex(mainLayer);

默认图层的重要特性

  1. 自动创建:当创建QCustomPlot实例时,所有默认图层会自动创建

  2. 绘制顺序:图层的绘制顺序由QCustomPlot::mLayers列表决定,索引0最先绘制

  3. 默认分配

    QCPGraph *graph = customPlot->addGraph();  // 自动添加到"main"层
    QCPItemText *text = new QCPItemText(customPlot);  // 自动添加到"overlay"层
  4. 模式设置

    • lmLogical:直接绘制,无缓冲

    • lmBuffered:离屏缓冲后绘制(适合复杂静态内容)

 

三、QCustomPlot 基础入门

1. 安装与配置

源码集成
  1. 下载最新版 QCustomPlot 官网

  2. 将 qcustomplot.h 和 qcustomplot.cpp 添加到项目

  3. 在 .pro 文件中添加:

    QT += printsupport widgets
    SOURCES += qcustomplot.cpp
    HEADERS += qcustomplot.h

2. 基本绘图流程

1)初始化

QCustomPlot *customPlot = new QCustomPlot(parent);
customPlot->setInteractions(QCP::iRangeDrag | QCP::iRangeZoom);

2)‌数据图形绘制
添加图形对象并绑定数据:

customPlot->addGraph();  
QVector<double> xData = {1,2,3}, yData = {10,20,15};  
customPlot->graph(0)->setData(xData, yData);  // 数据绑定‌

4)坐标轴配置
设置坐标轴范围和标签:

customPlot->xAxis->setLabel("时间(秒)");  
customPlot->yAxis->setLabel("温度(℃)");  
customPlot->xAxis->setRange(0, 5);  
customPlot->yAxis->setRange(0, 30);  // 动态范围‌

4)渲染与更新
调用 replot() 重绘图形:

customPlot->replot();  // 强制刷新画布‌

完整示例代码 

#include "qcustomplot.h"// 在窗口构造函数中
QCustomPlot *customPlot = new QCustomPlot(this);
setCentralWidget(customPlot);// 添加数据
QVector<double> x(101), y(101);
for (int i=0; i<101; ++i) {x[i] = i/50.0 - 1; // -1 到 1y[i] = x[i]*x[i];  // 抛物线
}// 创建图形
customPlot->addGraph();
customPlot->graph(0)->setData(x, y);// 设置坐标轴标签
customPlot->xAxis->setLabel("x");
customPlot->yAxis->setLabel("y");// 自动缩放
customPlot->rescaleAxes();// 重绘
customPlot->replot();

四、核心功能详解

1. 多种图形类型

折线图
customPlot->addGraph();
customPlot->graph(0)->setData(x, y);
customPlot->graph(0)->setPen(QPen(Qt::blue));
散点图
customPlot->addGraph();
customPlot->graph(0)->setData(x, y);
customPlot->graph(0)->setScatterStyle(QCPScatterStyle::ssCircle);
customPlot->graph(0)->setLineStyle(QCPGraph::lsNone);
柱状图
QCPBars *bars = new QCPBars(customPlot->xAxis, customPlot->yAxis);
bars->setData(x, y);
bars->setWidth(0.2); // 柱宽
热力图 
QCPColorMap *colorMap = new QCPColorMap(customPlot->xAxis, customPlot->yAxis);
colorMap->data()->setSize(200, 200)

http://www.ppmy.cn/devtools/172753.html

相关文章

Css环形旋转立体感动画

Css环形旋转立体感动画 index.html <!DOCTYPE html> <html lang"en" > <head><meta charset"UTF-8"><title>Css环形旋转立体感动画</title><link rel"stylesheet" href"./style.css">&l…

matplotlib——南丁格尔玫瑰

南丁格尔玫瑰图&#xff08;Nightingale Rose Chart&#xff09;&#xff0c;是一种特殊形式的柱状图&#xff0c;它以南丁格尔&#xff08;Florence Nightingale&#xff09;命名&#xff0c;她在1858年首次使用这种图表来展示战争期间士兵死亡原因的数据。 它将数据绘制在极坐…

电气技术:未来自动化的心脏

在当今科技迅猛发展的时代&#xff0c;电气技术与自动化工程已成为推动社会进步的重要力量。 电气技术作为现代工业的基石&#xff0c;涵盖了电力系统、电子学及电磁学等多个领域。它的发展不仅提升了能源利用效率&#xff0c;还为各类设备的运行提供了稳定可靠的电力支持。从…

【Prompt实战】广告营销客服专家

本文原创作者&#xff1a;姚瑞南 AI-agent 大模型运营专家&#xff0c;先后任职于美团、猎聘等中大厂AI训练专家和智能运营专家岗&#xff1b;多年人工智能行业智能产品运营及大模型落地经验&#xff0c;拥有AI外呼方向国家专利与PMP项目管理证书。&#xff08;转载需经授权&am…

首页性能优化

首页性能提升是前端优化中的核心任务之一&#xff0c;因为首页是用户访问的第一入口&#xff0c;其加载速度和交互体验直接影响用户的留存率和转化率。 1. 性能瓶颈分析 在优化之前&#xff0c;首先需要通过工具分析首页的性能瓶颈。常用的工具包括&#xff1a; Chrome DevTo…

# 基于 OpenCV 的选择题自动批改系统实现

在教育领域&#xff0c;选择题的批改工作通常较为繁琐且重复性高。为了提高批改效率&#xff0c;我们可以利用计算机视觉技术&#xff0c;通过 OpenCV 实现选择题的自动批改。本文将详细介绍如何使用 Python 和 OpenCV 实现一个简单的选择题自动批改系统。 1. 项目背景 选择题…

【MCU内置FPGA/CPLD在触摸屏中的应用

传统的屏驱MCU常见应用于洗衣机、空调、空调面板、仪器仪表等人机交互界面显示场景中&#xff0c;通常是以段码的形式显示设备运转的时间、温度、测量结果等简单运行数据&#xff0c;随着人机交互需求丰富化&#xff0c;智能家居设备、摩托车、电动车等产品也逐步增加了屏幕显示…

5种特效融合愚人节搞怪病毒

内容供学习使用,不得转卖,代码复制后请1小时内删除,此代码会危害计算机安全,谨慎操作 并在虚拟机里运行此代码!&#xff0c;病毒带来后果自负! #include <windows.h> #include <cmath> #include <thread> using namespace std; // 屏幕特效函数声明 void In…