[QCustomPlot] 绘图截图：高级轴演示 Plot Screenshots: Advanced Axes Demo

原创 已于 2025-01-08 09:39:15 修改 · 1.1k 阅读 · 20 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#android

于 2025-01-07 14:44:07 首次发布

本篇为官方例子的解读:绘图截图：高级轴演示 Plot Screenshots: Advanced Axes Demo
推荐其他人总结的笔记:qcustomplot使用教程–基本绘图

在这里插入图片描述

1.删除原有的默认布局

    customPlot->plotLayout()->clear(); // 清除默认的rect轴，以便我们可以从头开始        
    customPlot->replot(); // 重绘

在这里插入图片描述

在这里插入图片描述

  • 原先默认有一个(0,5)范围的坐标轴布局, 执行代码后直接清空变全白了.

2.插入坐标轴

    customPlot->plotLayout()->clear(); // 清除默认的rect轴，以便我们可以从头开始

    QCPAxisRect *wideAxisRect = new QCPAxisRect(customPlot);    // 一个坐标轴
    QCPLayoutGrid *subLayout = new QCPLayoutGrid;               // 一个布局网络

    customPlot->plotLayout()->addElement(0, 0, wideAxisRect);   // 坐标轴放第一行
    customPlot->plotLayout()->addElement(1, 0, subLayout);      // 布局放第二行

    QCPAxisRect *subRectLeft = new QCPAxisRect(customPlot, false);  // 一个坐标轴 false表示不设置默认轴
    QCPAxisRect *subRectRight = new QCPAxisRect(customPlot, false); // 一个坐标轴 false表示不设置默认轴
    
    subRectLeft->addAxes(QCPAxis::atBottom | QCPAxis::atLeft);      // 添加下面和左边的坐标轴
    subRectRight->addAxes(QCPAxis::atBottom | QCPAxis::atRight);    // 添加下面和右边的坐标轴

    subLayout->addElement(0, 0, subRectLeft);                       // 坐标轴放在左边
    subLayout->addElement(0, 1, subRectRight);                      // 坐标轴放在右边

    customPlot->replot(); // 重绘

在这里插入图片描述

  • 可以看到第一行上面的坐标是默认带网格的.下面第二行两个坐标轴就算只有坐标轴的;

3.重叠坐标轴

    // # 3.重叠坐标轴
    wideAxisRect->setupFullAxesBox(true);                           // 设置右和上坐标轴的可见性,并将左和下坐标轴的属性给予右和上坐标轴, 注意,这一步执行完后右和上坐标轴是没有数值的,只有刻度
    wideAxisRect->axis(QCPAxis::atRight, 0)->setTickLabels(true);   // 第一个函数是获取右边索引第一个的坐标轴, 然后使其显示数字
    wideAxisRect->addAxis(QCPAxis::atLeft)->setTickLabelColor(QColor("#6050F8")); // 在左边(再)添加一个坐标轴,并且设置数字的颜色

在这里插入图片描述

  • 注意其中用到的添加重叠坐标轴的函数addAxis(),和索引坐标轴的函数axis();
  • 右和上坐标轴的范围被赋予和左下坐标轴一样;

4.坐标轴尺寸与刻度

    // # 4.坐标轴尺寸与刻度
    subRectRight->setMaximumSize(150, 150);     // 设置最大尺寸
    subRectRight->setMinimumSize(150, 150);     // 设置最小尺寸, 结合相当于是固定尺寸

    subRectLeft->axis(QCPAxis::atLeft)->ticker()->setTickCount(2);      // 左坐标轴范围不变, 主刻度只有2个
    subRectRight->axis(QCPAxis::atRight)->ticker()->setTickCount(2);    // 右坐标轴范围不变, 主刻度只有2个
    subRectRight->axis(QCPAxis::atBottom)->ticker()->setTickCount(2);   // 下坐标轴范围不变, 主刻度只有2个
    subRectLeft->axis(QCPAxis::atBottom)->grid()->setVisible(true);     // 下坐标轴的网格线显示可见

