0
0

QChartView显示实时更新的温度曲线图，即动态曲线图。

前言：因为有个项目要实现将热像仪传过来的温度图像实时的显示在图表中，所以用到QChartView来显示，网上没有找到这种实时更新温度数据曲线的方法，于是自己琢磨了一下，实现了显示动态的温度曲线。

一、UI设计界面中添加QChartView控件。

1）在工程的.pro文件头部加上charts的支持，如下。

  1. QT += charts

2）ui设计界面拖动Widget到界面上，鼠标右键选择“提升为...”菜单，在“提升的类名称：”输入框中输入QChartView，点击“添加”，将QChartView添加到列表。然后选中上面列表中添加的QChartView控件，点击“提升”按钮即可。

3）若出现编译错误，可以搜索下，能找到解决方法。

二、C++头文件中定义温度曲线图相关的变量和方法。

  1. // 在头文件中添加
  2.     // 上一次刷新图表的时间，结合refreshTempChartTimeGap参数控制图表刷新频率
  3.     static qint64 preUpdateTempChartTime;
  4.     // 在绘制温度曲线的控件上，显示的点个数，
  5.     // 如果每秒钟刷新一次数据（refreshTempChartTimeGap=1000），则控件上显示60个点，横轴显示60秒内的数据
  6.     const int showTempPointMaxCount = 60;
  7.     // 刷新一次温度数据的时间间隔，单位毫秒，越小刷新越快。
  8.     // 结合showTempMaxCount参数表示：图表显示的时间范围为            
  9.     showTempPointMaxCount*refreshTempChartTimeGap
  10.     static const int refreshTempChartTimeGap = 1000;
  11.     // 图表第一次显示时间
  12.     QDateTime chartViewFirstShowTime;
  13.     // 添加最大、最小、平均温度的点坐标序列
  14.     QSplineSeries * globalMaxTempSplineSeres = NULL;
  15.     QSplineSeries * globalMinTempSplineSeres = NULL;
  16.     QSplineSeries * globalAvgTempSplineSeres = NULL;
  17.     // 2022.11.30 新增 @{
  18.     QChart *chart = NULL;
  19.     QDateTimeAxis *dateTimeAxisX = NULL;
  20.     QValueAxis *valueAxisY = NULL;
  21.     // @}
  22.     /** 初始化显示时间-温度的表视图**/
  23.     void initTempChartView();
  24.     /** 显示并更新时间-温度(最高、最低、平均温)图，所有温度同时更新，刷新图表函数*/
  25.     void showTempChartView(float maxTemp, float minTemp, float avgTemp);

