使用PyQt5嵌入matplotlib，实现根据界面输入数值更换显示的matplotlib图形

今天药忘吃喽~ 2022-04-03 10:30 305阅读 0赞

实现本次博文的功能花了有点时间呀。。。。。。。。。。。。。。。

使用的编程语言是python3.4， 界面设计软件是erics 6结合PyQt5

### 1、使用QT Designer实现UI 界面 ###

在eric 6 中，点击项目，新建一个项目，增加如下图的一些控件与布局，不相同都可以。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTg3NTc1_size_16_color_FFFFFF_t_70][]

**除了 QVBoxLayout 垂直布局、QPushButton按钮、和comboBox输入widget控件需要注意外，其他的控件都没有使用（即没有使用信号与槽函数），后期可以自行实现其他功能。分别对应上图中的最小的红框、显示图片按钮、显示1的可选控件。**

这是自动生成的代码：

# -*- coding: utf-8 -*-
    
    # Form implementation generated from reading ui file 'E:\PyQt\paper_test\test_1.ui'
    #
    # Created: Fri Dec 21 20:18:35 2018
    #      by: PyQt5 UI code generator 5.4
    #
    # WARNING! All changes made in this file will be lost!
    
    from PyQt5 import QtCore, QtGui, QtWidgets
    
    class Ui_MainWindow(object):
        def setupUi(self, MainWindow):
            MainWindow.setObjectName("MainWindow")
            MainWindow.resize(753, 578)
            icon = QtGui.QIcon()
            icon.addPixmap(QtGui.QPixmap(":/pic/cnc.png"), QtGui.QIcon.Normal, QtGui.QIcon.Off)
            MainWindow.setWindowIcon(icon)
            self.centralWidget = QtWidgets.QWidget(MainWindow)
            self.centralWidget.setObjectName("centralWidget")
            self.horizontalLayout = QtWidgets.QHBoxLayout(self.centralWidget)
            self.horizontalLayout.setObjectName("horizontalLayout")
            self.verticalLayout = QtWidgets.QVBoxLayout()
            self.verticalLayout.setObjectName("verticalLayout")
            self.tabWidget = QtWidgets.QTabWidget(self.centralWidget)
            self.tabWidget.setAcceptDrops(False)
            self.tabWidget.setLayoutDirection(QtCore.Qt.LeftToRight)
            self.tabWidget.setAutoFillBackground(True)
            self.tabWidget.setTabShape(QtWidgets.QTabWidget.Rounded)
            self.tabWidget.setUsesScrollButtons(False)
            self.tabWidget.setDocumentMode(True)
            self.tabWidget.setObjectName("tabWidget")
            self.tab = QtWidgets.QWidget()
            self.tab.setObjectName("tab")
            self.pushButton = QtWidgets.QPushButton(self.tab)
            self.pushButton.setGeometry(QtCore.QRect(80, 440, 75, 23))
            self.pushButton.setObjectName("pushButton")
            self.pushButton_3 = QtWidgets.QPushButton(self.tab)
            self.pushButton_3.setGeometry(QtCore.QRect(250, 440, 75, 23))
            self.pushButton_3.setObjectName("pushButton_3")
            self.verticalLayoutWidget_2 = QtWidgets.QWidget(self.tab)
            self.verticalLayoutWidget_2.setGeometry(QtCore.QRect(10, 20, 521, 371))
            self.verticalLayoutWidget_2.setObjectName("verticalLayoutWidget_2")
            self.verticalLayout_2 = QtWidgets.QVBoxLayout(self.verticalLayoutWidget_2)
            self.verticalLayout_2.setContentsMargins(0, 0, 0, 0)
            self.verticalLayout_2.setObjectName("verticalLayout_2")
            self.comboBox = QtWidgets.QComboBox(self.tab)
            self.comboBox.setGeometry(QtCore.QRect(360, 440, 69, 22))
            self.comboBox.setObjectName("comboBox")
            self.comboBox.addItem("")
            self.comboBox.addItem("")
            self.comboBox.addItem("")
            self.comboBox.addItem("")
            self.comboBox.addItem("")
            self.tabWidget.addTab(self.tab, "")
            self.tab_2 = QtWidgets.QWidget()
            self.tab_2.setObjectName("tab_2")
            self.pushButton_2 = QtWidgets.QPushButton(self.tab_2)
            self.pushButton_2.setGeometry(QtCore.QRect(100, 370, 75, 23))
            self.pushButton_2.setObjectName("pushButton_2")
            self.tabWidget.addTab(self.tab_2, "")
            self.tab_3 = QtWidgets.QWidget()
            self.tab_3.setObjectName("tab_3")
            self.tabWidget.addTab(self.tab_3, "")
            self.tab_4 = QtWidgets.QWidget()
            self.tab_4.setObjectName("tab_4")
            self.tabWidget.addTab(self.tab_4, "")
            self.tab_5 = QtWidgets.QWidget()
            self.tab_5.setObjectName("tab_5")
            self.tabWidget.addTab(self.tab_5, "")
            self.verticalLayout.addWidget(self.tabWidget)
            self.horizontalLayout.addLayout(self.verticalLayout)
            MainWindow.setCentralWidget(self.centralWidget)
            self.menuBar = QtWidgets.QMenuBar(MainWindow)
            self.menuBar.setGeometry(QtCore.QRect(0, 0, 753, 23))
            self.menuBar.setObjectName("menuBar")
            self.menu = QtWidgets.QMenu(self.menuBar)
            self.menu.setObjectName("menu")
            self.menu_2 = QtWidgets.QMenu(self.menuBar)
            self.menu_2.setObjectName("menu_2")
            self.menu_3 = QtWidgets.QMenu(self.menuBar)
            self.menu_3.setObjectName("menu_3")
            MainWindow.setMenuBar(self.menuBar)
            self.actionAciton = QtWidgets.QAction(MainWindow)
            self.actionAciton.setObjectName("actionAciton")
            self.actionOpen = QtWidgets.QAction(MainWindow)
            self.actionOpen.setObjectName("actionOpen")
            self.actionOpen_2 = QtWidgets.QAction(MainWindow)
            self.actionOpen_2.setObjectName("actionOpen_2")
            self.actionAbout = QtWidgets.QAction(MainWindow)
            self.actionAbout.setObjectName("actionAbout")
            self.actionShezih = QtWidgets.QAction(MainWindow)
            self.actionShezih.setObjectName("actionShezih")
            self.actionBaochun = QtWidgets.QAction(MainWindow)
            self.actionBaochun.setObjectName("actionBaochun")
            self.actionXinjian = QtWidgets.QAction(MainWindow)
            self.actionXinjian.setObjectName("actionXinjian")
            self.actionLingchunwei = QtWidgets.QAction(MainWindow)
            self.actionLingchunwei.setObjectName("actionLingchunwei")
            self.actionAbou2 = QtWidgets.QAction(MainWindow)
            self.actionAbou2.setObjectName("actionAbou2")
            self.menu.addAction(self.actionOpen_2)
            self.menu.addAction(self.actionBaochun)
            self.menu.addAction(self.actionXinjian)
            self.menu.addAction(self.actionLingchunwei)
            self.menu_2.addAction(self.actionShezih)
            self.menu_3.addAction(self.actionAbout)
            self.menu_3.addAction(self.actionAbou2)
            self.menuBar.addAction(self.menu.menuAction())
            self.menuBar.addAction(self.menu_2.menuAction())
            self.menuBar.addAction(self.menu_3.menuAction())
    
            self.retranslateUi(MainWindow)
            self.tabWidget.setCurrentIndex(0)
            QtCore.QMetaObject.connectSlotsByName(MainWindow)
    
        def retranslateUi(self, MainWindow):
            _translate = QtCore.QCoreApplication.translate
            MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow"))
            self.pushButton.setText(_translate("MainWindow", "显示图片"))
            self.pushButton_3.setText(_translate("MainWindow", "显示2"))
            self.comboBox.setItemText(0, _translate("MainWindow", "1"))
            self.comboBox.setItemText(1, _translate("MainWindow", "2"))
            self.comboBox.setItemText(2, _translate("MainWindow", "3"))
            self.comboBox.setItemText(3, _translate("MainWindow", "4"))
            self.comboBox.setItemText(4, _translate("MainWindow", "5"))
            self.tabWidget.setTabText(self.tabWidget.indexOf(self.tab), _translate("MainWindow", "文本1"))
            self.pushButton_2.setText(_translate("MainWindow", "显示2"))
            self.tabWidget.setTabText(self.tabWidget.indexOf(self.tab_2), _translate("MainWindow", "文本2"))
            self.tabWidget.setTabText(self.tabWidget.indexOf(self.tab_3), _translate("MainWindow", "文本3"))
            self.tabWidget.setTabText(self.tabWidget.indexOf(self.tab_4), _translate("MainWindow", "文本4"))
            self.tabWidget.setTabText(self.tabWidget.indexOf(self.tab_5), _translate("MainWindow", "文本5"))
            self.menu.setTitle(_translate("MainWindow", "文件"))
            self.menu_2.setTitle(_translate("MainWindow", "设置"))
            self.menu_3.setTitle(_translate("MainWindow", "帮助"))
            self.actionAciton.setText(_translate("MainWindow", "about"))
            self.actionOpen.setText(_translate("MainWindow", "open"))
            self.actionOpen_2.setText(_translate("MainWindow", "打开"))
            self.actionAbout.setText(_translate("MainWindow", "关于"))
            self.actionShezih.setText(_translate("MainWindow", "设置1"))
            self.actionBaochun.setText(_translate("MainWindow", "保存"))
            self.actionXinjian.setText(_translate("MainWindow", "新建"))
            self.actionLingchunwei.setText(_translate("MainWindow", "另存为"))
            self.actionAbou2.setText(_translate("MainWindow", "联系我们"))
    
    import my_pic_rc
    
    if __name__ == "__main__":
        import sys
        app = QtWidgets.QApplication(sys.argv)
        MainWindow = QtWidgets.QMainWindow()
        ui = Ui_MainWindow()
        ui.setupUi(MainWindow)
        MainWindow.show()
        sys.exit(app.exec_())

