[Python知识库]pyqt5 Qt Designer使用Qchart画图显示动态曲线

PyQt5 Qt Designer 使用Qchart画图显示动态曲线

源码示例下载

传送门

效果图：

导入pyqt5库：

pip install PyQt5==5.15.4 -i https://pypi.tuna.tsinghua.edu.cn/simple
pip install pyqt5-plugins==5.15.4.2.2 -i https://pypi.tuna.tsinghua.edu.cn/simple
pip install PyQt5-Qt5==5.15.2 -i https://pypi.tuna.tsinghua.edu.cn/simple
pip install PyQt5-sip==12.9.1 -i https://pypi.tuna.tsinghua.edu.cn/simple
pip install PyQt5-stubs==5.15.2.0 -i https://pypi.tuna.tsinghua.edu.cn/simple
pip install pyqt5-tools==5.15.4.3.2 -i https://pypi.tuna.tsinghua.edu.cn/simple
pip install python-dotenv==0.20.0 -i https://pypi.tuna.tsinghua.edu.cn/simple
pip install qt5-applications==5.15.2.2.2 -i https://pypi.tuna.tsinghua.edu.cn/simple
pip install qt5-tools==5.15.2.1.2 -i https://pypi.tuna.tsinghua.edu.cn/simple
pip install numpy==1.21.6 -i https://pypi.tuna.tsinghua.edu.cn/simple

一、使用QtChart

1、导入库

pip install PyQtChart==5.15.5  -i https://pypi.tuna.tsinghua.edu.cn/simple

2、打开Qt Designer

创建一个Main Windows:

保存，命名为dym_plot_qchart.ui

3、添加按钮控件

添加一个按钮控件pushButton，在右侧objectName命名为btn_start

保存。

4、添加图形控件

添加一个图形控件Graphics View，在右侧objectName命名为plot_view

保存。

选中Graphics View，右键，选择提升为...，其中提升的类名称：QChartView，头文件：PyQt5.QtChart，如下图：

添加后，点击提升，然后保存。

5、使用pyuic5.exe把ui转py

使用pyuic5.exe把dym_plot_qchart.ui转dym_plot_qchart.py:

转成功后，dym_plot_qchart.py代码如下：

