Pyside2中嵌入Matplotlib的绘图的实现


Posted in Python onFebruary 22, 2021

近期遇到一个需求,就是用PySide2做出一个GUI,并且要将后台使用Matplotlib绘制的图显示在界面上。自己琢磨了蛮久,网上也搜了不少资料,但都感觉参差不齐,所以就自己总结一下。

我们使用QGraphicsView插件来显示Matplotlib里绘制的图片。这里演示的功能为:打开时界面默认绘制 cos函数的图像,点击按钮后,绘制sin函数的图像。

1. 界面设计

简单创建一个界面:一个 GraphicsView 和 一个 PushButton

Pyside2中嵌入Matplotlib的绘图的实现

2. 定义一个类,继承FigureCanvas

import matplotlib
from matplotlib.backends.backend_qt5agg import FigureCanvasQTAgg as FigureCanvas
# from matplotlib.figure import Figure
import matplotlib.pyplot as plt
 
matplotlib.use("Qt5Agg") # 声明使用QT5
 
 
class MyFigureCanvas(FigureCanvas):
  '''
  通过继承FigureCanvas类,使得该类既是一个PyQt5的Qwidget,又是一个matplotlib的FigureCanvas,这是连接pyqt5与matplotlib的关键
  '''
  def __init__(self, parent=None, width=10, height=5, xlim=(0, 2500), ylim=(-2, 2), dpi=100):
    # 创建一个Figure
    fig = plt.Figure(figsize=(width, height), dpi=dpi, tight_layout=True) # tight_layout: 用于去除画图时两边的空白
 
    FigureCanvas.__init__(self, fig) # 初始化父类
    self.setParent(parent)
 
    self.axes = fig.add_subplot(111) # 添加子图
    self.axes.spines['top'].set_visible(False) # 去掉绘图时上面的横线
    self.axes.spines['right'].set_visible(False) # 去掉绘图时右面的横线
    self.axes.set_xlim(xlim)
    self.axes.set_ylim(ylim)

然后就可以开始绘图了。

3. 绘图并显示

3.1 先初始化一下我们定义的类

这里 self.ui.graphicsView.width() / 101 的作用:

  • 因为直接使用默认绘制出来的图的大小,一般都会与我们窗口里 GraphicsView 的大小不一致,会造成图像显示不完全,需要拖动滚动条看图像。这里我们将绘图的大小设置为与GraphicsView相匹配的大小,就可以显示出全部图像。之所以  "/101",我感觉可能是 graphicsView.width() 得到的结果 和 plt的figsize里设置图大小的参数 的单位是不一样的,所以要除以一个数,让图像能刚好全部显示在GraphicsView里
# 初始化 gv_visual_data 的显示
self.gv_visual_data_content = MyFigureCanvas(width=self.ui.graphicsView.width() / 101,
                       height=self.ui.graphicsView.height() / 101,
                       xlim=(0, 2*np.pi),
                       ylim=(-1, 1)) # 实例化一个FigureCanvas

3.2 接着就开始用Matplotlib绘制cos函数的图像并显示在GraphicsView里

x = np.arange(0, 2 * np.pi, np.pi / 100)
y = np.cos(x)
self.gv_visual_data_content.axes.plot(x, y)
self.gv_visual_data_content.axes.set_title('cos()')
# 加载的图形(FigureCanvas)不能直接放到graphicview控件中,必须先放到graphicScene,然后再把graphicscene放到graphicview中
self.graphic_scene = QGraphicsScene() # 创建一个QGraphicsScene
self.graphic_scene.addWidget(self.gv_visual_data_content) # 把图形放到QGraphicsScene中,注意:图形是作为一个QWidget放到放到QGraphicsScene中的
self.ui.graphicsView.setScene(self.graphic_scene) # 把QGraphicsScene放入QGraphicsView
self.ui.graphicsView.show() # 调用show方法呈现图形

到这里,已经可以运行看到初步效果了

Pyside2中嵌入Matplotlib的绘图的实现

3.3 接下来实现点击按钮,切换为sin函数图像的功能

先将信号与槽连接好

self.ui.btn_sin.clicked.connect(self.plot_sin)

编写槽函数

