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端口扫描系统实现方法
Nov 19 Python
在Python中操作时间之mktime()方法的使用教程
May 22 Python
深入解析Python的Tornado框架中内置的模板引擎
Jul 11 Python
pandas值替换方法
Jul 10 Python
对python借助百度云API对评论进行观点抽取的方法详解
Feb 21 Python
python利用re,bs4,requests模块获取股票数据
Jul 29 Python
python实现代码统计器
Sep 19 Python
python web框架Flask实现图形验证码及验证码的动态刷新实例
Oct 14 Python
Python调用Windows API函数编写录音机和音乐播放器功能
Jan 05 Python
解决Keras中循环使用K.ctc_decode内存不释放的问题
Jun 29 Python
python3.4中清屏的处理方法
Jul 06 Python
基于python图书馆管理系统设计实例详解
Aug 05 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
114啦源码(114la)不能生成地方房产和地方报刊问题4级页面0字节的解决方法
2012/01/12 PHP
Php中用PDO查询Mysql来避免SQL注入风险的方法
2013/04/25 PHP
weiphp微信公众平台授权设置
2016/01/04 PHP
php微信支付之公众号支付功能
2018/05/30 PHP
Ajax一统天下之Dojo整合篇
2007/03/24 Javascript
爱恋千雪-US-AscII加密解密工具(网页加密)下载
2007/06/06 Javascript
关于恒等于(===)和非恒等于(!==)
2007/08/20 Javascript
Jquery加载时从后台读取数据绑定到dropdownList实例
2013/06/09 Javascript
javascript实现复选框选中属性
2015/03/25 Javascript
js动态创建及移除div的方法
2015/06/03 Javascript
Vue.js 递归组件实现树形菜单(实例分享)
2016/12/21 Javascript
jQuery实现弹窗居中效果类似alert()
2017/02/27 Javascript
Bootstrap表格制作代码
2017/03/17 Javascript
基于Vue制作组织架构树组件
2017/12/06 Javascript
微信小程序商品详情页的底部弹出框效果
2020/11/16 Javascript
微信小程序移动拖拽视图-movable-view实例详解
2019/08/17 Javascript
Vue项目配置跨域访问和代理proxy设置方式
2020/09/08 Javascript
带你使用webpack快速构建web项目的方法
2020/11/12 Javascript
[01:22:29]真视界:2019年国际邀请赛总决赛
2020/01/29 DOTA
python实现封装得到virustotal扫描结果
2014/10/05 Python
使用Python的urllib2模块处理url和图片的技巧两则
2016/02/18 Python
Python批量修改图片分辨率的实例代码
2019/07/04 Python
Centos7下源码安装Python3 及shell 脚本自动安装Python3的教程
2020/03/07 Python
Python爬虫实现HTTP网络请求多种实现方式
2020/06/19 Python
终于搞懂了Keras中multiloss的对应关系介绍
2020/06/22 Python
完美解决TensorFlow和Keras大数据量内存溢出的问题
2020/07/03 Python
CSS3 Backgrounds属性相关介绍
2011/05/11 HTML / CSS
使用html5+css3来实现slider切换效果告别javascript+css
2013/01/08 HTML / CSS
一站式跨境收款解决方案:Payoneer(派安盈)
2018/09/06 全球购物
广告设计专业自荐信范文
2013/11/14 职场文书
汽车专业人才自我鉴定范文
2013/12/29 职场文书
理工学院学生自我鉴定
2014/02/23 职场文书
宣传活动总结范文
2014/07/01 职场文书
师德师风自查总结
2014/10/14 职场文书
2016国庆节67周年寄语
2015/12/07 职场文书
求职自我评价参考范文
2019/05/16 职场文书