# -*- coding: utf-8 -*-

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


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.btn_start = QtWidgets.QPushButton(self.centralwidget)
        self.btn_start.setGeometry(QtCore.QRect(40, 50, 93, 28))
        self.btn_start.setObjectName("btn_start")
        self.plot_view = QChartView(self.centralwidget)
        self.plot_view.setGeometry(QtCore.QRect(20, 130, 751, 281))
        self.plot_view.setObjectName("plot_view")
        MainWindow.setCentralWidget(self.centralwidget)
        self.menubar = QtWidgets.QMenuBar(MainWindow)
        self.menubar.setGeometry(QtCore.QRect(0, 0, 800, 26))
        self.menubar.setObjectName("menubar")
        MainWindow.setMenuBar(self.menubar)
        self.statusbar = QtWidgets.QStatusBar(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", "MainWindow"))
        self.btn_start.setText(_translate("MainWindow", "开始"))
from PyQt5.QtChart import QChartView

6、创建一个dym_plot_qchart_main.py

在dym_plot_qchart.py同级目录下创建一个dym_plot_qchart_main.py函数，用来启动PyQt5界面。

代码如下：

# !/usr/bin/python
# -*- coding: utf-8 -*-

"""
@contact: 微信 1257309054
@file: main_das.py
@time: 2022/3/25 14:27
@author: LDC
"""
import json
import time

import numpy as np
import sys

from PyQt5.Qt import *
from dym_plot_qchart import Ui_MainWindow
from PyQt5.QtChart import QChart, QValueAxis, QChartView, QSplineSeries


class Window(QMainWindow, Ui_MainWindow):
    def __init__(self, app):
        super(QMainWindow, self).__init__()
        self.app = app
        self.setup_ui()  # 渲染画布
        self.update_data_thread = UpdateDataThread()  # 创建更新波形数据线程
        self.connect_signals()  # 绑定触发事件

    def setup_ui(self):
        self.setupUi(self)  # 调用Ui_MainWindow的setupUi渲染界面

        # 加载Qchart波形界面
        self.plot_qchart = QChartViewPlot()
        self.plot_view.setChart(self.plot_qchart)
        self.plot_view.setRenderHint(QPainter.Antialiasing)  # 抗锯齿
        self.plot_view.setRubberBand(QChartView.RectangleRubberBand)

    def connect_signals(self):
        # 绑定触发事件
        self.btn_start.clicked.connect(self.btn_start_clicked)
        self.update_data_thread._signal_update.connect(self.update_data_thread_slot)

    def btn_start_clicked(self):
        # 开启按钮
        self.update_data_thread.start()

    def update_data_thread_slot(self, data):
        # 线程回调函数
        data = json.loads(data)
        self.plot_qchart.handle_update(data['sin_data'])

    def wheelEvent(self, event):
        # 鼠标滚轮:缩放Qchart波形
        if event.angleDelta().y() >= 0:
            #  鼠标滚轮向上
            if event.x() < (
                    self.plot_view.width() + self.plot_view.x()) and event.x() > self.plot_view.x():
                if event.y() < (
                        self.plot_view.height() + self.plot_view.y()) and event.y() > self.plot_view.y():
                    self.plot_qchart.zoomIn()
        else:
            #  鼠标滚轮向下
            if event.x() < (
                    self.plot_view.width() + self.plot_view.x()) and event.x() > self.plot_view.x():
                if event.y() < (
                        self.plot_view.height() + self.plot_view.y()) and event.y() > self.plot_view.y():
                    self.plot_qchart.zoomOut()


# 波形显示
class QChartViewPlot(QChart):
    # 相位振动波形
    def __init__(self, parent=None):
        super(QChartViewPlot, self).__init__(parent)
        self.window = parent
        self.xRange = 1024
        self.counter = 0
        self.seriesList = []
        self.legend().show()

        self.axisX = QValueAxis()
        self.axisX.setRange(0, self.xRange)
        self.addAxis(self.axisX, Qt.AlignBottom)
        # self.setAxisX(self.axisX, series)
        self.y_min = 0
        self.y_max = 100
        self.axisY = QValueAxis()
        self.axisY.setRange(self.y_min, self.y_max)
        self.addAxis(self.axisY, Qt.AlignLeft)
        # self.setAxisY(self.axisY, series)

        self.series = QSplineSeries()
        self.series.setName("波形")
        self.series.setUseOpenGL(True)
        self.addSeries(self.series)
        self.series.attachAxis(self.axisX)
        self.series.attachAxis(self.axisY)

    def handle_update(self, ydata):
        # 更新y值
        if self.counter < self.xRange:
            self.series.append(self.counter, ydata)
            self.counter += 1
        else:
            points = self.series.pointsVector()
            for i in range(self.xRange - 1):
                points[i].setY(points[i + 1].y())
            points[-1].setY(ydata)
            self.y_min = min(points, key=lambda point: point.y()).y()
            self.y_max = max(points, key=lambda point: point.y()).y()
            self.series.replace(points)
            self.axisY.setRange(self.y_min - 20, self.y_max + 20)


# 使用线程不断更新波形数据
class UpdateDataThread(QThread):
    _signal_update = pyqtSignal(str)  # 信号

    def __init__(self, parent=None):
        super(UpdateDataThread, self).__init__(parent)
        self.qmut = QMutex()
        self.is_exit = False
        self.x_range = 1024
        self.sin = Sin()

    def run(self):
        while True:
            self.qmut.lock()
            if self.is_exit:
                break
            self.qmut.unlock()
            for i in range(self.x_range):
                self._signal_update.emit(json.dumps({'sin_data': self.sin.get_data(i)}))  # 发送信号给槽函数
                time.sleep(0.01)

        self.qmut.unlock()


class Sin():
    # 创建一个正弦波数据
    def __init__(self, pha=0):
        self.pha = pha  # 初始相位

    def get_data(self, index):
        self.pha += 10
        if self.pha > 1000:
            self.pha = 0
        return 1000 * np.sin(8 * np.pi * index + self.pha * np.pi / 180.0)


def main():
    app = QApplication(sys.argv)
    mywindow = Window(app)
    mywindow.show()
    sys.exit(app.exec_())


if __name__ == "__main__":
    main()

运行dym_plot_qchart_main.py，点击开始：

源码示例下载

传送门

后记

【后记】为了让大家能够轻松学编程，我创建了一个公众号【轻松学编程】，里面有让你快速学会编程的文章，当然也有一些干货提高你的编程水平，也有一些编程项目适合做一些课程设计等课题。

也可加我微信【1257309054】，拉你进群，大家一起交流学习。
如果文章对您有帮助，请我喝杯咖啡吧！

公众号

关注我，我们一起成长~~

开发者涨薪指南

48位大咖的思考法则、工作方式、逻辑体系