在这里插入图片描述

  • 注意,设置坐标轴尺寸后,会自动填满;而且下面2个坐标轴的左右已经和上面1个坐标轴不对齐了;
  • 注意,要设置坐标轴刻度相关的,先获取坐标轴axis()再获取刻度ticker(),
  • 类似的,要设置网格线相关的,先获取坐标轴axis()再获取刻度grid(),

5.归类分组

    // 同步顶部和底部轴矩形的左右边距：
    QCPMarginGroup *marginGroup = new QCPMarginGroup(customPlot);           // 创建一个用于同步关联的对象
    subRectLeft->setMarginGroup(QCP::msLeft, marginGroup);                  // 丢入三个坐标轴中
    subRectRight->setMarginGroup(QCP::msRight, marginGroup);                // 丢入三个坐标轴中
    wideAxisRect->setMarginGroup(QCP::msLeft | QCP::msRight, marginGroup);  // 丢入三个坐标轴中

    //移动“轴”层上新创建的轴和“网格”层上的网格：
    foreach (QCPAxisRect *rect, customPlot->axisRects())      // 获取所有坐标轴
    {
        foreach (QCPAxis *axis, rect->axes())                 // 获取所有x和y坐标轴
        {
            axis->setLayer("axes");                           // 将坐标轴归类分组
            axis->grid()->setLayer("grid");                   // 将所有网格线归类分组
        }
    }
    
    // 生成数据, 留着备用
    QVector<QCPGraphData> dataCos(21), dataGauss(50), dataRandom(100);
    QVector<double> x3, y3;
    qsrand(3);
    for (int i=0; i<dataCos.size(); ++i)
    {
      dataCos[i].key = i/static_cast<double>(dataCos.size()-1)*10-5.0;
      dataCos[i].value = qCos(dataCos[i].key);
    }
    for (int i=0; i<dataGauss.size(); ++i)
    {
      dataGauss[i].key = i/static_cast<double>(dataGauss.size())*10-5.0;
      dataGauss[i].value = qExp(-dataGauss[i].key*dataGauss[i].key*0.2)*1000;
    }
    for (int i=0; i<dataRandom.size(); ++i)
    {
      dataRandom[i].key = i/static_cast<double>(dataRandom.size())*10;
      dataRandom[i].value = qrand()/static_cast<double>(RAND_MAX)-0.5+dataRandom[qMax(0, i-1)].value;
    }
    x3 << 1 << 2 << 3 << 4;
    y3 << 2 << 2.5 << 4 << 1.5;

在这里插入图片描述

  • 对比上一个,下面2个坐标轴已经和上面1个坐标轴的左右对齐了;
  • 这个对齐和分组的方法有点难以理解,暂时死记好了.

6.画2个折线图

    // # 6.画2个折线图
    QCPGraph *mainGraphCos = customPlot->addGraph(wideAxisRect->axis(QCPAxis::atBottom), wideAxisRect->axis(QCPAxis::atLeft)); // 添加一条折线图,使用下面第一个和左边第一个坐标轴
    mainGraphCos->data()->set(dataCos);                     // 设置数据
    mainGraphCos->valueAxis()->setRange(-1, 1);             // 设置y轴范围
    mainGraphCos->rescaleKeyAxis();                         // 设置x轴自适应
    mainGraphCos->setScatterStyle(QCPScatterStyle(QCPScatterStyle::ssCircle, QPen(Qt::black), QBrush(Qt::white), 6)); // 设置散点样式
    mainGraphCos->setPen(QPen(QColor(120, 120, 120), 2));   // 设置线颜色

    QCPGraph *mainGraphGauss = customPlot->addGraph(wideAxisRect->axis(QCPAxis::atBottom), wideAxisRect->axis(QCPAxis::atLeft, 1)); // 再添加一条折线图,使用下面第一个和左边第二个坐标轴
    mainGraphGauss->data()->set(dataGauss);                 // 设置数据
    mainGraphGauss->valueAxis()->setRange(0, 1000);         // 设置y轴范围
    mainGraphGauss->rescaleKeyAxis();                       // 设置x轴自适应
    mainGraphGauss->setPen(QPen(QColor("#8070B8"), 2));     // 设置线颜色

    mainGraphGauss->setBrush(QColor(110, 170, 110, 30));    // 设置和x轴的闭合填充颜色
    mainGraphCos->setChannelFillGraph(mainGraphGauss);      // 修改第一条折线的默认闭合空间
    mainGraphCos->setBrush(QColor(255, 161, 0, 50));        // 设置和的第二条折线的闭合填充颜色, 注意, 闭合空间有重叠的部分, 后配置的会覆盖前配置的

