QT6.7+VS2022 QSplineSeries + QChart 实时曲线

目录

 一、概述

 二、具体实现

一、概述

曲线效果如下图所示：

 用到的对象如下：

	//坐标轴 时间轴 X
	dateTimeAxisX = new QDateTimeAxis();
	//坐标轴 水位轴 Y
	valueAxisY = new QValueAxis();
	//设置图表
	QChart* chart = new QChart();
	//设置曲线
	QSplineSeries* series = new  QSplineSeries();

用到的控件：widget、layout、chartView

	//Widget相关 画布
	QWidget* widget = ui.widget;

	//Widget相关 创建布局放在画布上
	QVBoxLayout* layout = new QVBoxLayout(widget);

	//显示图表
	QChartView* chartView = new QChartView(chart);

	//图表放在容器中
	layout->addWidget(chartView);

 二、具体实现

QtWidgetsApplication13.h文件

#pragma once

#include <QtWidgets/QMainWindow>
#include "ui_QtWidgetsApplication13.h"
#include <QWidget>
#include <QChartView>
#include <QSplineSeries>
#include <QScatterSeries> //后面可以添加散点
#include <QChart>
#include <QHBoxLayout>
#include <QDateTimeAxis>
#include <QDateTime>
#include <QValueAxis>
#include <QTimer>

class QtWidgetsApplication13 : public QMainWindow
{
    Q_OBJECT

public:
    QtWidgetsApplication13(QWidget *parent = nullptr);
    ~QtWidgetsApplication13();

    QTimer *timer = new QTimer(this);

    QDateTimeAxis* dateTimeAxisX = NULL; //X时间轴
    QValueAxis* valueAxisY = NULL;   //Y值轴

    QDateTime currentDateTime; //当前时间
    QDateTime datatimemax;     //周期后的时间

    QDateTime startDateTime_2;  //更新
    QDateTime endDateTime_2;
private:
    Ui::QtWidgetsApplication13Class ui;
};

QtWidgetsApplication13.cpp文件

#include "QtWidgetsApplication13.h"

const int showTempPointMaxCount = 20;

QtWidgetsApplication13::QtWidgetsApplication13(QWidget* parent)
	: QMainWindow(parent)
{
	ui.setupUi(this);
	//Widget相关 画布
	QWidget* widget = ui.widget;

	//Widget相关 创建布局放在画布上
	QVBoxLayout* layout = new QVBoxLayout(widget);

	//坐标轴 时间轴 X
	dateTimeAxisX = new QDateTimeAxis();
	dateTimeAxisX->setTitleText("时间/hh:mm:ss");
	dateTimeAxisX->setFormat("hh:mm:ss");
	dateTimeAxisX->setTickCount(20); //刻度数量，坐标轴精度

	//坐标轴 水位轴 Y
	valueAxisY = new QValueAxis();
	valueAxisY->setTitleText("水位/cm");
	valueAxisY->setLabelFormat("%.2f");
	valueAxisY->setTickCount(20);
	valueAxisY->setRange(0, 10); //Y轴范围

	//设置图表
	QChart* chart = new QChart();
	chart->addAxis(dateTimeAxisX, Qt::AlignBottom); //添加 x轴时间坐标
	chart->addAxis(valueAxisY, Qt::AlignLeft);  //添加 y轴时间坐标
	chart->setTitle("水位变化图");
	chart->legend()->hide();

	//设置曲线
	QSplineSeries* series = new  QSplineSeries();
	QPen seriesPen(QColor(0xFF0000));
	seriesPen.setWidthF(2);
	series->setPen(seriesPen); //将画笔应用到序列上

	//图表添加曲线
	chart->addSeries(series);

	//图表联系到坐标轴
	series->attachAxis(dateTimeAxisX);
	series->attachAxis(valueAxisY);

	//显示图表
	QChartView* chartView = new QChartView(chart);
	chartView->setRenderHint(QPainter::Antialiasing);

	//图表放在容器中
	layout->setContentsMargins(0, 0, 0, 0);
	layout->addWidget(chartView);

	//初始化X轴 时间坐标
	currentDateTime = QDateTime::currentDateTime();
	datatimemax = currentDateTime.addMSecs(showTempPointMaxCount * 1000);
	dateTimeAxisX->setRange(currentDateTime, datatimemax);

	//保存初始时间
	startDateTime_2 = currentDateTime; 
	endDateTime_2 = datatimemax;       
	
	//启动定时器
	timer->start(1000);

	connect(timer, &QTimer::timeout, this, [=]() {
		if (series->points().size() < showTempPointMaxCount)
		{
			QPointF maxTempPointF;
			maxTempPointF.setX(currentDateTime.toMSecsSinceEpoch());  //更新数据点的X坐标
			maxTempPointF.setY(rand()%10); //随机数
			series->append(maxTempPointF);

			currentDateTime = currentDateTime.addMSecs(1000); //更新X轴时间
		}
		
		//刷新数据的关键
		if (series->points().size() >= showTempPointMaxCount)
		{
			series->remove(0);
			QPointF maxpointf;
			maxpointf.setX(endDateTime_2.toMSecsSinceEpoch());  //更新数据点的X坐标
			maxpointf.setY(rand() % 10); //随机数
			series->append(maxpointf);

			startDateTime_2 = startDateTime_2.addMSecs(1000);   //X轴整体往后延一秒
			endDateTime_2 = endDateTime_2.addMSecs(1000);       
			dateTimeAxisX->setRange(startDateTime_2, endDateTime_2); //更新X轴时间范围
		}
		});
}

QtWidgetsApplication13::~QtWidgetsApplication13()
{
}