Matplotlib画图教程：在QT界面中嵌入三维图片

需求：

做项目报告的时候，有这么一个想法，就是能通过UI随时调用matplotlib进行二维图和三维图的绘制。因此就诞生了做这么一个小模块的想法。

这里先上一下最终结果：

思路：

pyqt5内嵌matploblib画布。

matplotlib画布中有一个FigureCanvasQTAgg的模块可以用于UI绘制

---

模块设计思路：

1. ui文件

ui文件是通过qtdesigner直接生成的ui源码，与图表绘制相独立。

2. 图表绘制文件

该文件用于设计一个matplotlib图表绘制类，存放我们需要做报告的任何图图表，以及我们的一些数据导入。

3. 运行文件

运行文件继承上面两个文件，运行实例。

---

UI模块

这个模块没什么好说的，基于QTdesigner进行图形绘制，图形界面已经每个组件定义如下。（这个模块在教程中只是用于演示）

1.1 UI图形类

类：	Ui_matplot_demo	图形绘制类
实例化方式	不需要入参
方法
self.setupUi	构建一个UI窗口

1.2 测试UI界面及其属性

绘制的界面样式

界面控件属性

1.3 代码

# -*- coding: utf-8 -*-# Form implementation generated from reading ui file 'ui_ut.ui'
#
# Created by: PyQt5 UI code generator 5.15.6
#
# 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_matplot_demo(object):def setupUi(self, matplot_demo):matplot_demo.setObjectName("matplot_demo")matplot_demo.resize(1133, 721)self.gridLayout = QtWidgets.QGridLayout(matplot_demo)self.gridLayout.setObjectName("gridLayout")self.bt_close = QtWidgets.QPushButton(matplot_demo)self.bt_close.setObjectName("bt_close")self.gridLayout.addWidget(self.bt_close, 1, 1, 1, 1)self.bt_open = QtWidgets.QPushButton(matplot_demo)self.bt_open.setObjectName("bt_open")self.gridLayout.addWidget(self.bt_open, 1, 0, 1, 1)self.plt3d_module = QtWidgets.QWidget(matplot_demo)self.plt3d_module.setMinimumSize(QtCore.QSize(1111, 611))self.plt3d_module.setObjectName("plt3d_module")self.gridLayout.addWidget(self.plt3d_module, 0, 0, 1, 2)self.retranslateUi(matplot_demo)QtCore.QMetaObject.connectSlotsByName(matplot_demo)def retranslateUi(self, matplot_demo):_translate = QtCore.QCoreApplication.translatematplot_demo.setWindowTitle(_translate("matplot_demo", "Form"))self.bt_close.setText(_translate("matplot_demo", "按一下就可以关闭图片"))self.bt_open.setText(_translate("matplot_demo", "按一下就可以画图"))

---

图表绘制模块

这个模块是核心的图表绘制模块，主要结构如下

1.1 依赖包

包名	含义	安装方式
numpy	数学运算包	pip install numpy
matplotlilb	数学绘图包	pip install matplotlib

1.2 类

类：	MyFigure	图形绘制类
实例化方式	入参	含义
	width=5	控制画布宽度
	height=4	控制画布高度
	dpi=100	控制画布分辨率
属性	含义	初值
self.fig	实例化一个matplotlib的Figure类
self.axes	坐标系，可以是二维，也可以是三维
方法
plot_sin	画一个正弦函数
plot_cos	画一个余弦函数
plot_3d	画一个3D的图（基于leetcode218 天际线）

1.3 代码如下