def plot_sin(self):
    x = np.arange(0, 2 * np.pi, np.pi / 100)
    y = np.sin(x)
    self.gv_visual_data_content.axes.clear() # 由于图片需要反复绘制,所以每次绘制前清空,然后绘图
    self.gv_visual_data_content.axes.plot(x, y)
    self.gv_visual_data_content.axes.set_title('sin()')
    self.gv_visual_data_content.draw() # 刷新画布显示图片,否则不刷新显示

好了,看看效果

Pyside2中嵌入Matplotlib的绘图的实现

大功告成。

完整代码:

注意:导包时,要将 PySide2 和 UI 的包 放在 matplotlib 相关包 的 前面,不然 里面的 self.graphic_scene.addWidget(self.gv_visual_data_content)  这里会报如下的错!!!

TypeError: 'PySide2.QtWidgets.QGraphicsScene.addWidget' called with wrong argument types:
  PySide2.QtWidgets.QGraphicsScene.addWidget(MyFigureCanvas)
Supported signatures:
  PySide2.QtWidgets.QGraphicsScene.addWidget(PySide2.QtWidgets.QWidget, PySide2.QtCore.Qt.WindowFlags = Default(Qt.WindowFlags))

至于为什么呢?我也不大清楚,不过好像如果使用的是PyQt5的话就没这种问题,玄学吧!!!

from PySide2.QtWidgets import QApplication, QMainWindow, QGraphicsScene, QFileDialog, QMessageBox
from UI.test import Ui_MainWindow
 
import sys
import numpy as np
import matplotlib
from matplotlib.backends.backend_qt5agg import FigureCanvasQTAgg as FigureCanvas
# from matplotlib.figure import Figure
import matplotlib.pyplot as plt
 
matplotlib.use("Qt5Agg") # 声明使用QT5
 
 
class MyFigureCanvas(FigureCanvas):
  '''
  通过继承FigureCanvas类,使得该类既是一个PyQt5的Qwidget,又是一个matplotlib的FigureCanvas,这是连接pyqt5与matplotlib的关键
  '''
  def __init__(self, parent=None, width=10, height=5, xlim=(0, 2500), ylim=(-2, 2), dpi=100):
    # 创建一个Figure
    fig = plt.Figure(figsize=(width, height), dpi=dpi, tight_layout=True) # tight_layout: 用于去除画图时两边的空白
 
    FigureCanvas.__init__(self, fig) # 初始化父类
    self.setParent(parent)
 
    self.axes = fig.add_subplot(111) # 调用figure下面的add_subplot方法,类似于matplotlib.pyplot下面的subplot方法
    self.axes.spines['top'].set_visible(False) # 去掉上面的横线
    self.axes.spines['right'].set_visible(False)
    self.axes.set_xlim(xlim)
    self.axes.set_ylim(ylim)
 
class MainWindow(QMainWindow):
  def __init__(self):
    super().__init__()
    self.ui = Ui_MainWindow()
    self.ui.setupUi(self)
 
    # 初始化 gv_visual_data 的显示
    self.gv_visual_data_content = MyFigureCanvas(width=self.ui.graphicsView.width() / 101,
                           height=self.ui.graphicsView.height() / 101,
                           xlim=(0, 2*np.pi),
                           ylim=(-1, 1)) # 实例化一个FigureCanvas
    self.plot_cos()
 
    self.ui.btn_sin.clicked.connect(self.plot_sin)
 
  def plot_cos(self):
    x = np.arange(0, 2 * np.pi, np.pi / 100)
    y = np.cos(x)
    self.gv_visual_data_content.axes.plot(x, y)
    self.gv_visual_data_content.axes.set_title('cos()')
    # 加载的图形(FigureCanvas)不能直接放到graphicview控件中,必须先放到graphicScene,然后再把graphicscene放到graphicview中
    self.graphic_scene = QGraphicsScene() # 创建一个QGraphicsScene
    self.graphic_scene.addWidget(self.gv_visual_data_content) # 把图形放到QGraphicsScene中,注意:图形是作为一个QWidget放到放到QGraphicsScene中的
    self.ui.graphicsView.setScene(self.graphic_scene) # 把QGraphicsScene放入QGraphicsView
    self.ui.graphicsView.show() # 调用show方法呈现图形
 
  def plot_sin(self):
    x = np.arange(0, 2 * np.pi, np.pi / 100)
    y = np.sin(x)
    self.gv_visual_data_content.axes.clear() # 由于图片需要反复绘制,所以每次绘制前清空,然后绘图
    self.gv_visual_data_content.axes.plot(x, y)
    self.gv_visual_data_content.axes.set_title('sin()')
    self.gv_visual_data_content.draw() # 刷新画布显示图片,否则不刷新显示
 
 
