PyQt5 作图之 pyqtgraph PlotWidget 代码结构拆解

关于 pyqtgraph 的介绍，网上一堆文章，但是涉及到其代码，尤其是 PlotWidget 应用的代码，要么附带的数据过于复杂不好摘，要么代码结构略复杂，对于刚接触的萌新很不友好，因此在这里自己拆解出一套 PlotWidget 代码供大家参考，每个代码都是独立可运行的，数据简单、主要观察代码结构。

要点：独立的 PlotWidget 入门代码，QtDesigner 配合 PlotWidget 作图

1. 最基础版 PlotWidget

采用 QWidget 控件，在其上建立 PlotWidget 控件，通过 pyqtgraph.PlotGraph.plot() 函数来作图，带入到 PyQt5 窗口的主循环中进行展示：

from PyQt5.Qt import *
from pyqtgraph import PlotWidget
from PyQt5 import QtCore# 继承控件 QWidget
class Window(QWidget):def __init__(self):super().__init__()# Window 实例尺寸self.resize(600,600)# PlotWidget 控件实例self.plotWidget_ted = PlotWidget(self)# 设置 PlotWidget 位置尺寸self.plotWidget_ted.setGeometry(QtCore.QRect(25, 25, 550, 550))# 作图self.plotWidget_ted.plot([1, 2, 3, 4, 5], pen='r', symbol='o')if __name__ == '__main__':# 该部分以及结束的 sys.exit(app.exec_()) 是固定的 PyQt5 运行语句import sysapp = QApplication(sys.argv)# 建立窗口实例并展示window = Window()window.show()sys.exit(app.exec_())

2. QtDesigner 参与的 PlotWidget 编码

2.1 QtDesigner 新建布局

窗口中通过 Widget Box 插入 Graphics View 控件：

将该控件提升至 PlotWidget，右键单击添加的 Graphics View 控件，选择 Promote to …

按图中 Base class name 选择 QGraphicsView，Promoted class name 填写 PlotWidget 以及最终的 Header file 输入 pyqtgraph, 点击右侧的 Add：

添加完成，选择该项，点击右下角 Promote

OK 现在我们就完成了 PlotWidget 控件的添加，接下来在 Property Editor 中修改控件名称和尺寸：

2.2 ui 文件转 py 代码文件

将 ui 文件（ted_plot.ui）保存，并通过 PyQt5.uic.pyuic 将 ui 文件转化为 py 代码文件 (ted_plot.py)，其代码内容如下：（注意，该代码是由 ui 文件转化而来，不要编辑改动，需要从其他 py 中导入为其添加功能等）

# -*- coding: utf-8 -*-# Form implementation generated from reading ui file 'ted_plot.ui'
#
# Created by: PyQt5 UI code generator 5.15.0
#
# WARNING: Any manual changes made to this file will be lost when pyuic5 is
# run again.  Do not edit this file unless you know what you are doing.from PyQt5 import QtCore, QtGui, QtWidgetsclass Ui_Form(object):def setupUi(self, Form):Form.setObjectName("Form")Form.resize(600, 600)self.plotWidget_ted = PlotWidget(Form)self.plotWidget_ted.setGeometry(QtCore.QRect(25, 25, 550, 550))self.plotWidget_ted.setObjectName("plotWidget_ted")self.retranslateUi(Form)QtCore.QMetaObject.connectSlotsByName(Form)def retranslateUi(self, Form):_translate = QtCore.QCoreApplication.translateForm.setWindowTitle(_translate("Form", "Form"))
from pyqtgraph import PlotWidgetif __name__ == "__main__":import sysapp = QtWidgets.QApplication(sys.argv)Form = QtWidgets.QWidget()ui = Ui_Form()ui.setupUi(Form)Form.show()sys.exit(app.exec_())

2.3 主程序导入布局并添加作图内容

此时我们有了控制布局的 ted_plot.py ，接下来我们新建个导入布局、添加功能的 py 主程序代码：

from PyQt5.Qt import *
from ted_plot import Ui_Formclass Pane(QWidget, Ui_Form):def __init__(self):super().__init__()self.setupUi(self)self.plot_sth()def plot_sth(self):self.plotWidget_ted.plot([1,2,3,4,5], pen='r', symbol = 'o')if __name__ == '__main__':import sysapp = QApplication(sys.argv)window = Pane()window.show()sys.exit(app.exec_())

这样运行代码，便可出现 PlotWidget 作图窗口，并且可以实现 QtDesigner 设计布局、主程序代码添加作图内容等功能分离。