import numpy as np
import matplotlib
from matplotlib.backends.backend_qt5agg import FigureCanvasQTAgg as FigureCanvas
from matplotlib.figure import Figure
matplotlib.use("Qt5Agg")  # 声明使用QT5# 创建一个matplotlib图形绘制类
class MyFigure(FigureCanvas):def __init__(self, width=5, height=4, dpi=100):# 第一步：创建一个创建Figureself.fig = Figure(figsize=(width, height), dpi=dpi)# 第二步：在父类中激活Figure窗口super(MyFigure, self).__init__(self.fig)  # 此句必不可少，否则不能显示图形# 第三步：创建一个子图，用于绘制图形用，111表示子图编号，如matlab的subplot(1,1,1)self.axes = None# 第四步：就是画图，【可以在此类中画，也可以在其它类中画】def plot_sin(self):self.axes = self.fig.add_subplot(111)t = np.arange(0.0, 3.0, 0.01)s = np.sin(2 * np.pi * t)self.axes.plot(t, s)def plot_cos(self):self.axes = self.fig.add_subplot(111)t = np.arange(0.0, 3.0, 0.01)s = np.sin(2 * np.pi * t)self.axes.plot(t, s)def plot_3d(self):self.axes = self.fig.add_subplot(111, projection='3d')x_edges = np.array([[10, 20], [10, 20], [10, 20], [10, 20],[20, 30], [20, 30], [20, 30], [20, 30],[30, 40], [30, 40], [30, 40], [30, 40],[40, 50], [40, 50], [40, 50], [40, 50]])# 设置y轴取值y_edges = np.array([[10, 20], [20, 30], [30, 40], [40, 50],[10, 20], [20, 30], [30, 40], [40, 50],[10, 20], [20, 30], [30, 40], [40, 50],[10, 20], [20, 30], [30, 40], [40, 50],[10, 20], [20, 30], [30, 40], [40, 50]])# 设置X,Y对应点的值。即原始数据。hist = np.array([[3.0], [0.0], [8.0], [4.0],[2.0], [4.0], [5.0], [7.0],[9.0], [2.0], [6.0], [3.0],[0.0], [3.0], [1.0], [0.0]])color_list = ['skyblue', 'lightgreen', 'bisque', 'gold','lightgreen', 'bisque', 'gold', 'lightpink','bisque', 'gold', 'lightpink', 'plum','gold', 'lightpink', 'plum', 'lightgray']for i in range(len(x_edges)):# 设置作图点的坐标xpos, ypos = np.meshgrid(x_edges[i][:-1] - 2.5, y_edges[i][:-1] - 2.5)xpos = xpos.flatten('F')ypos = ypos.flatten('F')zpos = np.zeros_like(xpos)# 设置柱形图大小dx = 5 * np.ones_like(zpos)dy = dx.copy()dz = hist[i].flatten()# 设置坐标轴标签self.axes.set_xlabel('front')self.axes.set_ylabel('side')self.axes.set_zlabel('height')self.axes.bar3d(xpos, ypos, zpos, dx, dy, dz, color=color_list[i], zsort='average')

运行模块

1.1 依赖包

包名	含义	安装方式
sys	系统包	-
PyQt5	UI包	pip install pyqt5
项目包
ui_ut	UI模块
leetcode218_figure	图表绘制模块

1.2 类

类：	myWindow	运行窗口类
继承父类
	QWidget
	Ui_matplot_demo
实例化方式	入参	含义
	不需要入参实例化
属性	含义	初值
self.F	实例化一个MyFigure的图表绘制类
方法
open_pic	在UI中画图，绑定bt_open控件
close_pic	关闭图片，绑定bt_close控件

1.3 最后再封装一个main函数调用，代码如下：

import sys
from PyQt5.QtWidgets import *
from PyQt5.QtCore import *
from ui_ut import Ui_matplot_demo
from leetcode218_figure import MyFigureclass myWindow(QWidget, Ui_matplot_demo):def __init__(self):super(myWindow, self).__init__()self.setupUi(self)self.setWindowTitle("显示matplotlib绘制图形")self.setMinimumSize(0, 0)# 第五步：定义MyFigure类的一个实例self.F = MyFigure(width=10, height=6, dpi=100)self.F.plot_cos()# 第六步：在GUI的groupBox中创建一个布局，用于添加MyFigure类的实例（即图形）后其他部件。# 在容器中添加一个groupbox对象，在groupbox对象中创建布局self.groupBox = QGroupBox(self.plt3d_module)self.groupBox.setMinimumSize(QSize(1100, 610))self.groupBox.setTitle("画图demo")def connect_bind():self.bt_open.clicked.connect(self.open_pic)self.bt_close.clicked.connect(self.close_pic)connect_bind()self.glo_plt_figure = QGridLayout(self.groupBox)def open_pic(self):self.F = MyFigure(width=10, height=6, dpi=100)self.F.plot_3d()self.glo_plt_figure.addWidget(self.F, 0, 0)print("here")self.show()self.glo_plt_figure.addWidget(self.F, 0, 0)def close_pic(self):self.glo_plt_figure.removeWidget(self.F)self.show()def main():app = QApplication(sys.argv)win = myWindow()win.show()sys.exit(app.exec_())if __name__ == "__main__":main()