三、 C++源文件中初始化变量和方法的具体实现。

  1. //初始化静态变量
  2. qint64 TempSettings::preUpdateTempChartTime = 0;
  3. void TempSettings::initTempChartView()
  4. {
  5.     // 创建图表；
  6.     if (chart == NULL) {
  7.         chart = new QChart();
  8.     }
  10.     // 创建坐标轴；
  11.     if (dateTimeAxisX == NULL) {
  12.         dateTimeAxisX = new QDateTimeAxis();
  13.     }
  15.     if (valueAxisY == NULL) {
  16.         valueAxisY = new QValueAxis();
  17.     }
  19.     valueAxisY->setRange(0, 110);
  20.     // 设置坐标轴标题和显示格式；
  21.     dateTimeAxisX->setTitleText("时间/hh:mm:ss");
  22.     valueAxisY->setTitleText("温度/℃");
  23.     dateTimeAxisX->setFormat("hh:mm:ss");
  24.     valueAxisY->setLabelFormat("%.2f");
  25.     //设置坐标轴的精度；分成多少份(多少个刻度)，最小间隔为Range/(TickCount - 1)
  26.     dateTimeAxisX->setTickCount(10);
  27.     valueAxisY->setTickCount(10);
  28.     // 图表添加坐标轴；
  29.     chart->addAxis(dateTimeAxisX,Qt::AlignBottom);
  30.     chart->addAxis(valueAxisY,Qt::AlignLeft);
  31.     // 设置图表的标题以及图例显示；
  32.     chart->setTitle("温度变化图");
  33.     chart->legend()->hide();
  35.     globalMaxTempSplineSeres = new QSplineSeries;
  36.     globalMinTempSplineSeres = new QSplineSeries;
  37.     globalAvgTempSplineSeres = new QSplineSeries;
  39.     //设置最大温度曲线的颜色；
  40.     QPen globalMaxTempPen(QColor(0xFF0000));
  41.     globalMaxTempPen.setWidth(5);
  42.     globalMaxTempSplineSeres->setPen(globalMaxTempPen);
  44.     // 设置最小温度曲线的颜色；
  45.     QPen globalMinTempPen(QColor(0x0000ff));
  46.     globalMinTempPen.setWidth(5);
  47.     globalMinTempSplineSeres->setPen(globalMinTempPen);
  49.     // 设置平均温度曲线的颜色；
  50.     QPen globalAvgTempPen(QColor(0xffa500));
  51.     globalAvgTempPen.setWidth(5);
  52.     globalAvgTempSplineSeres->setPen(globalAvgTempPen);
  54.     // 图表添加线；
  55.     chart->addSeries(globalMaxTempSplineSeres);
  56.     chart->addSeries(globalMinTempSplineSeres);
  57.     chart->addSeries(globalAvgTempSplineSeres);
  58.     // 将曲线和坐标轴联系起来；
  59.     globalMaxTempSplineSeres->attachAxis(dateTimeAxisX);
  60.     globalMaxTempSplineSeres->attachAxis(valueAxisY);
  61.     globalMinTempSplineSeres->attachAxis(dateTimeAxisX);
  62.     globalMinTempSplineSeres->attachAxis(valueAxisY);
  63.     globalAvgTempSplineSeres->attachAxis(dateTimeAxisX);
  64.     globalAvgTempSplineSeres->attachAxis(valueAxisY);
  65.     // 将图表放置在图表视图显示出来；
  66.     ui->chartView->setChart(chart);
  67. }
  69. void TempSettings::showTempChartView(float maxTemp, float minTemp, float avgTemp)
  70. {
  71.     if (globalMaxTempSplineSeres == NULL ||
  72.             globalMinTempSplineSeres == NULL ||
  73.             globalAvgTempSplineSeres == NULL) {
  74.         return;
  75.     }
  77.     // 当前时间
  78.     QDateTime currentDateTime = QDateTime::currentDateTime();
  79.     // 设置坐标轴范围；
  80.     // 确保点没有填满整个图表时，实现线段从左边逐渐往右边延伸的效果。放在splineseres.append()之前
  81.     // 数据还没有填满整个图表时，范围固定。起始时间为第一次显示的时间。填满图表后，条件不会满足，不会去设置范围，由x值自动控制
  82.     if (globalMaxTempSplineSeres->points().size() < showTempPointMaxCount) {
  83.         // 时间刻度最大值
  84.         QDateTime rangeMaxDateTime;
  85.         // 是否使用第一次计算的时间为横坐标最大时间
  86.         bool useFirstClacRangeMax = true;
  87.         // 记录起始时间
  88.         if (globalMaxTempSplineSeres->points().size() == 0) {
  89.             // 实际上画的第一个点是看不到的，第一次看到的第二个点
  90.             chartViewFirstShowTime = currentDateTime;
  91.         } else {
  92.             // 如果这个函数不在定时器中执行，那else中的代码很有必要
  93.             qint64 lastPointX = currentDateTime.toMSecsSinceEpoch();
  94.             // 微调最大横坐标刻度值。因为有种情况是这样：温度数据更新时间间隔比图表刷新更快。
  95.             // 比如数据100毫秒更新一次，图表我想1秒钟刷新一次。此时计算的最大横坐标刻度就偏小了。
  96.             if (chartViewFirstShowTime.addMSecs(showTempPointMaxCount
  97.                                                 * refreshTempChartTimeGap)
  98.                                                 .toMSecsSinceEpoch() < lastPointX) {
  99.                 // 设置的范围最大值小于最后一个点的x坐标，则调整成最后一个点的x坐标值
  100.                 rangeMaxDateTime = QDateTime::fromMSecsSinceEpoch(lastPointX);
  101.                 useFirstClacRangeMax = false;
  102.             }
  103.         }
  104.         if (useFirstClacRangeMax) {
  105.             rangeMaxDateTime = chartViewFirstShowTime.addMSecs(showTempPointMaxCount * refreshTempChartTimeGap);
  106.         }
  107.         dateTimeAxisX->setRange(chartViewFirstShowTime, rangeMaxDateTime);
  108.     }
  109.     // 添加最新数据
  110.     QPointF maxTempPointF;
  111.     maxTempPointF.setX(currentDateTime.toMSecsSinceEpoch());
  112.     maxTempPointF.setY(maxTemp);
  113.     globalMaxTempSplineSeres->append(maxTempPointF);
  115.     QPointF minTempPointF;
  116.     minTempPointF.setX(currentDateTime.toMSecsSinceEpoch());
  117.     minTempPointF.setY(minTemp);
  118.     globalMinTempSplineSeres->append(minTempPointF);
  120.     QPointF avgTempPointF;
  121.     avgTempPointF.setX(currentDateTime.toMSecsSinceEpoch());
  122.     avgTempPointF.setY(avgTemp);
  123.     globalAvgTempSplineSeres->append(avgTempPointF);
  125.     // 显示固定个数，刷新图表的关键代码
  126.     if (globalMaxTempSplineSeres->points().size() > showTempPointMaxCount) {
  127.         // 移除最前面的一个，过时的/不显示的数据
  128.         globalMaxTempSplineSeres->remove(0);
  129.         globalMinTempSplineSeres->remove(0);
  130.         globalAvgTempSplineSeres->remove(0);
  131.         // 保存后续的所有点，要显示的
  132.         QList<QPointF> maxTempPoints = globalMaxTempSplineSeres->points();
  133.         QList<QPointF> minTempPoints = globalMinTempSplineSeres->points();
  134.         QList<QPointF> avgTempPoints = globalAvgTempSplineSeres->points();
  135.         // 清空
  136.         globalMaxTempSplineSeres->clear();
  137.         globalMinTempSplineSeres->clear();
  138.         globalAvgTempSplineSeres->clear();
  139.         // 重新加入
  140.         for (int i = 0; i < maxTempPoints.size(); i++) {
  141.             globalMaxTempSplineSeres->append(maxTempPoints.at(i));
  142.             globalMinTempSplineSeres->append(minTempPoints.at(i));
  143.             globalAvgTempSplineSeres->append(avgTempPoints.at(i));
  144.         }
  145.         //2022.11.30 增加语句 根据当前点确定横坐标范围
  146.         dateTimeAxisX->setRange(QDateTime::fromMSecsSinceEpoch(maxTempPoints.at(0).x()), QDateTime::fromMSecsSinceEpoch(maxTempPoints.at(maxTempPoints.size() - 1).x()));
  147.     }
  148. }