在这里插入图片描述

  • 注意,添加折线使用函数,addGraph(),然后会返回句柄,使用该句柄配置折线,可以使用graph(0)获取已经添加的折线图层;
  • 注意,折线默认的闭合空间是和KeyAxis坐标轴,可以通过函数setChannelFillGraph()修改为特定曲线;
  • 注意,图像有重叠的优先级之分, 也可能是先后之分, 具体…自己实测吧.

7.画1个类似柱状图的图

    // # 7.画1个类似柱状图的图
    QCPGraph *subGraphRandom = customPlot->addGraph(subRectLeft->axis(QCPAxis::atBottom), subRectLeft->axis(QCPAxis::atLeft));
    subGraphRandom->data()->set(dataRandom);                // 设置数据
    subGraphRandom->setLineStyle(QCPGraph::lsImpulse);      // 设置直线类型 lsImpulse 每个数据点由一条平行于值轴的线表示，该线从数据点延伸到零值线
    subGraphRandom->setPen(QPen(QColor("#FFA100"), 1.5));   // 设置线颜色
    subGraphRandom->rescaleAxes();                          // 设置xy轴自适应

在这里插入图片描述

  • 注意使用函数rescaleAxes()一次性自适应两个轴,
  • 注意,纵坐标依旧只有两个主刻度;
  • 这个线的类型有点像柱状图;

8.画一个柱状图

    // # 8.画一个柱状图
    QCPBars *subBars = new QCPBars(subRectRight->axis(QCPAxis::atBottom), subRectRight->axis(QCPAxis::atRight)); // 添加一个柱状图
    subBars->setWidth(3/static_cast<double>(x3.size()));    // 设置柱状图的宽度, 计算平均一点
    subBars->setData(x3, y3);                               // 设置数据
    subBars->setPen(QPen(Qt::black));                       // 设置线颜色
    subBars->setAntialiased(false);                         // 设置此对象是否绘制为反锯齿
    subBars->setAntialiasedFill(false);                     // 设置此绘图对象的填充是否绘制为反锯齿
    subBars->setBrush(QColor("#705BE8"));                   // 设置柱状填充颜色
    subBars->keyAxis()->setSubTicks(false);                 // 刻度尺上的次刻度,隐藏
    subBars->rescaleAxes();                                 // 设置xy轴自适应

    // 为subBars键轴设置一个仅给出整数刻度的自动收报机：
    QSharedPointer<QCPAxisTickerFixed> intTicker(new QCPAxisTickerFixed); // 创建一个刻度
    intTicker->setTickStep(1.0);                            // 设置刻度的间距
    intTicker->setScaleStrategy(QCPAxisTickerFixed::ssMultiples); // 允许指定刻度步长的整数倍
    subBars->keyAxis()->setTicker(intTicker);               // 将该刻度对象赋值给凸显

在这里插入图片描述

  • 注意, 柱状图使用的是函数QCPBars(),不同于折线图,
  • 注意,柱状图一般都要关闭绘画抗锯齿;
  • 注意,柱状图要设置柱子的宽度,不然会密密麻麻连成一片;
  • 注意,柱状图一般要重新设置横坐标,

