Qt实时曲线图实战：QCustomPlot+kissfft串口数据可视化与性能调优

简介面向QT与C开发者的曲线图制作实战资源适合需要掌握QT绘图机制、模型/视图架构及自定义图形项的中级开发者。资源围绕曲线图完整实现展开覆盖QPainter绘图、QGraphicsView/Scene场景搭建、QGraphicsPathItem与QPainterPath路径构建以及线性插值、贝塞尔/样条插值和平滑算法等关键点并引入鼠标键盘事件处理以支持缩放拖拽交互代码按数据处理、曲线绘制与事件逻辑拆分便于维护和二次扩展。压缩包共261个文件其中以240个idx索引/缓存文件为主另有cpp、h、ui、pro等工程源码obj、makefile、pdb与debug/release配置等编译辅助文件整体仅1.81MB结构紧凑。已有689人学习下载适合在真实工程中对照练习QT图形绘制与交互设计。 直接开篇说结论在Qt项目里做实时曲线图如果还在用QPainter一个个画点、或者费劲折腾QChart的性能问题这篇文章就是给你看的。我从一个实际的数据采集项目出发完整走了一遍串口取数 - 时域波形绘制 - FFT变换到频域谱 - 性能调优 - windeployqt打包分发的全流程把QCustomPlot和kissfft怎么配合、采样率怎么定、为什么你会遇到绘制卡顿频谱对不上打包后闪退这些坑一次说清楚。1. 方案选型为什么是QCustomPlot而不是QChart先说结论如果项目里只需要二维曲线、波形、柱状图这些常规图表QCustomPlot几乎是最省心的选择。我在做这个数据采集项目之前也试过QChart它作为Qt官方图表模块功能确实全面但在实时高频刷新这个场景下表现并不理想。1.1 两者在实时绘制场景的真实差距QChart底层走的是Qt Charts图形场景架构每一次append新数据点都会触发场景重绘当数据量积累到几千个点、每秒刷新30帧以上时CPU占用会明显上升UI线程时不时掉帧。而QCustomPlot直接操作QCPGraph的数据容器配合QCPAxis的数据范围更新用replot()做局部重绘性能要好一截。我实测的一个参考数据在Release模式下向图表里追加10000个数据点并每秒刷新20次QCustomPlot在我那台i5-9400F的机器上CPU占用约12%到18%QChart在同场景下能到30%以上而且拖动缩放时明显感觉粘滞。1.2 QCustomPlot的许可证和集成成本有人担心QCustomPlot的License问题其实它采用MIT许可证商用完全没问题。集成方式也极简只需要把qcustomplot.h和qcustomplot.cpp两个文件加进工程配置好C11标准即可。相比起装QChart模块还要处理.pro文件里QT charts的依赖关系和版本兼容QCustomPlot几乎没有集成门槛。注意QCustomPlot不是纯头文件库它是需要编译的。所以项目里如果要release给客户记得把QCustomPlot相关代码一起编进exe或dll别漏了。1.3 老版本和Qt版本兼容性问题我项目里用的是Qt 5.15.2 MSVC2019组合QCustomPlot的官方Release版本基本都能直接用。但如果你在用MinGW编译建议从官网下载匹配的编译版本或者直接用源码重新编译一次否则偶尔会遇到__imp___ZN...这类符号找不到的链接错误本质就是编译链不一致导致的。2. 数据从哪来串口采集与一帧数据的解析流程曲线图要想有数据可画第一步是把数据源打通。我这边的项目是通过串口从下位机读取传感器波形数据这一节就完整说下串口部分的设计逻辑。2.1 串口通信的基础配置使用QSerialPort类需要先了解设备的波特率、数据位、停止位、校验位。下位机上报的协议是典型的二进制帧格式QSerialPort serial; serial.setPortName(COM3); serial.setBaudRate(QSerialPort::BaudRate::Baud115200); serial.setDataBits(QSerialPort::DataBits::Data8); serial.setStopBits(QSerialPort::StopBits::OneStop); serial.setParity(QSerialPort::Parity::NoParity); serial.setFlowControl(QSerialPort::FlowControl::NoFlowControl); if (!serial.open(QIODevice::ReadWrite)) { qDebug() 串口打开失败 serial.errorString(); return false; } connect(serial, QSerialPort::readyRead, this, DataReceiver::onReadyRead);这里有几个容易踩的坑如果下位机波特率不标准比如19200、256000QSerialPort里没有对应枚举值需要写成serial.setBaudRate(19200);它会自动转为qint32处理。打开串口后要做错误处理比如串口被其他程序占用时会返回PermissionDeniedError。Windows下串口号要带COM前缀Linux下是/dev/ttyUSB0或/dev/ttyS0这种绝对路径。2.2 拆帧与粘包处理的实现思路串口数据是字节流不存在一次readyRead就是完整一帧的说法。我的做法是维护一个QByteArray buffer每次收到数据就append进去然后按帧头、帧长度做循环解析。比如协议格式是帧头 0xAA 0x55 | 数据长度(2字节) | 通道号(1字节) | 采样点数据(N个uint16) | CRC(2字节) | 帧尾 0x0D 0x0A代码如下void DataReceiver::onReadyRead() { buffer.append(serial.readAll()); while (buffer.size() 6) { // 至少帧头长度帧尾 if (isFrameHeader(buffer)) { int frameLen getFrameLength(buffer); // 解析完整帧长度 if (buffer.size() frameLen) { break; // 数据不完整等下一次readyRead } QByteArray frame buffer.left(frameLen); buffer.remove(0, frameLen); handleFrame(frame); } else { buffer.remove(0, 1); // 丢垃圾字节找回帧头 } } }2.3 为什么我建议把解析和绘制拆成两个线程串口数据解析、FFT计算、界面刷新如果全塞在主线程里UI容易卡。实际项目中我是这样设计的串口线程负责读串口、拆帧、解析得到double数组。工作线程负责做FFT、数学计算。主线程定时器每20ms到50ms从缓冲队列里取最新数据更新曲线。用Qt信号槽连接时queued connection会自动跨线程投递不用手动加锁前提是别在线程里直接操作QCustomPlot对象UI对象必须在主线程创建和访问。3. 时域波形图与频域图从漫无目的画图到数据有意义曲线图到底要呈现什么我项目里直接复用同一套数据同时做两幅图一幅显示时域波形横轴时间、纵轴幅值另一幅显示FFT频域谱横轴频率、纵轴能量。这也是热搜词里qt时域图转换为频域图想解决的事情。3.1 时域图核心操作QCustomPlot的绑定与刷新初始化时域图// 在初始化函数里 customPlot-addGraph(); // 添加一条曲线 customPlot-graph(0)-setPen(QPen(QColor(0, 120, 255))); customPlot-xAxis-setLabel(QStringLiteral(时间 (ms))); customPlot-yAxis-setLabel(QStringLiteral(幅值)); customPlot-xAxis-setRange(0, 1000); // 显示最近1000ms的数据窗口 customPlot-yAxis-setRange(-2048, 2048); // 根据传感器量程数据更新时我采用的是滚动窗口模式即只保留最近N个点void RealTimePlot::updateWaveform(const QVectordouble sampleData) { // 每来一批数据追加到时序序列尾部并移除头部旧数据 timeData.append(sampleData); if (timeData.size() maxPoints) { timeData.remove(0, timeData.size() - maxPoints); } QVectordouble keys(timeData.size()); for (int i 0; i timeData.size(); i) { keys[i] i * sampleIntervalMs; // 采样间隔计算时间轴 } customPlot-graph(0)-setData(keys, timeData); customPlot-xAxis-setRange(keys.first(), keys.last()); customPlot-replot(QCustomPlot::rpQueuedReplot); }有一个优化点值得提一下replot(QCustomPlot::rpQueuedReplot)会把重绘请求排队避免在极短时间内大量重绘导致CPU空转。如果追求极限性能可以再用QTimer定时器合并刷新比如20ms刷一次效果更平滑。3.2 为什么不能直接把时域数据扔给FFTkissfft的输入输出规则FFT的输入是复数数组但对实数信号来说虚部填0即可。接着需要确定窗口大小——FFT点数通常是2的幂次如512、1024、2048。我项目里用的是kissfft这个轻量级FFT库。它只有一个头文件和一个源文件集成方式和QCustomPlot一样简单不依赖额外库很适合嵌入式桌面项目。// 初始化kissfft int nfft 1024; kiss_fft_cfg cfg kiss_fft_alloc(nfft, 0, nullptr, nullptr); std::vectorkiss_fft_cpx fin(nfft); std::vectorkiss_fft_cpx fout(nfft); // 填充时域数据取最近nfft个采样点加窗函数 for (int i 0; i nfft; i) { int idx timeData.size() - nfft i; if (idx 0) { double windowed timeData[idx] * hannWindow[i]; fin[i].r windowed; fin[i].i 0.0; } } kiss_fft(cfg, fin.data(), fout.data()); // 计算幅值谱 for (int i 0; i nfft / 2; i) { double mag sqrt(fout[i].r * fout[i].r fout[i].i * fout[i].i) * 2.0 / nfft; freqData.append(mag); }这里有个新手非常容易犯的错直接用timeData的最后N个点去做FFT但实际采集频率不稳定导致频谱泄漏和栅栏效应。我通常先做一个采样率估计再结合窗函数汉宁窗进行平滑绘制出来的频域谱才准确。3.3 频率轴的计算与物理意义频率轴每个bin对应的实际频率是freqResolution sampleRate / nfft假设采样率是1000Hznfft1024则频率分辨率为约0.9766Hz第i个点的频率为i * freqResolution。所以频率轴代码QVectordouble freqAxis(nfft / 2); double freqRes sampleRate / nfft; for (int i 0; i nfft / 2; i) { freqAxis[i] i * freqRes; }如果你发现频谱的峰值位置和信号实际频率对不上先检查freqRes算得对不对再检查采样率是否准确。我调试时遇到过下位机实际是998Hz而代码里写死1000Hz峰值偏了大概2Hz肉眼看不出来但导致后续幅度谱分析的阈值判断偏差了。3.4 加窗函数到底加不加做FFT时如果直接截断信号会造成频谱泄漏导致一个单频信号的能量泄露到多个频点表现为主峰旁边出现裙边。汉宁窗是最常用的通用窗std::vectordouble hannWindow(nfft); for (int i 0; i nfft; i) { hannWindow[i] 0.5 * (1.0 - cos(2.0 * M_PI * i / (nfft - 1))); }加了窗之后频率分辨率会有轻微下降但幅值准确度更高、旁瓣更低。如果项目关注的是幅值检测用汉宁窗如果更关注频率分辨率可以用矩形窗不加窗但要接受频谱泄漏的风险。4. 性能调优从拖动卡顿到丝滑刷新的三条关键路径实时曲线最怕的就是越画越卡。我调优过程中验证了三条路径按性价比排序分别是批量更新数据、限制绘制点数量、开启OpenGL加速。4.1 用setData批量替换而不是addData逐点追加QCPGraph的addData接口虽然方便但每次调用都会维护内部数据结构。当点的数量达到万级逐点addData的性能会极速下降。正确姿势是// 一次性传送整个数组而不是循环调用addData customPlot-graph(0)-setData(keys, values); customPlot-rescaleAxes(false); customPlot-replot();setData直接整体替换数据容器内部会做一次高效的内存搬运比逐点追加至少快一个数量级。4.2 限制可视区域的数据点数绘制2万个点时很多点其实已经重叠到看不清了。为了视觉清晰度和渲染性能我设置一个可视窗口内最多显示1万个点超过就做降采样。最简单的降采样方式就是平均抽样int step std::ceil(double(totalSize) / maxDisplayPoints); QVectordouble downSampledKeys, downSampledValues; for (int i 0; i totalSize; i step) { downSampledKeys.append(keys[i]); downSampledValues.append(values[i]); }这在观感上相当于对数据做了一次箱式滤波对于波形轮廓显示完全足够。4.3 OpenGL加速和抗锯齿的取舍QCustomPlot从2.0版本开始支持OpenGL绘制。启用方式是customPlot-setOpenGl(true);启用之后画高密度曲线的FPS有明显提升但也要注意两个副作用OpenGL在高DPI缩放下文字渲染可能模糊需要额外设置。部分驱动不兼容会出现黑屏或闪烁需要在程序里做fallback。我自己的实测不开OpenGL绘制12000个点、每秒刷新30次时CPU约为25%开启OpenGL后降到8%左右。但如果功能机上显卡驱动老旧开了反而崩溃。稳妥做法是做一个设置项默认开出问题时允许关闭。时刻记住一个原则优先减少绘制数据量其次再考虑硬件加速。数据量降到几千个点以后开不开OpenGL差别没那么大维护成本却能省很多。5. 打包发布windeployqt的正确用法与常见崩溃排查项目做完了最后要交付成一个可以双击运行的exe。这一节讲的是我打包时踩过的三个真实坑每一件都让人印象深刻。5.1 windeployqt基本步骤在Qt安装目录的对应工具链bin目录下运行cd /path/to/your/build/release /path/to/Qt/5.15.2/msvc2019/bin/windeployqt.exe MyApp.exe它会自动复制Qt运行库、platform插件、编译链相关的dll到exe同目录。比如Qt5Core.dll、Qt5Gui.dll、Qt5Widgets.dll以及关键的platforms/qwindows.dll。注意不要在Debug目录用windeployqt部署会有Debug版本的dll依赖分发后表现异常甚至崩溃。5.2 Windows no Qt platform plugin could be initialized 错误的真实原因很多人部署完双击exe直接弹出这个错误然后应用闪退。这句话的意思是Qt没找到platforms/qwindows.dll。有几个常见原因platforms目录放错位置它必须在exe同级目录下、名为platforms的文件夹内。有些时候windeployqtOut-of-Date不会自动创建就需要手动检查。路径含中文某些Qt版本对非ASCII路径支持不完善把项目文件放在纯英文路径下能避免问题。VC运行库缺失MSVC编译的Qt程序依赖vcruntime140.dll、msvcp140.dll等目标机器上没装VC Redistributable也会出现类似崩溃。验证方式很简单在exe同目录下打开cmd运行set PATH你的Qt\bin;%PATH%再启动exe。如果这样能起来说明是缺dll或插件路径问题按上面逐条排查。5.3 打包后无法读取相对路径资源很多曲线图程序会把配置文件、主题样式放在exe同目录下。打包后如果直接双击exe通常没事但如果通过快捷方式启动工作目录可能不在exe目录导致相对路径失效。我统一用一套工具函数获取exe真实路径QString getAppDir() { return QCoreApplication::applicationDirPath(); } QString getResourcePath(const QString fileName) { return QDir(getAppDir()).filePath(fileName); }所有读配置、读图标、保存日志的操作必须基于applicationDirPath()拼出来的绝对路径千万别依赖QDir::current()。5.4 调试崩溃的终极大法用Qt Creator的Release构建再跑一遍如果发布的exe崩溃但在Qt Creator里却正常通常是因为调试和发布的环境差异。我的经验是在Qt Creator里切到Release构建模式直接运行MyApp.exe配合qDebug输出能很快定位是缺少dll还是代码中有未定义行为。另外如果代码里用了assert或某些依赖Debug环境下才产生的行为Release下被优化掉后行为会变这类问题往往只能靠日志逐步缩小范围。6. 进阶思考多个通道、波形缩放和坐标轴联动做完基础的曲线图之后还可以往这几个方向加功能让项目更完整。这些都是我在实际项目里反复打磨过的点。6.1 多通道数据同图显示传感器可能不止一路输出代码里只需为每个通道创建独立的QCPGraphQCPGraph* graph1 customPlot-addGraph(); QCPGraph* graph2 customPlot-addGraph(); graph1-setPen(QPen(QColor(220, 60, 60))); graph2-setPen(QPen(QColor(60, 160, 60)));分别setData后统一replot()。图例用QCPLegend展示customPlot-legend-setVisible(true); graph1-setName(QStringLiteral(通道1)); graph2-setName(QStringLiteral(通道2));6.2 鼠标框选缩放QCustomPlot在setInteractions里启用iRangeDrag | iRangeZoom之后就可以天然支持鼠标拖拽平移和滚轮缩放这个特性对查看波形细节非常管用。customPlot-setInteractions(QCP::iRangeDrag | QCP::iRangeZoom);如果你的需求是框选某个区间放大查看就需要用QCPSelectionRect或自己实现一个RubberBand。我最终采用的是双图联动方案上方大图显示全貌下方小图显示缩放范围鼠标拖动下方小图的选区和上方大图的显示范围同步变化。6.3 坐标轴游标和数值读取要做一个跟随鼠标移动读取曲线的数值功能可以通过QCPGraph::coordsToPixels和QCustomPlot::pixelsToCoords完成坐标换算// 在主窗体的mouseMove事件里 double xVal customPlot-xAxis-pixelToCoord(event-pos().x()); double yVal customPlot-yAxis-pixelToCoord(event-pos().y()); QCPGraphDataContainter::const_iterator it graph-data()-findBegin(xVal); // 通过迭代器找到最近的采样点并显示其坐标这套实现不难但对用户体验提升非常明显调试数据时能点到哪读到哪比对着图表肉眼看准得多。7. 踩坑记录我花了两天才解决的三个问题最后分享三个我在曲线图制作过程中花了大时间排查的问题每个都是真实经历希望对你有帮助。7.1 问题一绘制的曲线像锯齿而不是光滑曲线现象数据点没问题但波形显示出来后棱角分明特别是放大后很丑。原因没有启用抗锯齿也没有设置点的线宽。解决customPlot-graph(0)-setAntialiasedFill(false); customPlot-graph(0)-setAntialiased(true); customPlot-graph(0)-setLineStyle(QCPGraph::lsLine); QPen pen; pen.setWidthF(1.5); customPlot-graph(0)-setPen(pen);另外检查是不是绘制了点形状setScatterStyle默认散射点也会让曲线显得碎。7.2 问题二频域图幅度和理论值对不上现象一个幅度1.0的正弦波FFT后主峰幅度却不是1.0偏大或偏小。原因没有正确归一化也没有处理窗函数带来的幅度衰减。汉宁窗会让主峰幅度降低约一半。解决做窗函数补偿。计算幅值时除以窗系数平均值coherent gain汉宁窗约为0.5即double amplitude (fout[i].r * fout[i].r fout[i].i * fout[i].i); double magnitude std::sqrt(amplitude) * 2.0 / (nfft * coherentGain);7.3 问题三程序运行1小时后内存持续上涨现象长时间运行占用内存越来越高。原因曲线数据无限增长timeData一直append没有清理旧数据。解决给timeData设一个最大长度超过就移除头部。再配合定时器主动setData确保内存恒定。我项目里最大点数设置的是10万单个double是8字节算下来才800KB一个通道完全可控。if (timeData.size() maxPoints) { timeData.remove(0, timeData.size() - maxPoints); }如果还想更省可以在每个通道内部单独维护历史数据而不是把所有通道数据混在一个大向量里。根据我个人的项目经验Qt曲线图这块内容想要做扎实简化后的技术栈就是QCustomPlot画图、kissfft做频域转换、QSerialPort取实时数据、windeployqt打包分发。把这四样吃透绝大多数桌面端数据可视化的需求你都能搞定。真要说一个最重要的心得其实就一句话先保证数据质量再优化绘图性能。数据不对时图再炫也白搭。本文还有配套的精品资源点击获取