import my\_pic\_rc 是我的资源文件，保存着图片文件，eric 6能把其编译成二进制文件

小伙伴们可以删除它

### 2.实现界面与业务逻辑代码分离 ###

eric6 相对于 wxpython是能实现界面与业务逻辑代码分离

![20181221202529229.PNG][]

右键点击刚刚创建的.ui 文件，在弹出的选项框中 点击 ‘ 生成对话框代码’

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTg3NTc1_size_16_color_FFFFFF_t_70 1][]

‘新建’，输入自定义的类名、文件名、路径名

因为这次的小项目只是使用了 ‘显示图片’这个按钮，对应名称为 pushButton，勾选信号类型，点击确定，自动生成代码

# -*- coding: utf-8 -*-
    
    """
    Module implementing CallTest.
    """
    
    from PyQt5.QtCore import pyqtSlot
    from PyQt5.QtWidgets import QMainWindow
    from PyQt5 import QtCore, QtGui, QtWidgets
    import matplotlib
    matplotlib.use('Qt5Agg')
    from matplotlib.backends.backend_qt5agg import FigureCanvasQTAgg as FigureCanvas
    from PyQt5 import QtCore, QtWidgets,QtGui
    import matplotlib.pyplot as plt
    
    from Ui_test_1 import Ui_MainWindow
    
    
    
    class CallTest(QMainWindow, Ui_MainWindow):
        """
        Class documentation goes here.
        """
        def __init__(self, parent=None):
            """
            Constructor
            
            @param parent reference to the parent widget
            @type QWidget
            """
            super(CallTest, self).__init__(parent)
            self.setupUi(self)
        
        @pyqtSlot()
        def on_pushButton_clicked(self):
            """
            Slot documentation goes here.
            """
            # TODO: not implemented yet
            #self.plot_()
            print(self.comboBox.currentText())

