上位机数据可视化：使用QtCharts绘制波形图

工程配置

CMake文件

find_package(Qt5 COMPONENTS Charts REQUIRED)target_link_libraries(zhd-desktop PRIVATE Qt5::Charts)

包含头文件以及名称空间（这个很重要，没有包含名称空间编译器会提示找不到相关的类型）

#include <QtCharts>using namespace QtCharts;

初始化

初始化Chart

// 创建图表
QChart *chart = new QChart();
chart->setTitle("Valve Data");// 隐藏图例
chart->legend()->setVisible(false);// 创建图表视图
QChartView *chartView = new QChartView(chart);
chartView->setRenderHint(QPainter::Antialiasing);QHBoxLayout *hLayout = new QHBoxLayout(ui->view);
hLayout->addWidget(chartView);
hLayout->setContentsMargins(0, 0, 0, 0);

波形

每一道波形就是一个QLineSeries，每个QLineSeries都要和X轴和Y轴进行绑定

m_temperature = new QLineSeries();
m_temperature->setColor(Qt::red);
m_temperature->setPointsVisible(true);m_pressure = new QLineSeries();
m_pressure->setColor(Qt::blue);
m_pressure->setPointsVisible(true);m_position = new QLineSeries();
m_position->setColor(Qt::black);
m_position->setPointsVisible(true);m_pressureSetpt = new QLineSeries();
m_pressureSetpt->setColor(Qt::darkYellow);
m_pressureSetpt->setPointsVisible(true);

为了使波形更有区分度，需要配置不同的颜色，建议跟Y轴刻度的颜色保持一致，特别是轴比较多的情况下

void setAxisColor(QAbstractAxis *axis, const QColor &color)
{axis->setGridLineColor(color);axis->setLinePenColor(color);axis->setLabelsColor(color);axis->setTitleBrush(color);
}

X轴

X轴一般是时间轴，时分秒格式：hh:mm:ss

QDateTimeAxis *timeAxis = new QDateTimeAxis();
timeAxis->setTitleText("Time");
timeAxis->setFormat("hh:mm:ss");
chart->addAxis(timeAxis, Qt::AlignBottom);
series1->attachAxis(timeAxis);
series2->attachAxis(timeAxis);

Y轴

Y轴：左侧和右侧都可以添加刻度尺

// 左侧刻度尺
QValueAxis *pressureSetpt = new QValueAxis();
pressureSetpt->setTitleText("Pressure Setpt (Torr)");
pressureSetpt->setRange(0, 25);
chart->addAxis(pressureSetpt, Qt::AlignLeft);
series1->attachAxis(pressureSetpt);QValueAxis *pressure = new QValueAxis();
pressure->setTitleText("Pressure (Torr)");
pressure->setRange(0, 25);
chart->addAxis(pressure, Qt::AlignLeft);
series1->attachAxis(pressure);// 右侧刻度尺
QValueAxis *driverTemperature = new QValueAxis();
driverTemperature->setTitleText("Driver temperature");
driverTemperature->setRange(0, 100);
chart->addAxis(driverTemperature, Qt::AlignRight);
series2->attachAxis(driverTemperature);QValueAxis *positionAxis = new QValueAxis();
positionAxis->setTitleText("Position (%)");
positionAxis->setRange(0, 100);
chart->addAxis(positionAxis, Qt::AlignRight);
series2->attachAxis(positionAxis);

绘图

实时绘制波形点：往QLineSeries里边添加数据，用append接口

QDateTime currentTime = QDateTime::currentDateTime();
if(m_resumePause) {m_timeAxis->setRange(currentTime.addSecs(-10), currentTime);
}if(m_channels[0]) {m_pressure->append(currentTime.toMSecsSinceEpoch(), pressure);if (m_pressure->count() > m_max) {m_pressure->remove(0);}
}if(m_channels[1]) {m_position->append(currentTime.toMSecsSinceEpoch(), position);if (m_position->count() > m_max) {m_position->remove(0);}
}if(m_channels[2]) {m_pressureSetpt->append(currentTime.toMSecsSinceEpoch(), pressureSetpt);if (m_pressureSetpt->count() > m_max) {m_pressureSetpt->remove(0);}
}if(m_channels[3]) {m_temperature->append(currentTime.toMSecsSinceEpoch(), valveTemperature);if (m_temperature->count() > m_max) {m_temperature->remove(0);}
}