if __name__ == "__main__":
  app = QApplication(sys.argv)
  win = MainWindow()
  win.show()
  sys.exit(app.exec_())

到此这篇关于Pyside2中嵌入Matplotlib的绘图的实现的文章就介绍到这了,更多相关Pyside2嵌入Matplotlib内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Python 相关文章推荐
python 正则式 概述及常用字符
May 07 Python
python统计文本文件内单词数量的方法
May 30 Python
约瑟夫问题的Python和C++求解方法
Aug 20 Python
python pandas库中DataFrame对行和列的操作实例讲解
Jun 09 Python
Python使用分布式锁的代码演示示例
Jul 30 Python
python递归全排列实现方法
Aug 18 Python
Python进阶之自定义对象实现切片功能
Jan 07 Python
浅谈python str.format与制表符\t关于中文对齐的细节问题
Jan 14 Python
详解使用Python下载文件的几种方法
Oct 13 Python
python GUI库图形界面开发之PyQt5布局控件QVBoxLayout详细使用方法与实例
Mar 06 Python
python代码区分大小写吗
Jun 17 Python
改变 Python 中线程执行顺序的方法
Sep 24 Python
Python实现Excel自动分组合并单元格
Feb 22 #Python
matplotlib绘制正余弦曲线图的实现
Feb 22 #Python
Python使用tkinter制作在线翻译软件
Feb 22 #Python
Python中使用Selenium环境安装的方法步骤
Feb 22 #Python
Python爬虫实例之2021猫眼票房字体加密反爬策略(粗略版)
Feb 22 #Python
python实现计算图形面积
Feb 22 #Python
python实现银行账户系统
Feb 22 #Python
You might like
php面向对象全攻略 (一) 面向对象基础知识
2009/09/30 PHP
php上传文件并显示上传进度的方法
2015/03/24 PHP
PHP中调用C/C++制作的动态链接库的教程
2016/03/10 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
2017/09/20 PHP
php快速导入大量数据的实例方法
2019/09/23 PHP
Laravel 在views中加载公共页面的实现代码
2019/10/22 PHP
两个SUBMIT按钮,如何区分处理
2006/08/22 Javascript
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
2013/01/24 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
2013/12/27 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
2014/04/12 Javascript
推荐9款炫酷的基于jquery的页面特效
2014/12/07 Javascript
JavaScript实现彩虹文字效果的方法
2015/04/16 Javascript
Easyui form combobox省市区三级联动
2016/01/13 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
2016/10/10 Javascript
WebPack配置vue多页面的技巧
2018/05/15 Javascript
移动端H5页面返回并刷新页面(BFcache)的方法
2018/11/06 Javascript
JavaScript隐式类型转换代码实例
2020/05/29 Javascript
详解vue3.0 diff算法的使用(超详细)
2020/07/01 Javascript
python+selenium实现163邮箱自动登陆的方法
2017/12/31 Python
python实现屏保计时器的示例代码
2018/08/08 Python
python求解数组中两个字符串的最小距离
2018/09/27 Python
在Python中增加和插入元素的示例
2018/11/01 Python
用Python逐行分析文件方法
2019/01/28 Python
解决python 3 urllib 没有 urlencode 属性的问题
2019/08/22 Python
Django配置文件代码说明
2019/12/04 Python
Pytorch实现神经网络的分类方式
2020/01/08 Python
Python如何在main中调用函数内的函数方式
2020/06/01 Python
解决Python paramiko 模块远程执行ssh 命令 nohup 不生效的问题
2020/07/14 Python
HTML5 canvas实现移动端上传头像拖拽裁剪效果
2016/03/14 HTML / CSS
乐高积木玩具美国官网:LEGO Shop US
2016/09/16 全球购物
J2EE面试题大全
2016/08/06 面试题
解释下面关于J2EE的名词
2013/11/15 面试题
国际金融专业大学生职业生涯规划书
2013/12/28 职场文书
工作失职检讨书500字
2014/10/17 职场文书
python爬取企查查企业信息之selenium自动模拟登录企查查
2021/04/08 Python
OpenCV 图像梯度的实现方法
2021/07/25 Python