需要显示的话，加上下面的代码

if __name__ == "__main__":
        import sys
        app = QtWidgets.QApplication(sys.argv)
        demo = CallTest()
        demo.show()
        sys.exit(app.exec_())

### 3.增加显示matplotlib图形的代码 ###

# -*- coding: utf-8 -*-
    
    """
    Module implementing CallTest.
    """
    import sys
    import random
    import matplotlib
    from PyQt5.QtCore import pyqtSlot
    from PyQt5 import QtCore, QtGui, QtWidgets
    matplotlib.use('Qt5Agg')
    from PyQt5 import QtCore, QtWidgets,QtGui
    
    from PyQt5.QtWidgets import QApplication, QMainWindow, QVBoxLayout, QSizePolicy, QWidget
    from numpy import arange, sin, pi
    from matplotlib.backends.backend_qt5agg import FigureCanvasQTAgg as FigureCanvas
    from matplotlib.backends.backend_qt5agg import NavigationToolbar2QT as NavigationToolbar
    from matplotlib.figure import Figure
    import matplotlib.pyplot as plt
    import numpy as np 
    
    from Ui_test_1 import Ui_MainWindow
    import sip 
    
    #创建一个matplotlib图形绘制类
    class MyFigure(FigureCanvas):
        def __init__(self,width=5, height=4, dpi=100):
            #第一步：创建一个创建Figure
            self.fig = Figure(figsize=(width, height), dpi=dpi)
            #第二步：在父类中激活Figure窗口
            super(MyFigure,self).__init__(self.fig) #此句必不可少，否则不能显示图形
            #第三步：创建一个子图，用于绘制图形用，111表示子图编号，如matlab的subplot(1,1,1)
            self.axes = self.fig.add_subplot(111)
        #第四步：就是画图，【可以在此类中画，也可以在其它类中画】,最好是在别的地方作图
        
        def plotsin(self):
            self.axes0 = self.fig.add_subplot(111)
            t = np.arange(0.0, 3.0, 0.01)
            s = np.sin(2 * np.pi * t)
            self.axes0.plot(t, s)
            
        def plotcos(self):
            t = np.arange(0.0, 3.0, 0.01)
            s = np.sin(2 * np.pi * t)
            self.axes.plot(t, s)
    
    
    class CallTest(QMainWindow, Ui_MainWindow):
        step = 0
        """
        Class documentation goes here.
        """
        def __init__(self, parent=None):
            """
            Constructor
            
            @param parent reference to the parent widget
            @type QWidget
            """
            super(CallTest, self).__init__(parent)
            self.setupUi(self)
            
    
        def myfunction(self):
            self.F = MyFigure(width=3, height=2, dpi=100)
            t = np.arange(0.0, int(self.comboBox.currentText()), 0.01)
            s = np.cos(2 * np.pi * t)
            self.F.axes.plot(t, s)  #使用控件，在widget上作图
            self.F.fig.suptitle("cos") 
            
            if self.verticalLayout_2.count() < 2: 
                self.verticalLayout_2.addWidget(self.F) 
                self.mpl_ntb = NavigationToolbar(self.F, self)  # 添加完整的 toolbar,增加图片放大、移动的按钮
                self.verticalLayout_2.addWidget(self.mpl_ntb)
                
        #此处的代码可以进行显示，如何将图片进行变换
        def plotcos(self):
            self.step += 1
            if self.step == 1:
                self.myfunction()
            else:
                sip.delete(self.F)
                sip.delete(self.mpl_ntb) 
                self.myfunction()           
                
            print(str(self.step))
        
        @pyqtSlot()
        def on_pushButton_clicked(self):
            """
            Slot documentation goes here.
            """
            # TODO: not implemented yet
    #         self.mpl.start_static_plot()
            print('this is button 1')
            self.plotcos()
        
            
    
    if __name__ == "__main__":
        import sys
        app = QtWidgets.QApplication(sys.argv)
        demo = CallTest()
        demo.show()
        sys.exit(app.exec_())

