【Visual Studio】Qt 的实时绘图曲线功能，使用 C++ 语言，配合 Qt 开发串口通信界面

知识不是单独的，一定是成体系的。更多我的个人总结和相关经验可查阅这个专栏：Visual Studio。

战斗背景：做了个串口接收界面，用来接收传输过来的信号。但是光用数字显示太单调，需要用图线显示出来。

战略目标：干掉它。

战术路线：Qt 绘图可以使用 Qt Charts，先了解一些关于 Qt Charts 的基础知识，然后根据自己的实时动态曲线需求，将它融合到我的工程中。

1. 实现一个最简单的折线图

先上效果，再来解释。操作步骤和效果如下图：

文件 GUI.h

文件 GUI.cpp

最终运行效果：

---

可能 Bug：C1083

参考这个文章解决就行了：【Visual Studio】报错 C1083，使用 C++ 语言，配合 Qt 开发串口通信界面。

---

背后蕴藏的知识

Qt 提供的相关的 class 类有：

算了下，一共有 48 个类，实现一个图表并不需要全部用到，根据所需实现的图表，只需用到当中的几个就行，这些类，大致上可以分为如下几类：

• QChartView Class： 一个用来显示图表的区域，或者理解为画布，可以在QChartView上实现所有Qt Chart支持的图表。

QChartView -> QGraphicsView -> QAbstractScrollArea -> QFrame -> QWidget

• QChart Class：QChart 是 QGraphicsWidget，可以在 QGraphicsScene 上显示，用来管理图表中的数据、图例、坐标轴等，

QChart -> QGraphicsWidget -> QGraphicsObject and QGraphicsLayoutItem QGraphicsObject <-- QObject and QGraphicsItem

• QLineSeries Class 这个是图表的类型，其他的还有 QSplineSeries，QAreaSeries，QScatterSeries 等。

2. 配置一下 chart 图表的显示区域

上述步骤做出来的表格，其显示位置是显示在了整个界面框中，把其他内容都给覆盖掉了，这是肯定不行的。

接下来我就将从网上对比后，觉得不错的方式记录下来。最终效果就是将图表限制到一定区域内。效果如下图所示。

文件 GUI.ui

这里我使用的是添加一个 Widget 的方法。

文件 GUI.cpp

---

可能 Bug：C2653

参考这个文章解决就行了：【Visual Studio】报错 C2653，使用 C++ 语言，配合 Qt 开发串口通信界面。

---

3. 添加 XY 轴并修改显示范围

实现动态曲线之前，我们先要具备能修改坐标轴显示范围的功能。否则，当数据传输越来越多，而坐标轴的显示范围没有及时发生更改，那么数据就没有办法正常显示出来。

文件 GUI.h

文件 GUI.cpp

3. 动态曲线

动态曲线，顾名思义，就是让曲线动起来。

Ref.

1. 一、Qt Charts
2. QtCharts编程笔记：VS2019+Qt Charts 5.15.1环境配置
3. Qt GUI开发（一）—— Qt Chart的简单使用