QChart绘制折线图

原创 于 2025-07-14 10:36:52 发布 · 272 阅读 · 9 ·
CC 4.0 BY-SA版权
1
文章标签：

#qt

QChart绘制折线图

1、前言

记录一下QChart绘制折线图点的实现方法，方便自己会顾，也可以给有需要的人提供帮助。

2、QChart绘制折线图实现步骤

2.1 在.pro文件中添加charts模块

QT       += core gui serialport serialbus charts

在这里插入图片描述

2.2 添加头文件

#include <QWidget>
#include <QtCharts>
#include <QPoint>
#include <QLineSeries>
#include <QValueAxis>
#include <QPoint>
#include <QChartView>

QT_CHARTS_USE_NAMESPACE

在这里插入图片描述

2.3 创建图表对象和相关组件

QChart *chart;               //图表对象
QValueAxis *axisX;          //x轴
QValueAxis *axisY;          //y轴
QLineSeries *series;         //折线图
QElapsedTimer  startTimer; // 记录图表开始时间

在这里插入图片描述

2.4 初始化图表对象和相关组件

//初始化
chart = new QChart();           // 创建图表对象
axisX = new QValueAxis();       // 创建X轴(时间轴)
axisY = new QValueAxis();       // 创建Y轴(流量轴)
series = new QLineSeries();     // 创建折线系列用于绘制数据

在这里插入图片描述

2.5 配置x轴和y轴

 // 配置X轴属性
 axisX->setTitleText("时间(s)");     // 设置X轴标题
 axisX->setLabelFormat("%d");        // 设置X轴标签格式为整数
 axisX->setRange(0,60);              // 设置X轴初始范围为0-60秒
 
 // 配置Y轴属性
 axisY->setTitleText("流量 (mL/min)"); // 设置Y轴标题
 axisY->setLabelFormat("%.1f");        // 设置Y轴标签格式为1位小数
 axisY->setRange(100, 600);           // 设置Y轴初始范围为100-600mL/min

2.6 将系列添加到图表

chart->addSeries(series);  // 将折线系列添加到图表容器

注：必须在添加坐标轴前将系列加入图表

2.7 将坐标轴添加到图表

chart->addAxis(axisX,Qt::AlignBottom); // X轴放置在底部
chart->addAxis(axisY,Qt::AlignLeft);   // Y轴放置在左侧

2.8 将系列附加到坐标轴

series->attachAxis(axisX);  // 关联X轴
series->attachAxis(axisY);  // 关联Y轴

2.9 配置图表属性

chart->setTitle("流量实时曲线");         // 设置图表标题
chart->setAnimationOptions(QChart::NoAnimation); // 禁用动画提高性能
chart->legend()->show();               // 显示图例

2.10 创建图表视图

QChartView *chartView = new QChartView(chart);
chartView->setRenderHint(QPainter::Antialiasing); // 启用抗锯齿

2.11 设置布局显示

QVBoxLayout *layout = new QVBoxLayout(this);  // 创建垂直布局管理器
layout->addWidget(chartView);                 // 将图表视图添加到布局中
this->setLayout(layout);                      // 将布局设置为当前widget的布局

2.12 添加数据点

//添加数据点
void graph::addDataPoint(float flowValue)
{
    //获取经过的时间（秒）
    double elapsedMinutes = startTimer.elapsed() / 1000.0;  // 计算从开始到现在经过的时间（秒）

    // 添加数据点
    series->append(elapsedMinutes, flowValue);  // 将当前时间和流量值作为新数据点添加到折线系列

    qDebug() << "添加数据点:" << flowValue << "mL/min";  // 输出调试信息，显示添加的流量数据

    //限制数据点数量（显示最近60秒数据）
    if(series->count() > 60)  // 如果数据点数量超过60个
    {
        series->removePoints(0, series->count() - 60);  // 移除最早的数据点，只保留最近60个点
    }

    // 自动调整X轴范围（显示最近60秒）
    double maxX = elapsedMinutes;  // 当前时间作为X轴最大值
    double minX = qMax(0.0, maxX - 60);  // X轴最小值为当前时间减去60秒，但不小于0
    axisX->setRange(minX, maxX);  // 更新X轴范围，实现图表的滚动效果

    // 自动调整Y轴范围
    double minY = 0;  // 初始化Y轴最小值
    double maxY = 0;  // 初始化Y轴最大值

    // 遍历所有可见数据点，找出最大值和最小值
    for(int i = 0; i < series->count(); i++)
    {
        QPointF point = series->at(i);  // 获取当前遍历的数据点
        if (point.x() >= minX) {       // 只处理当前X轴范围内（可见区域）的点
            if (point.y() < minY || minY == 0)  // 如果当前点的Y值小于已知最小值或最小值尚未设置
            {
                minY = point.y(); // 更新最小值
            }
            if (point.y() > maxY)  // 如果当前点的Y值大于已知最大值
            {
                maxY = point.y();  // 更新最大值
            }
        }
    }

    // 添加10%的边距，使图表显示更美观
    double margin = (maxY - minY) * 0.1;  // 计算边距为最大最小值差的10%
    if (margin == 0)  // 如果所有值相同（最大值等于最小值）
    {
        margin = maxY > 0 ? maxY * 0.1 : 10;  // 设置默认边距为最大值的10%或10
    }

    minY = qMax(0.0, minY - margin);  // 设置Y轴最小值，减去边距但不小于0
    maxY += margin;  // 设置Y轴最大值，加上边距

    axisY->setRange(minY, maxY);  // 更新Y轴范围，使所有数据点都能合适地显示
}

