Pyside2中嵌入Matplotlib的繪圖的實現

Posted on by

近期遇到一個需求，就是用PySide2做出一個GUI，並且要將後臺使用Matplotlib繪制的圖顯示在界面上。自己琢磨瞭蠻久，網上也搜瞭不少資料，但都感覺參差不齊，所以就自己總結一下。

我們使用QGraphicsView插件來顯示Matplotlib裡繪制的圖片。這裡演示的功能為：打開時界面默認繪制 cos函數的圖像，點擊按鈕後，繪制sin函數的圖像。

1. 界面設計

簡單創建一個界面：一個 GraphicsView 和 一個 PushButton

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方法呈現圖形

到這裡，已經可以運行看到初步效果瞭

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 和 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內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：