创建一个class MyFigure(FigureCanvas): 类，继承于 FigureCanvas

接下来主要讲下 myfunction 函数和 plotcos 函数

**1. myfunction 函数**

self.F = MyFigure(width=3, height=2, dpi=100)

可以理解self.F是一个widget 控件了

t = np.arange(0.0, int(self.comboBox.currentText()), 0.01)

获取comboBox控件的当前选择的值，由于是字符型，需要强制转换成int 型。用于变换cos函数的间距。

if self.verticalLayout_2.count() < 2: 
                self.verticalLayout_2.addWidget(self.F) 
                self.mpl_ntb = NavigationToolbar(self.F, self)  # 添加完整的 toolbar,增加图片放大、移动的按钮
                self.verticalLayout_2.addWidget(self.mpl_ntb)

当垂直布局中的widget 少于 2个时，将F和 操作图形的控件mpl\_ntb 增加到垂直布局中，使用函数addWidget（）

最主要是使layout中不一直 增加控件，如果没有if的话，将一直垂直增加控件。

**2.plotcos 函数**

self.step += 1
            if self.step == 1:
                self.myfunction()
            else:
                sip.delete(self.F)
                sip.delete(self.mpl_ntb) 
                self.myfunction()           
                
            print(str(self.step))

初始化的step为0， step用来判断是否是用户第一次显示图形，如果是第一次则创建图形，将其增加到垂直布局中；