3、.h文件和.cpp文件

3.1 graph.h文件

#ifndef GRAPH_H
#define GRAPH_H

#include <QWidget>
#include <QtCharts>
#include <QPoint>
#include <QLineSeries>
#include <QValueAxis>
#include <QPoint>
#include <QChartView>

QT_CHARTS_USE_NAMESPACE

namespace Ui {
class graph;
}

class graph : public QWidget
{
    Q_OBJECT

public:
    explicit graph(QWidget *parent = nullptr);
    ~graph();

public slots:
    void addDataPoint(float flowValue);  // 添加数据点的槽函数

private:
    Ui::graph *ui;

    QChart *chart;               //图表对象
    QValueAxis *axisX;          //x轴
    QValueAxis *axisY;          //y轴
    QLineSeries *series;         //折线图
    QElapsedTimer  startTimer; // 记录图表开始时间

};
#endif // GRAPH_H

3.2 graph.cpp

#include "graph.h"
#include "ui_graph.h"

graph::graph(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::graph)
{
    ui->setupUi(this);

    //初始化
    chart = new QChart();           // 创建图表对象
    axisX = new QValueAxis();       // 创建X轴(时间轴)
    axisY = new QValueAxis();       // 创建Y轴(流量轴)
    series = new QLineSeries();     // 创建折线系列用于绘制数据


    // 配置X轴属性
    axisX->setTitleText("时间(s)");     // 设置X轴标题
    axisX->setLabelFormat("%d");        // 设置X轴标签格式为整数
    axisX->setRange(0,60);              // 设置X轴初始范围为0-60秒

    // 配置Y轴属性
    axisY->setTitleText("流量 (mL/min)"); // 设置Y轴标题
    axisY->setLabelFormat("%.1f");        // 设置Y轴标签格式为1位小数
    axisY->setRange(100, 600);           // 设置Y轴初始范围为100-600mL/min


    chart->addSeries(series);  // 将折线系列添加到图表

    // 将坐标轴添加到图表并设置位置
    chart->addAxis(axisX,Qt::AlignBottom); // X轴放置在底部
    chart->addAxis(axisY,Qt::AlignLeft);   // Y轴放置在左侧

    //将坐标轴添加到图表
    series->attachAxis(axisX);  // 关联X轴
    series->attachAxis(axisY);  // 关联Y轴

    //设置图表标题
    chart->setTitle("流量实时曲线");         // 设置图表标题
    chart->setAnimationOptions(QChart::NoAnimation); // 禁用动画提高性能
    chart->legend()->show();               // 显示图例

    //创建图表视图
    QChartView *chartView = new QChartView(chart);
    chartView->setRenderHint(QPainter::Antialiasing);        //抗锯齿

    //设置布局
    QVBoxLayout *layout = new QVBoxLayout(this);  // 创建垂直布局管理器
    layout->addWidget(chartView);                 // 将图表视图添加到布局中
    this->setLayout(layout);                      // 将布局设置为当前widget的布局


    //记录开始时间
    startTimer.start();

}

graph::~graph()
{
    delete ui;
}