四、 调用更新图表方法的两种方式。

1)定时器中执行，切记，只执行一次即可。

  1.     // 如果在更新温度数据处调用，则下列代码只执行一次。showTempChartView方法中的参数替换为全局变量中的对应三个值，这三个值会不断变化。
  2.     QTimer *updateChartViewTimer;
  3.     updateChartViewTimer = new QTimer(this);
  4.     connect(updateChartViewTimer, &QTimer::timeout,this,[=]() {
  5.             // 参数为模拟数据，根据实际替换成变量
  6.             showTempChartView(80 + rand() % 10, 30 + rand() % 10, 60 + rand() % 10);
  7.     });
  8.     // 每隔refreshTempChartTimeGap执行一次，也就实现定时刷新图表数据
  9.     updateChartViewTimer->start(refreshTempChartTimeGap);

**2）在温度数据改变时去执行，不需要定时器。 **

  1. // 实时更新温度的函数
  2. void onUpdateTemp(float maxTemp, float minTemp, float avg) {
  3.         // 更新显示温度的图表
  4.     if (QDateTime::currentMSecsSinceEpoch() - preUpdateTempChartTime >=     refreshTempChartTimeGap) {
  5.         preUpdateTempChartTime = QDateTime::currentMSecsSinceEpoch();
  6.         showTempChartView(maxTemp, minTemp, avg);
  7.     }
  8. }

两种调用方法各有优缺点。

使用第一种方法的优点：在第一次线填满整个图表后(图表中点达到最大值)，图表再刷新一次，线段整体立马会往左边移动，不会出现把线段压缩长度以便适配图表控件宽度的问题。 缺点：如果温度数据变化太慢(温度刷新比图表刷新更慢)，图表上新增的显示点温度数据可能是上一次的，即图表中的有些点(y值)可能是重复的。当然可以调整定时器时间间隔，达到最佳效果。

使用第二种方法的优点：也是避免第一种方法的缺点，即图标上每个点（y值）都是新的，因为调用是温度更新时才调用，保证了数据都是最新的。缺点：在图表刷新时间间隔(refreshTempChartTimeGap)大于温度数据更新时间间隔，而且显示的点数(showTempPointMaxCount )又设置比较大时，在第一次线填满整个图表后(图表中点达到最大值)，图表再刷新一次，线段整体不会立马往左边移动，会出现把线段压缩长度以便适配图表控件宽度的问题，当然数据在图表上显示是完全正确的。

总体来说使用第二种方法更合适，不用到定时器，定时器的时间也不用去考虑了。被动调用，数据准确。

**五、析构函数中，释放指针。 **

  1.     // 析构函数中，释放指针。 
  2.     // 删除图表相关指针
  3.     delete globalMaxTempSplineSeres;
  4.     delete globalMinTempSplineSeres;
  5.     delete globalAvgTempSplineSeres;
  6.     delete dateTimeAxisX;
  7.     delete valueAxisY;
  8.     delete chart;

2022.11.30更新初始化和显示图表的代码，增加析构函数删除指针代码，解决showTempChartView函数内存泄漏问题。

标签： ui qt 动画
本文转载自: https://blog.csdn.net/zzhceo/article/details/127690449
版权归原作者 Zafir2022 所有， 如有侵权，请联系我们删除。
登录后发布评论

“QChartView显示实时更新的温度曲线图，即动态曲线图。”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航
没有找到文章内容分段。。。