PyQtGraphでグラフを描く（2）

PyQtGraphでグラフを描くためのメモです。

完成形は、以下のイメージです。（1）との違いは、Main Windowを使用した点のみです。
実行時のグラフは非表示で、Plotボタンを押すとグラフ表示が行われ、Quitボタンで終了するという単純なものです。


![20210401160559.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191337/42ddf9e8-5679-4a20-8415-51e2939f5b15.png)


## 結論

本稿の操作で、以下のコードが得られます。
先ずは、QtDesignerで読み込むことができるxmlファイルです。

<details><summary>mainUiMW.ui</summary><div>

```xml
<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>MainWindow</class>
 <widget class="QMainWindow" name="MainWindow">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>800</width>
    <height>600</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>MainWindow</string>
  </property>
  <widget class="QWidget" name="centralwidget">
   <layout class="QGridLayout" name="gridLayout">
    <item row="0" column="0">
     <layout class="QVBoxLayout" name="verticalLayout"/>
    </item>
    <item row="1" column="0">
     <layout class="QHBoxLayout" name="horizontalLayout">
      <item>
       <spacer name="horizontalSpacer">
        <property name="orientation">
         <enum>Qt::Horizontal</enum>
        </property>
        <property name="sizeHint" stdset="0">
         <size>
          <width>40</width>
          <height>20</height>
         </size>
        </property>
       </spacer>
      </item>
      <item>
       <widget class="QPushButton" name="pltBtn">
        <property name="text">
         <string>Plot</string>
        </property>
       </widget>
      </item>
      <item>
       <widget class="QPushButton" name="quitBtn">
        <property name="text">
         <string>Quit</string>
        </property>
       </widget>
      </item>
     </layout>
    </item>
   </layout>
  </widget>
  <widget class="QMenuBar" name="menubar">
   <property name="geometry">
    <rect>
     <x>0</x>
     <y>0</y>
     <width>800</width>
     <height>24</height>
    </rect>
   </property>
  </widget>
  <widget class="QStatusBar" name="statusbar"/>
 </widget>
 <resources/>
 <connections>
  <connection>
   <sender>quitBtn</sender>
   <signal>clicked()</signal>
   <receiver>MainWindow</receiver>
   <slot>close()</slot>
   <hints>
    <hint type="sourcelabel">
     <x>759</x>
     <y>436</y>
    </hint>
    <hint type="destinationlabel">
     <x>646</x>
     <y>29</y>
    </hint>
   </hints>
  </connection>
 </connections>
</ui>

```
</div></details>

uiをロードするコードは以下のとおりです。

<details><summary>mainUiMW.py</summary><div>

```python
from PyQt5 import QtCore, QtGui, QtWidgets


class Ui_MainWindow(object):
    def setupUi(self, MainWindow):
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(800, 600)
        self.centralwidget = QtWidgets.QWidget(MainWindow)
        self.centralwidget.setObjectName("centralwidget")
        self.gridLayout = QtWidgets.QGridLayout(self.centralwidget)
        self.gridLayout.setObjectName("gridLayout")
        self.verticalLayout = QtWidgets.QVBoxLayout()
        self.verticalLayout.setObjectName("verticalLayout")
        self.gridLayout.addLayout(self.verticalLayout, 0, 0, 1, 1)
        self.horizontalLayout = QtWidgets.QHBoxLayout()
        self.horizontalLayout.setObjectName("horizontalLayout")
        spacerItem = QtWidgets.QSpacerItem(40, 20, QtWidgets.QSizePolicy.Expanding, QtWidgets.QSizePolicy.Minimum)
        self.horizontalLayout.addItem(spacerItem)
        self.pltBtn = QtWidgets.QPushButton(self.centralwidget)
        self.pltBtn.setObjectName("pltBtn")
        self.horizontalLayout.addWidget(self.pltBtn)
        self.quitBtn = QtWidgets.QPushButton(self.centralwidget)
        self.quitBtn.setObjectName("quitBtn")
        self.horizontalLayout.addWidget(self.quitBtn)
        self.gridLayout.addLayout(self.horizontalLayout, 1, 0, 1, 1)
        MainWindow.setCentralWidget(self.centralwidget)
        self.menubar = QtWidgets.QMenuBar(MainWindow)
        self.menubar.setGeometry(QtCore.QRect(0, 0, 800, 24))
        self.menubar.setObjectName("menubar")
        MainWindow.setMenuBar(self.menubar)
        self.statusbar = QtWidgets.QStatusBar(MainWindow)
        self.statusbar.setObjectName("statusbar")
        MainWindow.setStatusBar(self.statusbar)

        self.retranslateUi(MainWindow)
        self.quitBtn.clicked.connect(MainWindow.close)
        QtCore.QMetaObject.connectSlotsByName(MainWindow)

    def retranslateUi(self, MainWindow):
        _translate = QtCore.QCoreApplication.translate
        MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow"))
        self.pltBtn.setText(_translate("MainWindow", "Plot"))
        self.quitBtn.setText(_translate("MainWindow", "Quit"))

```
</div></details>

uiをロードするコードは以下のとおりです。

<details><summary>main.py</summary><div>

```python
import sys
from PyQt5 import QtWidgets
import numpy as np
import pyqtgraph as pg

from PyQt5 import uic
class GraphWindow(QtWidgets.QMainWindow):   
    def __init__(self, *args, **kwargs):
        super(GraphWindow, self).__init__(*args, **kwargs)
        uic.loadUi('mainUiMW.ui', self)


        # ここからは共通
        self.p1, self.p2 = self.set_graph_ui()
        self.pltBtn.clicked.connect(self.plot)

    def set_graph_ui(self):
        pg.setConfigOptions(antialias=True)
        win = pg.GraphicsLayoutWidget()
        self.verticalLayout.addWidget(win)
        
        p1 = win.addPlot()
        p1.setAutoVisible(y=True)

        win.nextRow()
        p2 = win.addPlot()
        p2.setAutoVisible(y=True)

        return p1, p2


    def plot(self):
        self.p1.clear()
        self.p2.clear()
        t = np.linspace(0, 20, 200)
        y_cos = np.cos(t)
        data1 = 10000 + 15000 * pg.gaussianFilter(np.random.random(size=10000), 10) + 3000 * np.random.random(size=10000)
        data2 = 15000 + 15000 * pg.gaussianFilter(np.random.random(size=10000), 10) + 3000 * np.random.random(size=10000)

        self.p1.plot(data1, pen="r")
        self.p1.plot(data2, pen="g")
        self.p2.plot(data1, pen="w")


if __name__ == '__main__':
    app = QtWidgets.QApplication(sys.argv)
    myWin = GraphWindow()
    myWin.show()
    sys.exit(app.exec_())
```
</div></details>




## pythonに変換してロード

uiファイルをpythonに変換した場合は、以下の部分を

```python
from PyQt5 import uic
class GraphWindow(QtWidgets.QMainWindow):   
    def __init__(self, *args, **kwargs):
        super(GraphWindow, self).__init__(*args, **kwargs)
        uic.loadUi('mainUiMW.ui', self) 
```

から

```python
from mainUiMW import Ui_MainWindow
class GraphWindow(QtWidgets.QMainWindow, Ui_MainWindow):   
    def __init__(self):
        super(GraphWindow, self).__init__()
        self.setupUi(self)    
```