//添加数据点
void graph::addDataPoint(float flowValue)
{
    //获取经过的时间（秒）
    double elapsedMinutes = startTimer.elapsed() / 1000.0;  // 计算从开始到现在经过的时间（秒）

    // 添加数据点
    series->append(elapsedMinutes, flowValue);  // 将当前时间和流量值作为新数据点添加到折线系列

    qDebug() << "添加数据点:" << flowValue << "mL/min";  // 输出调试信息，显示添加的流量数据

    //限制数据点数量（显示最近60秒数据）
    if(series->count() > 60)  // 如果数据点数量超过60个
    {
        series->removePoints(0, series->count() - 60);  // 移除最早的数据点，只保留最近60个点
    }

    // 自动调整X轴范围（显示最近60秒）
    double maxX = elapsedMinutes;  // 当前时间作为X轴最大值
    double minX = qMax(0.0, maxX - 60);  // X轴最小值为当前时间减去60秒，但不小于0
    axisX->setRange(minX, maxX);  // 更新X轴范围，实现图表的滚动效果

    // 自动调整Y轴范围
    double minY = 0;  // 初始化Y轴最小值
    double maxY = 0;  // 初始化Y轴最大值

    // 遍历所有可见数据点，找出最大值和最小值
    for(int i = 0; i < series->count(); i++)
    {
        QPointF point = series->at(i);  // 获取当前遍历的数据点
        if (point.x() >= minX) {       // 只处理当前X轴范围内（可见区域）的点
            if (point.y() < minY || minY == 0)  // 如果当前点的Y值小于已知最小值或最小值尚未设置
            {
                minY = point.y(); // 更新最小值
            }
            if (point.y() > maxY)  // 如果当前点的Y值大于已知最大值
            {
                maxY = point.y();  // 更新最大值
            }
        }
    }

    // 添加10%的边距，使图表显示更美观
    double margin = (maxY - minY) * 0.1;  // 计算边距为最大最小值差的10%
    if (margin == 0)  // 如果所有值相同（最大值等于最小值）
    {
        margin = maxY > 0 ? maxY * 0.1 : 10;  // 设置默认边距为最大值的10%或10
    }

    minY = qMax(0.0, minY - margin);  // 设置Y轴最小值，减去边距但不小于0
    maxY += margin;  // 设置Y轴最大值，加上边距

    axisY->setRange(minY, maxY);  // 更新Y轴范围，使所有数据点都能合适地显示
}

4、总结