注意事项：

1.时间轴要实时移动到正确的时间窗口范围

2.QLineSeries波形点之后到达一定的数据量需要删除一些点以确保buffer不会写爆（频繁申请内存导致卡顿）

进阶

QtCharts自带的时间轴比较丑陋，如果想要定制的话，可以参考以下方法进行样式修改

  1. 自定义QValueAxis作为X轴
  2. 捕获QValueAxis::rangeChanged信号，获取QChartView里边的scene，同时也可以获取到刻度的左右边界min和max
  3. 删除scene（QGraphicsScene）里边的所有items，即原有的刻度不要了
  4. 在QGraphicsScene即基础上画刻度，每一个刻度就是一个QGraphicsLineItem

代码参考

// 动态修改 X 轴标签为时间格式，并绘制刻度线
QObject::connect(axisX, &QValueAxis::rangeChanged, [axisX, chartView](qreal min, qreal max) {QGraphicsScene *scene = chartView->scene();// 检查 min 和 max 是否有效if (qIsNaN(min) || qIsNaN(max) || qIsInf(min) || qIsInf(max)) {// qWarning() << "Invalid min or max value:" << min << max;return;}// 检查 plotArea 是否有效if (chartView->chart()->plotArea().width() <= 0 || chartView->chart()->plotArea().height() <= 0) {//  qWarning() << "Invalid plot area size";return;}// 清除旧的标签和刻度线for (QGraphicsItem *item : scene->items()) {if (item->data(0).toString() == "custom_label" || item->data(0).toString() == "custom_line") 		{scene->removeItem(item);delete item;}}// 生成 10 个刻度int tickCount = 10;  // 总共 10 个刻度qreal tickInterval = (max - min) / (tickCount - 1);  // 计算刻度间隔for (int i = 0; i < tickCount; ++i) {qreal value = min + i * tickInterval;// 检查 value 是否有效if (qIsNaN(value) || qIsInf(value)) {// qWarning() << "Invalid value:" << value;continue;}QDateTime dateTime = QDateTime::fromSecsSinceEpoch(value);// 计算刻度线的位置qreal x = chartView->chart()->plotArea().left() +(value - min) / (max - min) * chartView->chart()->plotArea().width();// 检查 x 是否有效if (qIsNaN(x) || qIsInf(x)) {// qWarning() << "Invalid x coordinate:" << x;continue;}// 只在偶数刻度绘制时间标签和黑线if (i % 2 == 0) {// 绘制时间标签QString label = dateTime.toString("hh:mm:ss");QGraphicsTextItem *textItem = scene->addText(label);qreal textWidth = textItem->boundingRect().width();  // 获取标签宽度qreal textHeight = textItem->boundingRect().height();  // 获取标签高度// 调整标签位置，使其居中对齐刻度线textItem->setPos(x - textWidth / 2, chartView->chart()->plotArea().bottom() + 10);textItem->setData(0, "custom_label");  // 标记为自定义标签// 绘制黑线qreal lineLength = 10;  // 刻度线长度QGraphicsLineItem *lineItem = scene->addLine(x, chartView->chart()->plotArea().bottom(),x, chartView->chart()->plotArea().bottom() + lineLength,QPen(Qt::black));lineItem->setData(0, "custom_line");  // 标记为自定义刻度线}}
});

打包

软件打包，需要添加Qt5Charts这个dll

Qt5Charts.dll

版权

版权问题，商用的话可能会被Qt请喝茶
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/pingmian/72663.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

S32K144入门笔记（十三）：LPIT的API函数解读

S32K144入门笔记（十三）：LPIT的API函数解读

目录 1. SDK中的函数 2. API函数的释义 2.1 获取默认参数 2.2 初始化 2.3 启动与停止 2.4 计数值的设置于读取 2.5 中断API 1. SDK中的函数 在使用SDK的非抽象驱动函数时&#xff0c;函数的定义与声明在文件lpit_driver.c和lpit_driver.h中&#xff0c;一共有19个函数&a…
阅读更多...
CSS - Pseudo-classes(伪类选择器)

CSS - Pseudo-classes(伪类选择器)

目录 一、介绍二、常用种类三、案例实现案例一&#xff1a;a标签使用link/visited/hover/active案例二&#xff1a;表单元素使用focus/disabled案例三、通过其余伪类实现元素灵活选中 一、介绍 CSS 伪类&#xff08;Pseudo-classes&#xff09; 用于定义元素的特定状态或结构位…
阅读更多...
http proxy的原理是什么

