知识不是单独的,一定是成体系的。更多我的个人总结和相关经验可查阅这个专栏:Visual Studio。
战斗背景:做了个串口接收界面,用来接收传输过来的信号。但是光用数字显示太单调,需要用图线显示出来。
战略目标:干掉它。
战术路线:Qt 绘图可以使用 Qt Charts,先了解一些关于 Qt Charts 的基础知识,然后根据自己的实时动态曲线需求,将它融合到我的工程中。
文章目录
- 1. 实现一个最简单的折线图
- 文件 `GUI.h`
- 文件 `GUI.cpp`
- 可能 Bug:C1083
- 背后蕴藏的知识
- 2. 配置一下 chart 图表的显示区域
- 文件 `GUI.ui`
- 文件 `GUI.cpp`
- 可能 Bug:C2653
- 3. 添加 XY 轴并修改显示范围
- 文件 `GUI.h`
- 文件 `GUI.cpp`
- 4. 使用系统当前时间作为 X 轴坐标
- 文件 `GUI.ui`
- 文件 `GUI.h`
- 文件 `GUI.cpp`
- 5. 动态曲线
- Ref.
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
4. 使用系统当前时间作为 X 轴坐标
文件 GUI.ui
文件 GUI.h
这里使用 qdatetimeaxis.h
来完成。
文件 GUI.cpp
5. 动态曲线
动态曲线,顾名思义,就是让曲线动起来。其实经过了以上的这几步,接下来只需要两句话就能让程序动起来了。
我是将这两句写到了我的串口接收程序中了,也就是接到数据,就进行图表的更新。大家可以根据自己的需求,放到合适的位置,让他的更新机制更符合自己的项目需求。
最后,放一张此小项目的最终效果图。再往下,就涉及到一些实验室保密数据了,因此,就不方便再继续展示了。
Ref.
- 一、Qt Charts
- QtCharts编程笔记:VS2019+Qt Charts 5.15.1环境配置
- Qt GUI开发(一)—— Qt Chart的简单使用
- QChart双Y轴实时更新曲线图(横坐标为当前时间)
- QChart绘制占比图,但是以时间轴为X轴