以上就是QChart绘制折线图的整个过程了，浏览过程中，如若发现错误，欢迎大家指正，有问题的可以评论区留言或者私信。最后，如果大家觉得有所帮助的话，可以点个赞，谢谢大家！祝大家平安无疾，皆得所愿！
QT开发——Qchart实现的折线图
2303_78730505的博客
03-01 2175
这份用QChart制作的简易折线图能够实现：X轴左端不动与随动、三条数据的实时显示。
Qt折线图实现教程：QtCharts模块应用示例
最新发布
weixin_42584758的博客
06-21 556
Qt是一个使用C++语言编写的跨平台应用程序和用户界面框架。它由挪威的Trolltech公司开发，并于2008年被Nokia收购，后续由Qt公司维护。Qt框架的跨平台特性意味着，同样的代码可以在不同的操作系统上编译并运行，如Windows、Linux和MacOS等。Qt还支持包括但不限于iOS和Android在内的移动平台。Qt框架的核心部分是Qt的类库，它为开发人员提供了各种模块化的工具，包括但不限于图形界面、网络通信、数据库访问等。这些模块极大地丰富了Qt的应用场景，并提高了开发效率。
Qt-QChart实现折线图
weixin_36323170的博客
03-16 1020
动态查看数据变化，或者了解数据发展趋势，让数据可以形象直观展现出来，这里推荐使用折线图的方式展现，本文抛砖引玉，简单实现一个实例，效果图如下：（1）、这里用来绘制图表，引入QT中的charts组件；首先要确保安装了组件QT Charts;在pro文件中添加如下代码 （2）、这里主要用的类为QChart为图表绘制画布; QChartView为图表绘制相框，其位于QChart之上；QDateTimeAxis为时间坐标轴；QValueAxis为数值坐标轴；QLineSeries为折线数据线；widget.h
QtChart绘制折线图
12-10
QtChart绘制折线图
Qt（十三）QChart绘制折线图
热门推荐
红叶谷 wsp_1138886114的博客
04-05 2万+
文章目录一、简单绘图二、绘制折线图 一、简单绘图 Qt Charts基于Qt的Graphics View架构，其核心组件是QChartView 和 QChart QChartView是显示图标的视图，基类为QGraphicsView QChart的基类是QGraphicsltem 类的继承关系： 创建项目：.pro文件中添加：QT += charts 代码如下：其他文件未修改，修改代码只在mainwindow.cpp文件中进行。 mainwindow.cpp #include "mainwindow.
QT中使用图表之QChart绘制折线图
sc_o_r_pio的博客
10-29 1913
需要注意的是同一个轴只能添加进图表一次，再次添加则不会生效，这个轴的位置可以在左边也可以在底部也可以在右边.......我们还可以控制点是否显示，以及点的文本，Qt6.2之后还可以单独设定每个点的样式。8、创建折线系列，设置系列的各种属性，给系列添加点，然后把系列添加到图表中。其中有很多属性可以设置，上面设置了一些常用的，还有其他属性可查手册 ，6、创建X轴，设置轴的各种属性，然后将轴添加到图表的底部。7、创建Y轴，设置轴的各种属性，然后将轴添加到图表的左边。9、关联系列和xy轴，使系列显示的位置正确。
QT QChart绘制折线图应用程序示例
02-05
实例samp9_2以绘制折线图为例，详细介绍图表各个部分的设置和操作，包括图表的标题、 图例、边距等属性设置，QLineSeries序列的属性设置，QValueAxis坐标轴的属性设置，以及图表的缩放。 实例samp9_2是一个主窗口...
Qchart绘制折线图
06-02
以下是一个使用QChart绘制折线图的示例代码： ```cpp #include #include #include using namespace QtCharts; // 创建折线图数据 QLineSeries *createLineSeries() { QLineSeries *series = new QLineSeries...
基于Qt/QChart实现折线图和散点图的绘制示例程序解析
专注于 Qt/C++ 应用开发和机器视觉领域的开源项目分享。期待与您共同进步！
10-09 964
本文讲解的是一个基于**Qt**框架的**QChart**模块实现的折线图与散点图结合的绘制程序。程序通过自定义类`LineChartWithGradient`实现折线图、散点图以及带有渐变填充的区域图，最终形成一个美观的数据可视化效果。
QT QChart绘制折线图应用程序操作详解
标题“QT QChart绘制折线图应用程序示例”涉及了使用Qt框架中QChart类来创建折线图的程序设计。Qt是一个跨平台的C++应用程序框架，广泛应用于开发GUI程序。其中，QChart是Qt Charts模块中的一个类，用于创建、展示...
QChart折线图结合散点图刷新
01-28
Qt5.8 使用自带的QChart实现改变折线图和散点图X轴及图样式效果，这个积分是系统自己定的，不值这么多，有需要的可以私信（资源名+邮箱）
QChart折线图，添加标示线
01-20
动态随机生成折线图QLinseries，关键点用散点标记QScatterSeries，并在折线图中添加标示线，标示线通过继承QChartView，写mouseEvent实现。 debug的跑不了，可是试试release的。
QT QChart QScatterSeries 空心折线图
09-18
画一个折线图，关键点使用空心的圆点标识出来，鼠标移动到关键点上，显示出当前数值；鼠标移走数值消失。https://blog.youkuaiyun.com/xiezhongyuan07/article/details/82760103
qchart折现图_Qt开发技术：QCharts（二）QCharts折线图介绍、Demo以及代码详解
weixin_39849387的博客
12-19 280
前言红胖子，来也！介绍了整体框架，开始动手码代码，按照顺序，从折线图开始。补充QCharts所有的图表都依赖《Qt开发技术：QCharts(一)QCharts基本介绍以及图表框架详解》中的QChart、QChartView、QLegend、QValueAxis。DemoDemo下载地址折线图概述QLineSeries类以折线图的形式显示数据。折线图用于将信息显示为由直线连接的一系列数据点。QLin...
QT中常用QCharts之折线图
m0_60815231的博客
05-23 4738
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 前言 QT作为一个使用C++的平台，在很多时候项目中可能需要可视化界面的显示，日后会继续更新，今天就先给大家用QLineSeries,QChart和QChartView三个基本的类为大家写一个最简单的折线图， 一、为什么要使用QCharts 因为QT自带的。下面就说下怎样能画出这个图。 二、使用步骤 1.首先在ui界面上随便拉一个容器过来，把它提升为一个类。如下 这里提升的类的名字叫xianxigntu,这个类的名字可以自己随便定义.
qchart折现图_Qt Charts 动态实时折线图绘制
weixin_35987446的博客
01-12 2173
在Qt Charts发布之前，Qt比较著名两个画图插件是 qwt和Qcustom， 其中Qcustom较轻量，只需要在project 中包含qcustomplot.h 和qcustomplot.cpp 几乎就可以使用。相比Qcustom，qwt功能更为强大，但是它的安装十分麻烦，阻挡了很多人(包括我)的使用。但是qwt只是对静态图表的表示非常不错，动态曲线性能并不突出。如果只是静态绘图，或者动...
QT基础 QChart绘制折线
路奇的博客
10-11 1242
本质逻辑上与上面差不多，但是如果要放大/缩小等操作，需要重写一下QChartView函数，如果是触摸的需要重写QChart的bool sceneEvent(QEvent *event);
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值