http proxy的原理是什么

Http代理的原理 代理服务器会自动提取请求数据包中的HTTP请求数据发送给服务端&#xff0c;并将服务端的HTTP响应数据转发给发送请求的客户端&#xff0c;HTTP代理服务器使用的端口通常是8080。 对于Web客户端来说&#xff0c;代理扮演的服务器角色&#xff0c;接收请求&…
阅读更多...
Ubuntu22.04虚拟机里安装Yolov8流程

Ubuntu22.04虚拟机里安装Yolov8流程

1. 安装pytorch sudo apt install nvidia-cuda-toolkit nvcc --version # 官方适配地址&#xff1a;https://download.pytorch.org/whl/torch/import torch print(torch.__version__) print(torch.cuda.is_available())2. 安装环境 # cuDNN 安装&#xff1a;https://develop…
阅读更多...
神经网络微调技术解析

神经网络微调技术解析

神经网络微调技术 微调&#xff08;Fine-tuning&#xff09;是迁移学习的核心技术&#xff0c;通过在预训练模型基础上调整参数&#xff0c;使其适应特定任务或领域。以下从传统方法、参数高效微调&#xff08;PEFT&#xff09;、新兴技术三个维度展开&#xff0c;覆盖主流技术…
阅读更多...
Spring 声明式事务管理

Spring 声明式事务管理

Spring 编程的方式实现事务管理&#xff0c;这样太过麻烦&#xff0c;需要在每个方法上面加上相应的事务处理操作&#xff0c;声明式事务处理能够很好的解决这个问题&#xff0c;比如通过tx命名空间&#xff0c;这样只需要配置就可以检测到相关的方法&#xff0c;或者是通过tra…
阅读更多...
电机控制常见面试问题（十五）

电机控制常见面试问题（十五）

文章目录 一、电机气隙二、电气时间三.电机三环控制详解四.驱动板跳线意义五.电机开环自检 一、电机气隙 电机气隙是定子和转子之间的空隙&#xff0c;防止钉子转子运转时物理接触&#xff0c;此外&#xff0c;气隙是磁路的重要环节&#xff0c;磁场需通过气隙传递能量&#x…
阅读更多...
代码随想录算法训练营第六十五天| 图论10

代码随想录算法训练营第六十五天| 图论10

Bellman_ford 队列优化算法&#xff08;又名SPFA&#xff09; 代码随想录 import collectionsdef main():n, m map(int, input().strip().split())edges [[] for _ in range(n 1)]for _ in range(m):src, dest, weight map(int, input().strip().split())edges[src].append…
阅读更多...
Chat2DB：让数据库管理像聊天一样简单

Chat2DB：让数据库管理像聊天一样简单

数据库工具的痛点与破局 在数据爆炸的时代&#xff0c;数据库管理工具已成为企业高效运营的刚需。然而&#xff0c;传统工具如Navicat、DBeaver虽功能强大&#xff0c;却让非技术人员和SQL新手望而却步。复杂的界面、繁琐的手动操作、晦涩的语法规则&#xff0c;成为横亘在数据…
阅读更多...
Navicat for Snowflake 震撼首发，激活数据仓库管理全新动能

Navicat for Snowflake 震撼首发，激活数据仓库管理全新动能

近日&#xff0c;Navicat 家族迎来了一位全新成员 — Navicat for Snowflake。Snowflake 是一款基于云架构的现代数据仓库解决方案&#xff0c;以其弹性扩展、高性能和易用性著称。这次首发的Navicat for Snowflake 专为简化 Snowflake 数据库管理任务而精心打造。它凭借其直观…
阅读更多...
【项目合集】智能语音小车-微信小程序控制

【项目合集】智能语音小车-微信小程序控制

功能需求&#xff1a; 车子检测环境温度、湿度&#xff0c;上报 APP、WEB 端显示实时数据可通过 APP 控制小车前进、左转、右转可通过语音控制小车前进后退车上一个 LED 灯&#xff0c;可通过 WEB、小程序控制在 APP、WEB 上均可注册登录 硬件清单 硬件 功能 备注 ESP32 …
阅读更多...
人工智能与人的智能，改变一生的思维模型分享【4】决策树

人工智能与人的智能，改变一生的思维模型分享【4】决策树