9.总结

  • 至此分析完成;
  • 上面的代码全部拼在一起就好了.
Qt：QCustomPlot类介绍
weiweiqiao的专栏
07-12 110
摘要：QCustomPlot是一个基于Qt的高性能图表库，其核心类QCustomPlot继承自QWidget，提供多层次绘图功能。支持多种图表类型（曲线图、柱状图、热力图等），具有双轴系统、交互式操作（缩放/平移/点选）和丰富的样式定制选项。通过分层绘制机制（6个默认图层）实现复杂图表组合，支持实时数据刷新和大容量数据渲染优化。典型应用包括科学可视化、工业监控和金融分析，并提供PDF/PNG导出功能。开发时只需添加图形、设置数据并调用replot()即可实现动态图表，是Qt环境下功能全面的数据可视化解决方案
QCustomPlot 曲线数据结构与存取
里先森
01-21 4121
通常，我们对QCustomPlot中的曲线数据无外乎增、删、改、查这几种操作。然而对于初次或者接触QCustomPlot时间不长的用户来说，其提供的曲线数据操作接口可能让人有些摸不着头脑。因此，在这里记录本人对QCustomPlot曲线数据操作的一些理解和经验，以供各位参考。
QCustomPlot之布局系统
09-30 2427
The Layout System布局系统 布局系统主要负责定位和缩放在QCustomPlot上的布局元素比如坐标轴矩形,图例和Plot标题。 Classes and mechanisms类和机制 布局系统基于抽象基类QCPLayoutElement.所有参与布局系统的对象都派生自此类,直接的或间接的。 布局元素的矩形 一个布局元素是一个矩形对象通过两个矩形被描述:内部矩
10.QCustomPlot 布局系统
港湾的专栏
03-11 3661
布局系统 布局系统负责定位和缩放布局元素，如QCustomPlot中的轴矩形、图例或颜色尺度。 类和机制 布局系统基于抽象基类QCPLayoutElement。所有参与布局系统的对象都直接或间接地从这个类派生。 由于QCPLayoutElement本身源自QCPLayerable，所以布局元素可以绘制自己的内容。然而，布局元素完全有可能只作为一个结构和/或定位元素，而不是自己绘制任何东西。 布局元素的矩形 布局元素是一个矩形对象，由两个矩形描述:内部矩形(QCPLayoutElement::re
QCustomPlot多个y轴一个x轴、实时绘制多条曲线
weixin_45074487的博客
03-27 4443
一、项目中结合树形目录勾选框，进行动态增加和删除勾选框，通过定时器模拟数据进行显示。4、//当鼠标放大缩小上下移动时 ，多段y轴x轴同步。3、x轴y轴数据同步，当放大缩小表格时；1、动态增加channel所对应的坐标系。2、动态删除channel所对应的坐标系。5、初始化QCustomPlot。2、多段y轴，共用同一个x轴；3、//多段y轴共用同一个x轴。1、动态增加/移除坐标系；
QCustomPlot之层和布局（四）
qq10097355的博客
03-13 3774
文章目录层和层元素布局和布局元素为图表添加标题为图例添加标题横向图例 层和层元素 在QCustomPlot中，一切可显示的对象都是继承自层元素QCPLayerable，层QCPLayer则管理着层元素，QCustomPlot利用层决定了不同元素的绘制顺序 布局和布局元素 在QCustomPlot中，布局方式只有两种： QCPLayoutGrid 网格布局 QCPLayoutInset 内嵌式布局...
高级绘图技巧：Matlab PLOT函数的深度应用
最新发布
06-26
本文深入探讨了Matlab中使用plot函数进行高级绘图的多种技巧，包括自定义线条样式、多线条图、图例和标签、轴限制和刻度、图形属性、交互式绘图、保存和导出图形以及动态和实时绘图。希望本文能够帮助读者提升Matlab...
plot_demo_QT_qt动态曲线_动态曲线_QCustomPlot曲线_qcustomplot
09-11
此外，QCustomPlot提供了一些高级特性，如图例、轴的自适应缩放、图例等。你可以根据需要调整这些属性，以满足你的视觉需求。例如，设置轴标题、刻度、范围等： ```cpp customPlot->xAxis->setLabel("X Axis"); ...
MATLAB Plot Gallery-设置轴位置：设置轴位置-matlab开发
05-29
这是如何在 MATLAB:registered: 中的绘图中设置轴位置的示例。 阅读 MATLAB 文档中的“XAxisLocation”属性。 此功能在 R2015b 或更新版本中可用。 有关更多示例，请转到 MATLAB 绘图库 - ...
plot3axisatorigin:PLOT3 轴通过原点。-matlab开发
06-01
% PLOT3AXISATORIGIN 绘制 3-D 空间中的线和点% 轴通过原点% ％ 用法： % Plot3AxisAtOrigin(sin([-3:.3:6]),cos([-3:.3:6])-0.75,[-1:.1:2],'r') % title('Plot3 with Axis through Origin'); % % 这不是花哨的，但...
pyladies_matplotlib_demo:用于聚会的Matplotlib演示19082015
05-15
2. **基本绘图**：介绍如何创建简单的二维图形，如绘制线图（`plt.plot()`）和散点图（`plt.scatter()`），以及如何设置x轴和y轴的标签、标题和图例。 3. **子图与布局**：展示如何在同一窗口内创建多个子图，以及...
qcustomplot绘图 设置横纵坐标间隔 刻度值标题 绘制样式
荼蘼花事了
12-01 1759
qcustomplot绘制图像
QCustomPlot绘制多条曲线在不同的位置
白鱼儿的博客
08-22 531
【代码】QCustomPlot绘制多条曲线在不同的位置。
2.绘图控件 - QCustomPlot示例
港湾的专栏
03-10 700
qt精美绘图控件 - QCustomPlot示例 下面展示一下它的超强功能：
QCustomPlot笔记——图例设置
u010774433的博客
05-11 8810
///标题和图例设置 ui->customplot_bar->plotLayout()->insertRow(0); QCPTextElement *title = new QCPTextElement(ui->customplot_bar, "bar", QFont("sans", 12, QFont::Bold)); ui->customplot_bar->plotLayout()->addElement(0, 0, title...
QCustomPlot实现图例置于底部
缘如风的博客
10-15 7273
简介：QCustomPlot是一个小型的Qt画图表的类。只需要包含.h和.cpp文件即可。支持曲线和柱状图等，具体查看官方文档。 http://www.qcustomplot.com/。 此例是实现图例位置的置于底部（此例是基于2.0.0版本）。查看相关Layouts帮助说明。默认是按照一行一列的方式添加的item。只要更改item的布局方式即可 效果如下 实现代码如下 void C...
QCustomPlot 2.0.1文档 Qt绘图类
qq_37377257的博客
06-30 280
链接
QCustomplot - 10.示例-山图
希望能帮助大家，希望大家多多支持，你们的支持是我前进的动力。
03-30 834
1.运行截图 2.源码 // set locale to english, so we get english month names: customPlot->setLocale(QLocale(QLocale::English, QLocale::UnitedKingdom)); // seconds of current time, we'll use it as starting point in time for data: double now = QDateTi.
Qt QCustomPlot 添加多个坐标系区域
DreamLife
12-23 5015
之前在使用`QCustomPlot`，是将他有封装成了一个模块，一个模块仅显示一条曲线，多个通道的数据对应多个`QCustomPlot`模块，目前在使用中唯一遇到的问题就是在调用`setOpenGL(true)`的时候，会把多个`QCustomPlot`模块间的数据搞乱了，由于能力有限，在各种尝试后，任然没有解决问题，只能暂时先关闭`OpenGL`渲染，这样理论上会增加`CPU`的负载，但是目前也是没有更好的办法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值