Bài 31: Trực quan hóa dữ liệu – PyQtGraph-PlotWidget-PyQt6 – Part 1

PyQt6 cung cấp gói thư viện PyQtGraph, QGraphicScene để trực quan hóa dữ liệu dưới dạng biểu đồ một cách hiệu quả. Đặc biệt đối với Live Data, cũng như cung cấp khả năng tương tác và khả năng dễ dàng tùy chỉnh các loại biểu đồ bằng các tiện ích đồ họa trong Qt.

Bài học này Chúng ta sẽ tìm hiểu cách tải thư viện và vẽ một chart đơn giản bằng PyQtGraph. Bài học sau Tui sẽ trình bày chi tiết các thành phần bên trong PyQtGraph, và hướng dẫn cách customize màu đường kẻ, loại đường kẻ, các tiêu đề của các trục, màu nền, cũng như cách vẽ nhiều biểu đồ trong cùng một màn hình.

Ta tiến hành từng bước như hướng dẫn dưới đây.

Bước 1: Cài đặt PyQtGraph bằng lệnh dưới đây:

pip install git+https://github.com/pyqtgraph/pyqtgraph@master

Mở command line để thực hiện câu lệnh trên:

Bước 2: Tạo một dự án tên “LearnPyQtGraphPart1” trong Pycharm. Thiết kế giao diện và tạo các lớp cho dự án có cấu trúc như dưới đây:

“MainWindow.ui” là giao diện được thiết kế bằng Qt Designer
“MainWindow.py” là generate python code của “MainWindow.ui”
“MainWindowEx.py” là file mã lệnh kế thừa từ “MainWindow.py” để xử lý nạp giao diện, gán Chart và các sự kiện, lớp này sẽ không lệ thuộc vào sự thay đổi của giao diện cũng như generate code
“MyApp.py” là file mã lệnh thực thi chương trình

Bước 3: Thiết kế Giao diện “MainWindow.ui” như dưới đây

Trong giao diện ta chỉ cần kéo một QVBoxLayout vào MainWindow và đặt tên là “myLayout“

Bước 4: Generate Python code “MainWindow.py” cho “MainWindow.ui”

# Form implementation generated from reading ui file 'MainWindow.ui'
#
# Created by: PyQt6 UI code generator 6.4.2
#
# WARNING: Any manual changes made to this file will be lost when pyuic6 is
# run again.  Do not edit this file unless you know what you are doing.


from PyQt6 import QtCore, QtGui, QtWidgets


class Ui_MainWindow(object):
    def setupUi(self, MainWindow):
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(441, 322)
        self.centralwidget = QtWidgets.QWidget(parent=MainWindow)
        self.centralwidget.setObjectName("centralwidget")
        self.verticalLayout_2 = QtWidgets.QVBoxLayout(self.centralwidget)
        self.verticalLayout_2.setObjectName("verticalLayout_2")
        self.myLayout = QtWidgets.QVBoxLayout()
        self.myLayout.setObjectName("myLayout")
        self.verticalLayout_2.addLayout(self.myLayout)
        MainWindow.setCentralWidget(self.centralwidget)
        self.menubar = QtWidgets.QMenuBar(parent=MainWindow)
        self.menubar.setGeometry(QtCore.QRect(0, 0, 441, 26))
        self.menubar.setObjectName("menubar")
        MainWindow.setMenuBar(self.menubar)
        self.statusbar = QtWidgets.QStatusBar(parent=MainWindow)
        self.statusbar.setObjectName("statusbar")
        MainWindow.setStatusBar(self.statusbar)

        self.retranslateUi(MainWindow)
        QtCore.QMetaObject.connectSlotsByName(MainWindow)

    def retranslateUi(self, MainWindow):
        _translate = QtCore.QCoreApplication.translate
        MainWindow.setWindowTitle(_translate("MainWindow", "Trần Duy Thanh - PyQtGraph"))

Bước 5: Viết lớp python kế thừa trong “MainWindowEx.py“

from MainWindow import Ui_MainWindow
#Step 1: import pyqtgraph
import pyqtgraph as pg

class MainWindowEx(Ui_MainWindow):
    def setupUi(self, MainWindow):
        super().setupUi(MainWindow)
        self.MainWindow=MainWindow
        #Step 2: call pg.PlotWidget()
        self.graphWidget = pg.PlotWidget()
        #Step 3: Create plot data
        hour = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10,11,12]
        temperature = [20, 21, 20, 32, 33, 31, 29,31, 32, 35,37, 45]
        #Step 4: call plot method
        self.graphWidget.plot(hour, temperature)
        #Step 5: add graphWidget into Layout:
        self.myLayout.addWidget(self.graphWidget)
    def show(self):
        self.MainWindow.show()

Trong bước 5 ta có một số bước nhỏ để tạo Chart bằng PyQtGraph. Chúng ta làm theo các ghi chú mà Tui để ở trong code.

Bước 5.1: Khai báo thư viện PyQtGraph và đặt lại tên thư viện pg (ta có thể đặt tên khác hoặc không đặt)
Bước 5.2: Tạo đối tượng PlotWidget bằng cách gọi pg.PlotWidget() và lưu đối tượng này vào biến graphWidget
Bước 5.3: Khai báo 2 mảng dữ liệu cho hour và temperature, 2 mảng này phải cùng số lượng phần tử
Bước 5.4: Gọi phương thức plot(hour,temperature) của đối tượng graphWidget
Bước 5.5: Đưa đối tượng graphWidget vào layout

Bước 6: Viết “MyApp.py” để thực thi chương trình

from PyQt6.QtWidgets import QApplication, QMainWindow

from MainWindowEx import MainWindowEx

app=QApplication([])
myWindow= MainWindowEx()
myWindow.setupUi(QMainWindow())
myWindow.show()
app.exec()

Chạy chương trình MyApp.py ta có Chart như dưới đây:

Ta thấy trục Temperature hiển thị: 20, 25, 30, 35, 40, 45

Trục Hour, hiển thị: 2, 4, 6, 8, 10, 12

Bạn thực hành lại bài này để hiểu được cách sử dụng thư viện PyQtGraph một cách đơn giản nhất nhé. Khoan hãy đi vào chi tiết, chỉ cần biết cách gọi và sử dụng thư viện này để hiển thị Chart là thành công.

Source code đầy đủ của bài này các bạn tải ở đây:

https://www.mediafire.com/file/ckrg97s6xul5jrr/LearnPyQtGraphPart1.rar/file

Bài học sau Tui sẽ trình bày chi tiết các thành phần bên trong PyQtGraph, và hướng dẫn cách customize màu đường kẻ, loại đường kẻ, các tiêu đề của các trục, màu nền, cũng như cách vẽ nhiều biểu đồ trong cùng một màn hình. Các bạn chú ý theo dõi.

Chúc các bạn thành công