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 26 Python
Python简单调用MySQL存储过程并获得返回值的方法
Jul 20 Python
Python的GUI框架PySide的安装配置教程
Feb 16 Python
Eclipse中Python开发环境搭建简单教程
Mar 23 Python
Python编码爬坑指南(必看)
Jun 10 Python
Django中Model的使用方法教程
Mar 07 Python
基于Tensorflow高阶读写教程
Feb 10 Python
Python单链表原理与实现方法详解
Feb 22 Python
使用Python和百度语音识别生成视频字幕的实现
Apr 09 Python
python图片指定区域替换img.paste函数的使用
Apr 09 Python
聊聊python中的异常嵌套
Sep 01 Python
Pytorch生成随机数Tensor的方法汇总
Sep 09 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文件上传小程序 适合初学者学习!
2019/05/23 PHP
经常用到的JavasScript事件的翻译
2007/04/09 Javascript
Javascript 模式实例 观察者模式
2009/10/24 Javascript
JavaScript中的isXX系列是否继续使用的分析
2011/04/16 Javascript
推荐17个优美新鲜的jQuery的工具提示插件
2012/09/14 Javascript
jquery validate poshytip 自定义样式
2012/11/26 Javascript
JavaScript控制listbox列表框的项目上下移动的方法
2015/03/18 Javascript
分享十五款 jQuery 社交网络分享插件
2015/05/16 Javascript
在Mac OS下使用Node.js的简单教程
2015/06/24 Javascript
理解JavaScript的变量的入门教程
2015/07/07 Javascript
简单介绍jsonp 使用小结
2016/01/27 Javascript
基于javascript实现泡泡大冒险网页版小游戏
2016/03/23 Javascript
js严格模式总结(分享)
2016/08/22 Javascript
pc加载更多功能和移动端下拉刷新加载数据
2016/11/07 Javascript
微信小程序实战之运维小项目
2017/01/17 Javascript
微信小程序左滑删除效果的实现代码
2017/02/20 Javascript
原生js实现鼠标跟随效果
2017/02/28 Javascript
Vue.js 2.0中select级联下拉框实例
2017/03/06 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
2017/06/17 Javascript
VUE实现密码验证与提示功能
2019/10/18 Javascript
JQuery获得内容和属性方法解析
2020/05/30 jQuery
jQuery+ThinkPHP实现图片上传
2020/07/23 jQuery
python基于pdfminer库提取pdf文字代码实例
2019/08/15 Python
解决python3 requests headers参数不能有中文的问题
2019/08/21 Python
通过python扫描二维码/条形码并打印数据
2019/11/14 Python
Python编写memcached启动脚本代码实例
2020/08/14 Python
HTML5 创建canvas元素示例代码
2014/06/04 HTML / CSS
检测浏览器对HTML5和CSS3支持度的方法
2015/06/25 HTML / CSS
HTML5实现移动端弹幕动画效果
2019/08/01 HTML / CSS
Armor Lux法国官方网站:水手服装、成衣和内衣
2020/05/26 全球购物
师范教师大学生职业生涯规划范文
2014/01/05 职场文书
运动会邀请函范文
2014/01/31 职场文书
《再见了,亲人》教学反思
2014/02/26 职场文书
低碳环保标语
2014/06/12 职场文书
综艺节目策划方案
2014/06/13 职场文书
月考总结与反思
2015/10/22 职场文书