各位做数据可视化的朋友尤其是从PyQt/PySide转过来的应该都有过这种感受用Matplotlib画多子图交互一多就卡成PPT用QChart吧实时刷新时的性能又让人挠头。我自从项目里换到PyQtGraph之后基本就回不去了。这篇是PyQtGraph应用系列的第三篇专门聊自定义多图表图形绘制——不只是把几个图拼在一个窗口里而是把坐标轴、刻度、联动、性能这些细节全部自定义到顺手为止。如果你正在做实时波形监控、多通道传感器数据展示或者金融K线副图这类界面这篇文章应该能帮你少踩不少坑。先说清楚这篇解决什么问题第一怎么用GraphicsLayoutWidget和Qt布局两种方式搭建多图表界面第二坐标轴如何彻底自定义包括时间轴、固定刻度、中文显示第三多图之间如何联动缩放和共享十字光标第四实时刷新时怎么写出不卡界面、不闪屏的代码。所有代码都基于PyQtGraph 0.13.xPython 3.9环境Qt绑定库用PySide6或PyQt5均可。1. 为什么需要自定义多图表以及第一版架子怎么搭1.1 多图表到底用在什么场景多图表不是摆着好看而是业务场景里真的有强需求。以我最近在做的多通道数据采集上位机为例界面上同时存在三组关系密切但又不能合并的图形原始波形、滤波后的波形、以及实时频谱。这三组数据如果画在同一个坐标系里互相遮挡、量纲不同基本没法看。拆成多个图表后又能通过共享X轴或者十字光标关联起来这才是多图表的核心价值。类似的场景还有金融行情K线主图配成交量子图再配MACD副图三个图共享同一个时间轴实验室设备温度、压力、流量三路传感器数据同一时间段内对比关联生物电信号脑电EEG多通道波形每个通道一栏逐行排列性能测试工具CPU占用率、内存、线程数三个趋势图实时滚动刷新。这些场景的共同点是图表数量在2到8个之间每个图有自己的Y轴语义但X轴必须对齐。这恰好是PyQtGraph最擅长的领域。1.2 先理解PyQtGraph的两种多图容器开始敲代码之前必须先搞清楚PyQtGraph里两个容易混淆的组件。一个是GraphicsLayoutWidget一个是PlotWidget。GraphicsLayoutWidget本质上是一个GraphicsView加上内部的GraphicsLayout。你可以把它理解为一个画布在这个画布上通过addPlot(row, col)的方式网格化排列多个绘图区域。这是PyQtGraph官方推荐的多图表方案优点是布局紧凑、共享场景十字光标跨图联动实现起来非常方便。PlotWidget则是一个独立的QWidget子类内部封装了一个PlotItem。它可以像普通Qt控件一样添加到QVBoxLayout、QGridLayout里。这种方式的优点是布局灵活性更高可以和其他Qt控件按钮、标签、表格混排风格更接近传统Qt应用。两者不是互斥的。我的习惯是纯图形监控界面用GraphicsLayoutWidget带控制面板的复杂工具界面用PlotWidget Qt布局。下面这段代码是一个三图仪表盘的骨架用GraphicsLayoutWidget实现import sys import pyqtgraph as pg from pyqtgraph.Qt import QtWidgets pg.setConfigOptions(antialiasTrue) app QtWidgets.QApplication(sys.argv) win pg.GraphicsLayoutWidget() win.setWindowTitle(PyQtGraph 多图表示例) win.resize(1000, 700) # 三行一列每个格子放一个绘图区 p1 win.addPlot(row0, col0, title原始波形) p2 win.addPlot(row1, col0, title滤波波形) p3 win.addPlot(row2, col0, title实时频谱) win.show() sys.exit(app.exec())这样出来的界面已经是一个三行的图表组了。但要注意addPlot每次调用都会创建一个新的PlotItem并放到指定行列。如果你还想让后面两个图共享X轴和Y轴范围rowspan和colspan参数也很有用比如让某个图横跨两列p_big win.addPlot(row0, col0, colspan2, title宽图) p_small win.addPlot(row0, col2, title窄图)1.3 第一个必须养成的习惯保住引用PyQtGraph新手最容易犯的错就是直接把addPlot的返回值丢掉或者把PlotWidget塞进布局后没有保存引用。例如win.addPlot(row0, col0) # 返回值没保存后面没法操作这会导致后续你想调用setData、setRange、setLabel时找不到对象。正确做法是把每个PlotItem存成实例属性或者放进一个字典/列表里。多图表一旦多起来建议用列表统一管理self.plots [] for i in range(3): p win.addPlot(rowi, col0) self.plots.append(p) # 后续通过 self.plots[0]、self.plots[1] 访问我见过不少同事在项目初期图少的时候不存引用后期要加联动时被迫重构界面代码。这种代价完全没有必要。2. 多图表布局的两条路线网格布局与Qt布局的取舍2.1 GraphicsLayoutWidget的网格控制细节GraphicsLayoutWidget的addPlot方法支持row、col、rowspan、colspan四个位置参数理解它们就能摆出绝大多数布局。举个例子如果我想要一个左侧大图 右侧两小图的布局代码是这样win pg.GraphicsLayoutWidget() left_plot win.addPlot(row0, col0, rowspan2, title主图) right_top win.addPlot(row0, col1, title副图1) right_bottom win.addPlot(row1, col1, title副图2)rowspan2让左侧主图占了两行的高度右侧两图各占一行。这样布局出来的界面三个图的宽度高度比较灵活不像单纯三行一列那样死板。在实际项目里我还经常在GraphicsLayoutWidget中插入文本标签作为小标题分组。比如在波形区域上方加一行通道一传感器的文字win.addLabel(通道一, row0, col0, colspan2) p1 win.addPlot(row1, col0) p2 win.addPlot(row1, col1)注意addLabel也占用网格行列如果忘了给它腾出row0的位置图表就会被挤到下一行初始布局看起来会很奇怪。这类问题一般调整行列编号就能解决。GraphicsLayoutWidget还有一个细节它是基于QGraphicsScene的所以整个界面的抗锯齿、渲染性能由全局配置控制。在程序入口设置pg.setConfigOptions(antialiasTrue)可以提升曲线视觉效果不过高采样率实时绘图时建议关掉抗锯齿性能优先。具体怎么选我在第五章展开讲。2.2 什么时候改用Qt原生布局嵌入PlotWidgetGraphicsLayoutWidget虽好但有两个软肋。第一它内部的GraphicsLayout是一个整体场景外部QWidget控件比如QComboBox、QPushButton无法直接嵌入到网格里只能通过addItem或者Dock方式体验比较绕。第二如果你想用QSS样式表统一美化界面或者使用QSplitter让用户拖拽调整各图高度GraphicsLayoutWidget做不到。这时候应该改用PlotWidget Qt布局路线。下面是个典型结构上方控制栏中间用QSplitter纵向分割两个图底部状态栏。from pyqtgraph.Qt import QtWidgets import pyqtgraph as pg central QtWidgets.QWidget() layout QtWidgets.QVBoxLayout(central) # 顶部控制栏 control_bar QtWidgets.QHBoxLayout() combo QtWidgets.QComboBox() combo.addItems([曲线1, 曲线2, 曲线3]) control_bar.addWidget(combo) layout.addLayout(control_bar) # 两个PlotWidget放进QSplitter用户可拖动调整 splitter QtWidgets.QSplitter(QtWidgets.Qt.Vertical) pw1 pg.PlotWidget(title曲线1) pw2 pg.PlotWidget(title曲线2) splitter.addWidget(pw1) splitter.addWidget(pw2) layout.addWidget(splitter)这条路线里每个PlotWidget都是独立的QGraphicsView互不干扰二次封装成自定义控件也非常自然。你完全可以写一个ChartWidget(QWidget)把PlotWidget包一层对外暴露update_data(name, x, y)之类的接口。项目大了以后可维护性好很多。2.3 动态增删图表用容器占位法真实项目里图表数量很少是写死的。比如用户可以选择同时显示4路还是8路传感器或者通过下拉框切换频谱图与波形图。这种动态增删的需求两条路线处理方式不同。GraphicsLayoutWidget的动态增删比较麻烦因为布局网格的行列一旦有PlotItem被移除剩余对象的位置需要手动整理。我的建议是如果图表数量基本固定只是显隐切换用setVisible控制如果数量真的需要动态变化改用QStackedLayout或者Qt布局里的addWidget/removeWidget。对于PlotWidget路线动态增删比较轻松。核心技巧是给图表区域留一个空容器比如一个空的QWidget运行时把PlotWidget加进去用完再移除container QtWidgets.QWidget() container_layout QtWidgets.QVBoxLayout(container) layout.addWidget(container) def add_chart(title): pw pg.PlotWidget(titletitle) container_layout.addWidget(pw) return pw def remove_chart(pw): container_layout.removeWidget(pw) pw.deleteLater()这样增删图表时其他图表的位置自动重排不需要自己管理网格行列。3. 坐标轴全面自定义时间轴、固定刻度与中文显示3.1 AxisItem是坐标轴定制的入口PlotItem默认每个方向都有一个AxisItem可以通过getAxis(bottom)、getAxis(left)拿到对象。AxisItem支持设置标签、刻度位置、字体、颜色、中文字符等等。掌握了它就等于掌握了图表下半部分的自定义能力。先看一个最常见的需求设置坐标轴标签和单位。p win.addPlot(row0, col0) p.setLabel(bottom, 时间, unitss) p.setLabel(left, 电压, unitsV)这里units会自动带上一个单位字符串显示效果是时间 (s)。字体大小用setLabel的**kwargs调整比如font-size12pt。坐标轴刻度的颜色、宽度和长度也可以调axis p.getAxis(bottom) axis.setPen(pg.mkPen(color#cccccc, width2)) axis.setTickFont(pg.QtGui.QFont(Arial, 9))如果你想把刻度线改得很淡让曲线成为视觉主体把setPen的颜色改成深灰色基本就够了。3.2 让X轴变成真正的时间轴PyQtGraph默认的刻度显示是数值但在数据采集、行情展示场景中X轴是时间戳我们期望刻度显示成10:23:45这种格式。实现方式就是继承AxisItem并重写tickStrings方法。import datetime class TimeAxisItem(pg.AxisItem): def tickStrings(self, values, scale, spacing): strs [] for v in values: try: dt datetime.datetime.fromtimestamp(v) strs.append(dt.strftime(%H:%M:%S)) except Exception: strs.append() return strs然后在创建绘图区时把bottom轴替换掉win pg.GraphicsLayoutWidget() p win.addPlot(row0, col0, axisItems{bottom: TimeAxisItem(orientationbottom)})这样X轴上显示的就是格式化后的时间字符串。注意tickStrings里的values是刻度对应的数据坐标值不是像素坐标所以直接当时间戳用就行。如果你还需要显示日期和时间两部分比如跨天数据格式改成%m-%d %H:%M:%S即可。还有一个细节datetime.fromtimestamp本地时区问题如果你的数据都是UTC时间戳但想显示北京时间记得加pytz处理时区偏移。3.3 刻度位置完全自定义setTicks某些场景下我们不想要均匀的自动刻度而是指定几个关键位置。比如在一个三段状态监控图里Y轴只想显示正常/警告/故障三个刻度位置分别是0、50、100。p win.addPlot(row0, col0) p.setRange(y[0, 100]) axis p.getAxis(left) axis.setTicks([[(0, 正常), (50, 警告), (100, 故障)]])setTicks接收一个列表列表里每个子列表代表一层刻度。多传几层就可以实现主刻度和次刻度同时存在比如axis.setTicks([ [(0, 正常), (50, 警告), (100, 故障)], # 大刻度 [(25, ), (75, )] # 小刻度 ])注意当setTicks被调用后坐标轴会自动刻度的功能就暂停了。如果你后面又想让刻度恢复自动需要重新调用axis.setTicks(None)或者axis.showLabel()。这个隐藏行为我踩过坑调试时一度以为坐标轴坏了实际上是之前手动设过刻度。3.4 中文乱码问题的系统解法PyQtGraph的默认字体其实不包含中文字符所以直接写中文标签容易出现方块乱码。解决方案很直接设置全局字体。font pg.QtGui.QFont() font.setFamily(Microsoft YaHei) font.setPointSize(10) pg.setConfigOption(foreground, #d0d0d0)其实更重要的是Qt层面的字体设置通常在创建QApplication之后执行app QtWidgets.QApplication(sys.argv) font app.font() font.setFamily(Microsoft YaHei) app.setFont(font)设置之后坐标轴标签、图例、标题里的中文都能正常显示。Linux环境下如果系统没有微软雅黑可以用fc-list :langzh查一下系统装了哪些中文字体选一个可用的比如WenQuanYi Micro Hei、Noto Sans CJK SC都行。4. 多图联动与交互共享X轴、区域缩放、跨图十字光标4.1 共享X轴setXLink和setYLink多图表最有价值的功能就是联动。最基础的是X轴联动用户在主图上拖动缩放或平移其余图表跟随移动始终保持相同的X轴范围。p1 win.addPlot(row0, col0, title主图) p2 win.addPlot(row1, col0, title从图) p2.setXLink(p1)就这么一行p2的X轴就跟p1绑定了。用户拖动主图时从图自动同步范围。同理setYLink(p1)可以绑定Y轴适合多图都有相同Y轴语义的场景比如多通道电池电压监控。这里有个细节绑定之后从图的X轴自动隐藏了刻度因为它的X轴信息已经由主图完全决定。在金融行情界面里这反而是优点但如果你希望从图也显示X刻度可能需要自己再画一层坐标轴一般不太建议这么干。4.2 区域缩放让用户框选任意区间放大PyQtGraph的PlotItem默认带了一个矩形选区工具。开启方式是启用右键菜单或者调用setMouseEnabledp1.setMouseEnabled(xTrue, yFalse) p1.setMenuEnabled(True) p1.setMouseEnabled(xTrue, yTrue)鼠标左键框选一个区域后PyQtGraph会放大到选中区域。这个交互对金融K线、长时间序列回放特别有用。但要注意框选放大后setXLink(p1)关联的从图也会跟着放大这正好是联动的完整闭环。如果想控制用户能否缩放或平移记得这两个方法p1.setMouseEnabled(xTrue, yTrue) # 允许X/Y方向缩放 p1.setMouseEnabled(xFalse, yFalse) # 完全禁止交互我在多通道脑电界面中通常只开放X轴缩放Y轴固定为信号幅度范围[-200, 200]微伏避免用户误操作把波形拉变形影响判读。4.3 跨图十字光标InfiniteLine的最佳实践单图十字光标很常见但跨图十字光标才是多图表场景的杀手级功能。实现思路很简单在多个PlotItem里都添加同一条竖线InfiniteLine鼠标在主图上移动时更新竖线的X坐标位置所有图里的竖线同步移动。vline1 pg.InfiniteLine(angle90, movableFalse, penpg.mkPen(color#ff6666, width1)) vline2 pg.InfiniteLine(angle90, movableFalse, penpg.mkPen(color#ff6666, width1)) hline1 pg.InfiniteLine(angle0, movableFalse, penpg.mkPen(color#ff6666, width1)) hline2 pg.InfiniteLine(angle0, movableFalse, penpg.mkPen(color#ff6666, width1)) p1.addItem(vline1, ignoreBoundsTrue) p1.addItem(hline1, ignoreBoundsTrue) p2.addItem(vline2, ignoreBoundsTrue) p2.addItem(hline2, ignoreBoundsTrue) proxy pg.SignalProxy(p1.scene().sigMouseMoved, rateLimit60, slotmouseMoved) def mouseMoved(evt): pos p1.vb.mapSceneToView(evt[0]) x, y pos.x(), pos.y() vline1.setPos(x) vline2.setPos(x) hline1.setPos(y) hline2.setPos(y)SignalProxy的作用是限制回调频率避免鼠标高频移动导致UI线程过载。rateLimit60表示每秒最多触发60次足够流畅也不会浪费CPU。还需要注意mapSceneToView必须用p1.vb这表示把场景坐标映射到第一个绘图区的数据坐标系。如果鼠标事件绑定到p2上这里就要换成p2.vb不要搞混。4.4 图例和标签多图表里不可缺少的临门一脚图多起来之后没有图例的图表就是一团乱麻。PyQtGraph加图例比较简单p1.addLegend(offset(10, 10)) p1.plot(x1, y1, peny, name通道1) p1.plot(x2, y2, penc, name通道2)图例默认会出现在绘图区的角落offset控制偏移。样式上可以调整labelTextColor、border这些属性基本能满足常规需求。多图之间如果想用统一的颜色体系区分层级我喜欢在程序里维护一个颜色字典CHANNEL_COLORS { 温度: #ff6b6b, 湿度: #4ecdc4, 压力: #45b7d1, 流量: #f9ca24, }这样无论是画曲线、加图例、设置十字光标颜色都能保持一致视觉上专业很多。5. 性能优化与踩坑实录实时刷新不卡顿的写法5.1 setData vs. plot建立曲线一次的底层逻辑这是PyQtGraph性能优化的核心认知。很多新手会在刷新函数里反复调用plot(x, y)每秒调用几十次结果界面越来越卡。正确做法是初始化时用plot()创建一个PlotDataItem之后的数据更新全部走setData()。# 初始化创建曲线 self.curve1 p1.plot(penpg.mkPen(color#ff6b6b, width2)) self.curve2 p2.plot(penpg.mkPen(color#4ecdc4, width2)) # 数据更新只改数据不重新建曲线 def update_data(self, x1, y1, x2, y2): self.curve1.setData(x1, y1) self.curve2.setData(x2, y2)setData只更新底层数据数组不重建整个绘图项开销极小。PyQtGraph内部还会做增量绘制只重绘变化区域所以能达到非常高的刷新率。实测数据在普通笔记本上6个图表每个10000个数据点setData刷新能做到30 FPS以上而用plot反复重建帧率掉到5 FPS以下差别极其明显。对于超大数据量还有两个隐藏参数值得打开self.curve1.setDownsampling(autoTrue, methodpeak) self.curve1.setClipToView(True)setDownsampling(autoTrue)会在数据点过多时自动降采样methodpeak保留峰谷避免高频信号被压平。setClipToView(True)则只绘制可见区域数据缩小绘制范围。这两个组合是处理百万级点数波形的基础配置。5.2 多线程更新UI的正确姿势实时数据采集时采集线程绝对不能直接操作PlotItem否则Qt界面会崩溃或者产生随机闪烁。PyQtGraph官方明确要求UI更新必须在主线程执行。我常用的模式是信号槽from pyqtgraph.Qt import QtCore class DataAcquisition(QtCore.QThread): data_ready QtCore.Signal(object, object) def run(self): while True: x np.arange(1000) y np.random.randn(1000) self.data_ready.emit(x, y) self.msleep(50) # 主线程槽函数 def on_data_ready(self, x, y): self.curve.setData(x, y)如果不想建线程也可以用在界面里的QTimer定时去取数据并刷新。对于低频数据1~10Hz完全够用代码更简单self.timer QtCore.QTimer() self.timer.timeout.connect(self.refresh_data) self.timer.start(100) # 100ms刷新一次高频数据几百Hz以上建议增加缓冲机制把最近一段时间的数据攒在一起再一次性setData避免每帧都更新造成界面抖动。5.3 常见坑坐标轴消失、闪烁、引用丢失我在实际开发中遇到过的几个高频问题这里集中分享一下坑一设置了setXLink后从图X轴刻度消失想显示怎么办。如果确实需要从图也显示X轴数据最稳妥的办法是不同步X轴改用每次更新时手动同步坐标范围p2.setXRange(*p1.getXRange(), padding0)在setData之后调用这行就能实现坐标范围一致且从图保留自己的坐标轴标签。坑二中文乱码设置了全局字体仍不生效。检查pg.setConfigOption(foreground, #d0d0d0)不要放在QApplication创建之前。另外如果单个AxisItem覆盖了字体需要单独调用setTickFontaxis p.getAxis(left) axis.setTickFont(QtGui.QFont(Microsoft YaHei, 9))坑三实时波形闪屏严重。优先检查是否每个刷新都调用了plot()。再检查是否有旧曲线没清理。另外开启pg.setConfigOptions(antialiasFalse)降低抗锯齿消耗通常可以改善。还有一个容易被忽略的问题整个GraphicsLayoutWidget如果在刷新时被意外resize也会触发全量重绘。尽量固定窗口尺寸或者使用resize时做缓冲不要频繁变动布局。坑四addPlot返回的PlotItem被垃圾回收。把PlotItem存在类的属性里是最保险的办法。多图界面建议统一用self.plots字典管理键用图表名称值用PlotItem访问起来可读性也更好。5.4 高级技巧把多图表封装成可复用组件项目做多了之后我发现把多图表界面封装成一个自定义QWidget非常值。简单抽象一下class MultiChartWidget(QtWidgets.QWidget): def __init__(self, titles, parentNone): super().__init__(parent) layout QtWidgets.QVBoxLayout(self) self.plots [] for title in titles: pw pg.PlotWidget(titletitle) layout.addWidget(pw) self.plots.append(pw) def update_curve(self, index, x, y, curve_id0): plot self.plots[index] curve getattr(plot, fcurve_{curve_id}, None) if curve is None: curve plot.plot(x, y) setattr(plot, fcurve_{curve_id}, curve) else: curve.setData(x, y)把这种组件放到自己的工具库中以后做任何带多图表的Qt应用都能快速复用改起来也只是增加参数而已。最后说点个人体会PyQtGraph多图表这一步真正难的不是API本身而是理解它的设计哲学PlotItem是最小的绘图单元所有的联动、自定义都要围绕它来组织。一旦你想通了这一点后面无论是加十字光标、做缩放联动还是性能优化都是顺水推舟的事。我在多个项目里用这套方案做了实时波形监控和数据分析界面稳定性和流畅度都经受住了考验。如果大家在自己项目的多图表设计中有更好玩的定制需求欢迎交流说不定能一起把封装的组件库做得更完善。