如果是要刷新图片，则要先将原始垂直布局layout中的widget 删除。

> **题外话：**本来看到api文档有removeWidget函数的，试过用来删除，但是没用。。。。。。。。但我把一个按钮QPushButton按钮控件加入到垂直布局中，使用removeWidget函数能把按钮控件删除。。。。。。。。。不明觉厉。。。。。。。网上查了好久，才查到使用import sip 模块。

使用

sip.delete(self.F)
                sip.delete(self.mpl_ntb)

将原来的两个控件进行删除，然后调用**myfunction** 函数，再根据comboBox控件，更新显示。

终于。。。。。。。大功告成。。。。。。。。。。。。

最后显示结果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTg3NTc1_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTg3NTc1_size_16_color_FFFFFF_t_70 3][]

### 让我们共同学习，共同进步 ###

### 项目推荐： ###

**[2000多G的计算机各行业电子资源分享（持续更新）][2000_G]**

**[2020年微信小程序全栈项目之喵喵交友【附课件和源码】][2020]**

**[Spring Boot开发小而美的个人博客【附课件和源码】][Spring Boot]**

**[Java微服务实战296集大型视频-谷粒商城【附代码和课件】][Java_296_-]**

**[Java开发微服务畅购商城实战【全357集大项目】-附代码和课件][Java_357_-]**

**[最全最详细数据结构与算法视频-【附课件和源码】][-]**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTg3NTc1_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTg3NTc1_size_16_color_FFFFFF_t_70]: /images/20220403/c7eb57cd38db489597b5bc1aec31d9a0.png
[20181221202529229.PNG]: /images/20220403/4ed39686f00843b1af7b51fdd4f87af9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTg3NTc1_size_16_color_FFFFFF_t_70 1]: /images/20220403/2a5731c2554146abae45ffce24b3fe1e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTg3NTc1_size_16_color_FFFFFF_t_70 2]: /images/20220403/fc8c3ea60844496ab670e1ee4e21869b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTg3NTc1_size_16_color_FFFFFF_t_70 3]: /images/20220403/710758544fe2467badb1fc8b0f5d68af.png
[2000_G]: https://mp.weixin.qq.com/s/sP4JgGWkCzpgwKr9sAV2_Q
[2020]: https://mp.weixin.qq.com/s?__biz=MzIyNTI3NDQ4NQ==&mid=2247487704&idx=1&sn=5f4b2127c4d49fd07ae072a0721424a2&chksm=e8036fc2df74e6d489c4aa9b06f917ef7cee6027f13e150fca53cf79d5d188d4ccc1af49e098&scene=21#wechat_redirect
[Spring Boot]: https://mp.weixin.qq.com/s?__biz=MzIyNTI3NDQ4NQ==&mid=2247487798&idx=2&sn=ac0293b996521b872a9dba5fbb3e65e6&chksm=e8036e2cdf74e73aba104a9a994a5b2e31483e8dcbe0f1d9936f6d5173b887e1560f59d2819c&scene=21#wechat_redirect
[Java_296_-]: https://mp.weixin.qq.com/s?__biz=MzIyNTI3NDQ4NQ==&mid=2247487674&idx=1&sn=7aff0bdf2bb727303f3d3618995aef21&chksm=e8036fa0df74e6b6d872c7e6ece179c524ed463a4a6b74c96875475c9a3d5ddb903427dd993b&scene=21#wechat_redirect
[Java_357_-]: https://mp.weixin.qq.com/s?__biz=MzIyNTI3NDQ4NQ==&mid=2247486376&idx=1&sn=d1fef270c463ea8ac663f6fbfedd70a0&chksm=e80374b2df74fda4d3bafba878a106a19e18c5fcda266008f4f37975847a21bc612ffcd5ff39&scene=21#wechat_redirect
[-]: https://mp.weixin.qq.com/s?__biz=MzIyNTI3NDQ4NQ==&mid=2247487750&idx=1&sn=747bccbb5f5ea6b58915198de40da777&chksm=e8036e1cdf74e70ae97a5e8e265b49d7236d904d291203309159d07ba1724033062c0e370843&scene=21#wechat_redirect
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTg3NTc1_size_16_color_FFFFFF_t_70_pic_center]: /images/20220403/e55480ceee9f439697017a6bee533933.png