决策树&#xff08; DECISION TREE&#xff09; 一般由一个决策图和若干可能的结果组成。是一种通过罗列解题的关键步骤以及各步骤发生的条件和结果&#xff0c;由此来创建到达目标的规划。 我们很早就知道有一个方法&#xff0c;叫做当你苦闷、纠结的时候&#xff0c;把你的所…
阅读更多...
利用余弦相似度在大量文章中找出抄袭的文章

利用余弦相似度在大量文章中找出抄袭的文章

我前面的2篇文章分别讲了如果利用余弦相似度来判断2篇文章的相似度&#xff0c;来确定文章是否存在抄袭&#xff0c;和余弦相似度的原理&#xff0c;即余弦相似度到底是怎么来判断文章的相似性高低的等等。这一篇再说下&#xff0c;对于文章字数多和大量文章时&#xff0c;如果…
阅读更多...
设计模式-对象创建

设计模式-对象创建

对象创建 前言1. Factory Method1.1 模式介绍1.2 模式代码1.2.1 问题代码1.2.2 重构代码 1.3 模式类图1.4 要点总结 2. Abstract Factory2.1 模式介绍2.2 模式代码2.2.1 问题代码2.2.2 重构代码 2.3 模式类图2.4 要点总结 3. Prototype3.1 模式介绍3.2 模式代码3.3 模式类图3.4…
阅读更多...
SQLAlchemy系列教程：批量插入数据

SQLAlchemy系列教程：批量插入数据

高效地批量插入数据对于应用程序的性能至关重要。SQLAlchemy为批处理操作提供了几种机制&#xff0c;可以最大限度地减少开销并加快数据库事务时间。在本指南中&#xff0c;我们将探讨如何使用SQLAlchemy执行批量插入&#xff0c;包括从基础技术到高级技术。 搭建环境 在开始之…
阅读更多...
V2X验证

V2X验证

1. 标准和规范验证 欧洲对 DSRC 和 V2X 系统有一系列的标准和规范，主要由 ETSI (European Telecommunications Standards Institute) 和 IEEE 等组织制定。验证通常包括以下标准和规范： ETSI EN 302 571：这是DSRC在欧洲的主要标准，规定了DSRC系统的技术要求和操作条件。ET…
阅读更多...
openEuler系统迁移 Docker 数据目录到 /home，解决Docker 临时文件占用大问题

openEuler系统迁移 Docker 数据目录到 /home，解决Docker 临时文件占用大问题

根据错误信息 write /var/lib/docker/tmp/...: no space left on device&#xff0c;问题的根源是 根分区&#xff08;/&#xff09;的磁盘空间不足&#xff0c;而非 /home 分区的问题。以下是详细解释和解决方案&#xff1a; 问题原因分析 Docker 临时文件占用根分区空间&…
阅读更多...
Matlab 四分之一车辆被动悬架和模糊pid控制对比

Matlab 四分之一车辆被动悬架和模糊pid控制对比

1、内容简介 Matlab 183-四分之一车辆被动悬架和模糊pid控制对比 可以交流、咨询、答疑 2、内容说明 略 3.1 车辆多自由度模型建立 对于车辆动力学&#xff0c;一般都是研究其悬架系统&#xff0c;悬架系统由轮胎&#xff0c;轮胎空气&#xff0c;弹簧&#xff0c;减震器和…
阅读更多...
LabVIEW旋转设备状态在线监测系统

LabVIEW旋转设备状态在线监测系统

为了提高大型旋转设备如电机和水泵的监控效率和故障诊断能力&#xff0c;用LabVIEW软件开发了一套实时监测与故障诊断系统。该系统集成了趋势分析、振动数据处理等多项功能&#xff0c;可实时分析电机电流、压力、温度及振动数据&#xff0c;以早期识别和预报故障。 ​ 项目背…
阅读更多...
微前端 无界wujie

微前端 无界wujie

开发环境配置: Node.js 版本 < 18.0.0 pnpm 脚手架示例模版基于 pnpm turborepo 管理项目 如果您的当前环境中需要切换 node.js 版本, 可以使用 nvm or fnm 进行安装. 以下是通过 nvm 或者nvs 安装 Node.js 16 LTS 版本 nvs安装教程 https://blog.csdn.net/glorydx/artic…
阅读更多...
最新文章

Copyright @ 2022~2023