如何实时可视化渲染你的数据?

编辑：zone

来源：州的先生

作者：州的先生

在之前介绍PyQtGraph的文章中，我们都是一次性的获取数据并将其绘制为图形。然而在很多场景中，我们都需要对实时的数据进行图形化展示。

比如：

• 股票的实时行情

• 仪器设备的实时状态等

这时候就需要对数据进行实时的更新和绘制。今天我们就来介绍一下在PyQtGraph中根据实时数据更新绘制图形。

今天的例子我们通过编写一个电脑CPU实时使用率助手来讲解。

一、通过Python获取实时的CPU信息

在Windows操作系统的电脑上，我们通过“任务管理器”可以很方便地查看到自己电脑CPU实时的使用情况，并且CPU的占用率还会通过一个实时的图形区域显示出来，如下图所示：

通过实时变化的CPU利用率图形，我们可以清晰地看到CPU使用情况的变化。在Python中，我们也能很方便的获取到计算机CPU的实时使用率。

1. # coding:utf-8

2. import
   

3. psutil

4. cpu = "CPU:%0.2f" % psutil.cpu_percent(interval=1) + "%"

5. print(cpu)

通过运行上述代码，我们就能获取到此时电脑CPU的使用率。通过将其改进一下，加入循环和时间间隔，我们就可以持续获得当前电脑CPU的使用率，如下代码所示：

1. # coding:utf-8

1. import psutil

2. import time

3. def get_cpu_info():

4. cpu = "CPU:%0.2f" % psutil.cpu_percent(interval=1) + "%"

5. return cpu

6. def main():

7. while True:

8. info = get_cpu_info()

9. print(info)

10. time.sleep(1)

11. if __name__ == "__main__":

12. main()

运行上述代码，我们将每隔1秒获取到实时的CPU使用率数据，这将是我们图形界面程序的数据来源。

二、使用PyQt5创建一个图形界面

有了数据来源之后，我们来创建一个图形界面，这个图形界面由一个Widget包裹着一个Plotwidget，图形界面的核心就是一个ptqtgraph的图形部件。其代码如下所示：

1. # coding:utf-8

1. from PyQt5 import QtWidgets,QtCore,QtGui

2. import tushare as ts

3. import pyqtgraph as pg

4. import sys

5. import datetime

6. import traceback

7. import numpy as np

8. class MainUi(QtWidgets.QMainWindow):

9. def __init__(self):

10. super().__init__()

11. self.setWindowTitle("CPU使用率监控 - 州的先生https://zmister.com")

12. self.main_widget = QtWidgets.QWidget() # 创建一个主部件

13. self.main_layout = QtWidgets.QGridLayout() # 创建一个网格布局

14. self.main_widget.setLayout(self.main_layout) # 设置主部件的布局为网格

15. self.setCentralWidget(self.main_widget) # 设置窗口默认部件

16. self.plot_widget = QtWidgets.QWidget() # 实例化一个widget部件作为K线图部件

17. self.plot_layout = QtWidgets.QGridLayout() # 实例化一个网格布局层

18. self.plot_widget.setLayout(self.plot_layout) # 设置线图部件的布局层

19. self.plot_plt = pg.PlotWidget() # 实例化一个绘图部件

20. self.plot_plt.showGrid(x=True,y=True) # 显示图形网格

21. self.plot_layout.addWidget(self.plot_plt) # 添加绘图部件到线图部件的网格布局层

22. # 将上述部件添加到布局层中

23. self.main_layout.addWidget(self.plot_widget, 1, 0, 3, 3)

24. self.setCentralWidget(self.main_widget)

25. def main():

26. app = QtWidgets.QApplication(sys.argv)

27. gui = MainUi()

28. gui.show()

29. sys.exit(app.exec_())

30. if __name__ == '__main__':

31. main()

运行上述代码，我们将会得到一个如下图所示的图形界面：

我们的CPU使用率数据将会通过图形界面中间的画布部件显示出来。

三、在PyQtGraph中实时显示CPU数据

创建好了基础的图形界面之后，我们就可以实时获取电脑CPU的使用率然后将其绘制在图形界面上了。

在之前的文章中，我们知道pyqtgraph的绘图数据主要是通过setData()这个方法来转化为图形。我们可以设置一个定时器，每隔一个时间重新调用setData()方法对图形数据进行设置，就能够实现实时的数据可视化呈现。下面我们通过代码演示一下：

1. from PyQt5 import QtWidgets,QtCore,QtGui

2. import pyqtgraph as pg

3. import sys

4. import traceback

5. import psutil

6. class MainUi(QtWidgets.QMainWindow):

7. def __init__(self):

8. super().__init__()

9. self.setWindowTitle("CPU使用率监控 - 州的先生https://zmister.com")

10. self.main_widget = QtWidgets.QWidget() # 创建一个主部件

11. self.main_layout = QtWidgets.QGridLayout() # 创建一个网格布局

12. self.main_widget.setLayout(self.main_layout) # 设置主部件的布局为网格

13. self.setCentralWidget(self.main_widget) # 设置窗口默认部件

14. self.plot_widget = QtWidgets.QWidget() # 实例化一个widget部件作为K线图部件

15. self.plot_layout = QtWidgets.QGridLayout() # 实例化一个网格布局层

16. self.plot_widget.setLayout(self.plot_layout) # 设置K线图部件的布局层

17. self.plot_plt = pg.PlotWidget() # 实例化一个绘图部件

18. self.plot_plt.showGrid(x=True,y=True) # 显示图形网格

19. self.plot_layout.addWidget(self.plot_plt) # 添加绘图部件到K线图部件的网格布局层

20. # 将上述部件添加到布局层中

21. self.main_layout.addWidget(self.plot_widget, 1, 0, 3, 3)

22. self.setCentralWidget(self.main_widget)

23. self.plot_plt.setYRange(max=100,min=0)

24. self.data_list = []

25. self.timer_start()

26. # 启动定时器 时间间隔秒

27. def timer_start(self):

28. self.timer = QtCore.QTimer(self)

29. self.timer.timeout.connect(self.get_cpu_info)

30. self.timer.start(1000)

31. # 获取CPU使用率

32. def get_cpu_info(self):

33. try:

34. cpu = "%0.2f" % psutil.cpu_percent(interval=1)

35. self.data_list.append(float(cpu))

36. print(float(cpu))

37. self.plot_plt.plot().setData(self.data_list,pen='g')

38. except Exception as e:

39. print(traceback.print_exc())

40. def main():

41. app = QtWidgets.QApplication(sys.argv)

42. gui = MainUi()

43. gui.show()

44. sys.exit(app.exec_())

45. if __name__ == '__main__':

46. main()

在上述代码中，我们定义了一个1秒钟的计时器，然后定义了一个数据列表data_list，获取到的cpu使用率都将添加到这个列表中，然后作为图形数据传递给pyqtgraph。

运行上述代码，我们可以得到如下动图所示的实时更新图形界面，每一秒获取到的CPU使用率数据都实时绘制为了线条：

由于所有的操作都是在主线程上进行的，会导致图形界面有些许的卡顿，更加理想的做法是创建一个子线程来生成和绘制图形，在此就不作额外的演示了，大家可以自己尝试一下。

往期推荐：

---