Qt - QTChart绘制图表

最新推荐文章于 2024-07-30 15:17:32 发布
最新推荐文章于 2024-07-30 15:17:32 发布
阅读量1.6w 收藏 304
点赞数 43
分类专栏： Qt 文章标签： QChart 动态列表 时间轴 卡顿
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40774605/article/details/108419887
版权

文章目录

前言

这是一段做作的前言，摘自网络。
在Qt5.7之前，Qt Charts 一直是商业版才有，所以在此之前的Qt开发人员若想绘制图表需采用第三方库，常见的是Qt Charts是Qt提供的图表模块，在Qt5.7之前只有商业版才有，但是从Qt5.7之后，社区版本也包含了Qt Charts。Qt Charts可以很方便的绘制常见的折线图、柱状图、饼图等图表。它基于Qt的Graphics View架构，核心组件是QChartView和QChart。其中QChartView正是继承于QGraphicsView类，因此它也可以作为Graphics View中的视图组件。另一个QChart则由QGraphicsWidget继承而来，继续向上追溯，发现他们都继承于QGraphicsItem，所以QChart是图形项。

准备工作

安装QChart组件

Qt 安装时，默认情况下不安装 QCharts组件 ，所以如果需要使用 QCharts组件 ，我们需要先更新一下 Qt组件。

首先在我们的 Qt安装路径 下找到 MaintenanceTool。

在这里插入图片描述
若在下一步出现 “要继续此操作，至少需要一个有效且已启用的储存库。”；则需要在设置中设置存储库。

Qt 存储库（戳我）
在这里插入图片描述
ps：我采用的是清华镜像，只需点击HTTP 进入镜像地址并移动至图示目录下，复制如上图所示的 HTTP地址（点击此处偷懒） 作为存储库，随后添加：

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

项目配置

.pro文件中添加

QT    += charts

.h文件中添加

QT_CHARTS_USE_NAMESPACE

QCharts必须的头文件

#include <QChartView>
#include <QChart>

主要组成部分

Qt Charts 模块是一组易于使用的图标组件，基于 Qt 的 GrapHics View 架构，核心是 QChartView 和 QChart。

QChartView

QChartView 是 QChart 的视图组件，用于显示。在 QtCreator 中使用 QChartView 可以放置一个 QWidget，然后升级为 QChartView。

QChartView 的内容很少，建议直接过一遍文档 QChartView

QChartView继承关系如下：
QWidget
QFrame
QGraphicsObject
QGraphicsView
QChartView

QChart

QChart 管理不同类型的序列和其他与图表相关的对象，例如坐标轴及图例。

QChart 继承关系如下：
QObject
QGraphicsObject
QGraphicsItem
QGraphicsWidget
QGraphicsItem
QChart

序列

常见的序列如下：

  • QBarSeries （柱状图）

  • QHorizontalBarSeries （水平柱状图）

  • QHorizontalPercentBarSeries （水平百分比柱状图）

  • QHorizontalStackedBarSeries （水平层叠图）

  • QPercentBarSeries 百分比柱状图）QStackedBarSeries （层叠图/堆叠的条形图）

  • QAreaSeries （面积图）

  • QBoxPlotSeries （形图/盒须图）

  • QPieSeries （饼图）

  • QXYSeries （线性图、曲线图、散点图的基类）

  • QLineSeries （折线图）

  • QSplineSeries （曲线图）

  • QScatterSeries （散点图）

序列继承关系如下：
QAbstractSeries
QBoxPlotSeries
QAreaSeries
QAbstractBarSeries
QCandlestickSeries
QPieSeries
QXYSeries
QBarSeries
QHorizontalBarSeries
QHorizontalPercentBarSeries
QHorizontalStackedBarSeries
QPercentBarSeries
QStackedBarSeries
QLineSeries
QScatterSeries
QSplineSeries

本文仅介绍最常用的 QLineSeries。

坐标轴

坐标轴封装了刻度，标签，网格线，标题等属性。

坐标轴有以下几种：

  • QBarCategoryAxis
    类别坐标轴，用字符串作为坐标轴的可读，用于图表的非数值坐标轴
  • QDateTimeAxis
    时间坐标轴，用作时间数据的坐标轴
  • QLogValueAxis
    对数数值坐标轴，作为数值类数据的对数坐标轴
  • QValueAxis
    数值坐标轴，用作数值型数据的坐标轴
  • QCategoryAxis
    分组数值坐标轴，可以为数值范围设置标签

坐标轴继承关系如下：
AbstractAxis
QBarCategoryAxis
QDateTimeAxis
QLogValueAxis
QValueAxis
QCategoryAxis

图例

图例是对图表上序列的补充说明。我们可以设置序列颜色及其文字说明、并控制序列显示的位置。

此外，图例中还有一个 QLegendMarker 类，可为每个序列的图例生成一个类似QChrckedBox 的组件；单击序列的标记，可以控制序列是否显示。

下面是官方例程 chartthemes 的运行效果。

在这里插入图片描述
上述内容，建议通过官方例程配合类文档学习。

静态图表

在这里插入图片描述

源代码

    chart = new QChart();

    mAxY = new QValueAxis();
    mAxX = new QValueAxis();
    mLineSeries = new QLineSeries();

    //y轴范围
    mAxY->setRange(0, 10);
    // Y轴分等份
    mAxY->setTickCount(11);
    mAxX->setRange(0,10);
    mAxX->setTickCount(11);

    // 将系列添加到图表
    chart->addSeries(mLineSeries);
    chart->setTheme(QtCharts::QChart::ChartThemeBrownSand);

    mAxX->setTitleText(QString(tr("ImageNumber")));
    mAxY->setTitleText(QString(tr("ReadRate(%)")));
    chart->addAxis(mAxY, Qt::AlignLeft);
    chart->addAxis(mAxX, Qt::AlignBottom);

    mLineSeries->attachAxis(mAxY);
    mLineSeries->attachAxis(mAxX);

    //隐藏背景
    chart->setBackgroundVisible(false);
    //设置外边界全部为0
    chart->setContentsMargins(0, 0, 0, 0);
    //设置内边界全部为0
    chart->setMargins(QMargins(0, 0, 0, 0));
    //设置背景区域无圆角
    chart->setBackgroundRoundness(0);

    //突出曲线上的点
    mLineSeries->setPointsVisible(true);

    //图例
    QLegend *mlegend = chart->legend();
    mLineSeries->setName("testname");
    mLineSeries->setColor(QColor(255,0,0));
    //在底部显示
    mlegend->setAlignment(Qt::AlignBottom);
    mlegend->show();

    // 将图表绑定到视图 wiget 为 QChartView
    ui->widget->setChart(chart);

    for(int i = 0 ;i < 10;i++){
        mLineSeries->append(i+1, i);
    }

动态图表

场景一

显示最近的 n 个数据。

思路

对于数值坐标轴，我们仅需要在加入数据时判断数据点是否超过 x轴 最大值。
若超过则取得旧的pointslist，并将其所有点的 x轴 数值 -1 ，再加入新点。

效果

在这里插入图片描述

核心实现

    QList<QPointF> oldPoints = mLineSeries->points();
    int pointCount =oldPoints.size();

    if(pointCount > mAxX->max()){

        QList<QPointF> newPoints;

        for(int i = 0; i < pointCount; i++){

            QPointF point;
            point.setX(oldPoints.at(i).x()-1);
            point.setY(oldPoints.at(i).y());

            newPoints.append(point);
        }
        qsrand(QTime(0,0,0).secsTo(QTime::currentTime()));
        QPointF point;
        point.setX(oldPoints.at(pointCount -1).x());
        point.setY(qrand()%10);
        newPoints.append(point);
        mLineSeries->clear();
        mLineSeries->append(newPoints);
        mLineSeries->setPointsVisible(true);
    }
    else{
        qsrand(QTime(0,0,0).secsTo(QTime::currentTime()));
        QPointF point;
        point.setX(oldPoints.at(pointCount -1).x() +1);
        point.setY(qrand()%10);
        mLineSeries->append(point);
    }

场景二

显示最近一段时间的数据。

思路

这里需要增加两个概念

  • 定时间隔 TimerBreaks
  • 最大采样数 MaxSize

首次添加时设置时间轴，每次添加数据点都先判断当前数据点是否超过最大采样数，若超过则删除线中第一个点，再添加数据。

效果

在这里插入图片描述

核心实现

// 最大采样数
const int MaxSize = 100;
// 定时时间间隔-ms
const int TimerBreaks = 10;

void MainWindow::slot_timeout()
{
    static int cnt = 0;
    static QDateTime BeginTime, EndTime;

    if (cnt == 0)
    {
        BeginTime = QDateTime::currentDateTime();
        EndTime = BeginTime.addMSecs(MaxSize*(TimerBreaks + 1));
        mAxDateX->setMin(BeginTime);
        mAxDateX->setMax(EndTime);
    }

    qint64 x1 = QDateTime::currentMSecsSinceEpoch();

    qsrand(QTime(0,0,0).secsTo(QTime::currentTime()));
    qreal y =qrand()%10;

    cnt = cnt > (MaxSize - 1) ? 1 : (++cnt);

    if (mLineSeries->count() > (MaxSize-1))
    {
        //删除第一个元素
        mLineSeries->removePoints(0, 1);
        EndTime = QDateTime::currentDateTime();
        BeginTime = EndTime.addMSecs((qint64)MaxSize*(-1)*TimerBreaks);

        mAxDateX->setMin(BeginTime);
        mAxDateX->setMax(EndTime);
    }
    
    mLineSeries->append(x1, y);

}

交互

获取曲线在鼠标位置坐标

在 QXYSeries 中可以发现该信号：

  • void clicked(const QPointF &point)
    鼠标点击序列时，触发该信号

  • void hovered(const QPointF &point, bool state)
    鼠标在序列上时触发该信号

有了这两个信号，就可以很容易的实现以下功能：

在这里插入图片描述
以上效果来自 Qt 官方例程 - Callout，核心是通过这两个信号实现控件的动态创建、隐藏和显示。

图例控制序列隐藏/显示

可参考官方例程 legendmarkers。

在这里插入图片描述
以下为摘录核心：


const auto markers = m_chart->legend()->markers();
for (QLegendMarker *marker : markers) {
// Disconnect possible existing connection to avoid multiple connections
 QObject::disconnect(marker, &QLegendMarker::clicked, this ,&MainWidget::handleMarkerClicked);
QObject::connect(marker, &QLegendMarker::clicked, this, &MainWidget::handleMarkerClicked);

//点击事件
void MainWidget::handleMarkerClicked()
{
    QLegendMarker* marker = qobject_cast<QLegendMarker*> (sender());
    //断言
    Q_ASSERT(marker);
    switch (marker->type())
    {
        case QLegendMarker::LegendMarkerTypeXY:
        {
        //控序列隐藏/显示
        // Toggle visibility of series
        marker->series()->setVisible(!marker->series()->isVisible());

        // Turn legend marker back to visible, since hiding series also hides the marker
        // and we don't want it to happen now.
        marker->setVisible(true);
        
        //修改图例
        // Dim the marker, if series is not visible
        qreal alpha = 1.0;

        if (!marker->series()->isVisible())
            alpha = 0.5;

        QColor color;
        QBrush brush = marker->labelBrush();
        color = brush.color();
        color.setAlphaF(alpha);
        brush.setColor(color);
        marker->setLabelBrush(brush);

        brush = marker->brush();
        color = brush.color();
        color.setAlphaF(alpha);
        brush.setColor(color);
        marker->setBrush(brush);

        QPen pen = marker->pen();
        color = pen.color();
        color.setAlphaF(alpha);
        pen.setColor(color);
        marker->setPen(pen);
        break;
        }
    default:
        {
        qDebug() << "Unknown marker type";
        break;
        }
    }
}

卡顿问题

在使用图表时，经常会遇到卡顿的问题。

目前总结的解决卡顿的方法主要有：

  • 去掉动画、样式、标签形状等
m_chart->setAnimationOptions(QChart::NoAnimation);
  • 开启 OPenGL 加速
line->setUseOpenGL();

值得注意的是：

在这里插入图片描述

  • QAreaSeries 面积和散点图无法使用。
  • 加速系列不支持系列动画。
  • 加速序列不支持点标签。
  • 对于加速系列，笔样式和标记形状被忽略。仅支持实线和普通散点。散点可以是圆形或矩形，这取决于底层图形硬件和驱动程序。
  • 极坐标图不支持加速序列。
  • 避免短时间内逐点添加，大数据刷新采用 append（const QList<QPointF> &points）
 line->append(newPoints);

参考鸣谢

Qt Charts Examples

QChart时间坐标轴实时更新数据

JYU_hsy
关注
  • 43
    点赞
  • 踩
  • 304
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
QT基础 - 常见图表绘制
一然明月(嵌入式)的博客
06-21 740
Qt Charts 是 Qt 框架的一个模块，用于创建各种类型的图表和数据可视化。它为开发者提供了一套功能强大的工具，使他们能够轻松地在他们的 Qt 应用程序中集成各种图表，如折线图、柱状图、饼图、散点图等，从而有效地展示和分析数据。丰富的图表类型：Qt Charts 支持多种常见的图表类型，包括折线图、柱状图、饼图、区域图、散点图、极坐标图等，满足了不同数据可视化需求。交互性和动画效果。
Qt（QChart）图表绘制
m0_64596200的博客
12-28 828
QXYSeries类是折线图、样条曲线图、散点图的基类，QSplineSeries、QLineSeries、QScatterSeries都参照该类使用。图标字体颜色，横纵轴的修改，数据的选择，主题的变换，放大缩小等等。通过QLineSeries类以折线图的形式显示数据。折线图用于将信息显示为由直线连接的一系列数据点。
STM32串口-＞QT Chart图表
QQ_1745208172的博客
03-12 394
使用append接口添加。当需要显示多条曲线时，采用列表进行管理，分别对曲线添加数据。从 index 指定的位置开始，删除曲线中 count 指定的点数。2、字符串转QJsonObject得到键值。如需发送多个键值对，中间用逗号隔开。4、图表更新（曲线随横坐标移动）1、串口发送Json格式字符串。
PyQt5 QtChart-图表
SongYuLong
12-02 1292
Charts是Qt的一个二维图表模块，可以绘制各种常见的二维图表，如:折线图、柱状图、饼图、散点图、极坐标图等，功能比较全面，绘制的图形效果也比较美观，是用于数据二维可视化的有力工具。PyQtChart是Qt Charts模块的Python绑定，它需要单独安装。
QT图表chart-饼状图
博咯的博客
11-16 6326
QT图表-饼状图前言一、使用步骤首先在项目文件中加入：其次在头文件添加：widget控件二、程序总结 前言 图表功能是QT做数据可视化屏幕的基础，这里我用的是QT再带的chart类来实现图表。 饼状图实现效果如下： 详细见官网https://doc.qt.io/qt-5.15/qtcharts-index.html 一、使用步骤 首先在项目文件中加入： QT += charts 其次在头文件添加： #include <QtCharts> using namespace QtCha
【Qt-24】基于QCharts绘制曲线图
WXG1011的博客
11-15 4427
QCharts绘制曲线
Qt之图表Chart绘制
雨田哥的博客
10-11 7935
Qt之图表Chart绘制 文章目录Qt之图表Chart绘制功能效果图工程文件结尾 功能 读写CSV文件，加载数据和导出数据 （参考链接：多多指教） 2.支持同时加载多个图表数据 3.支持可拉伸图表比例 4.支持鼠标悬浮指定刻度位置，显示坐标信息 5.支持清屏 6.支持显示峰值坐标 效果图 工程文件 Qt交流大会 853086607 免费群中 结尾 不定期上传新作品，解答群中作品...
Qt6导入QtChart绘制图表(添加组件)
最新发布
Nuaa0719301zyx的博客
07-30 229
我在按照大佬们的说明添加QtChart时发现，我的电脑上并不能正确的添加QtChart并编译通过，所以在综合了两位大佬的说明又自己探索了一番后，正确编译通过，分享出来，以便同志们节省一些时间。
Qt----绘图与图表
lengyuefeng212的博客
08-20 4746
文章目录绘图与图表一、QPainter绘图1. 应用实例2. 程序运行效果二、QChar图表1. 应用实例2. 程序运行效果 绘图与图表 绘图与图表在嵌入式里有的比较多，尤其是图表，我们常在股票里看到的“图表折线/曲线图/饼状图等”都可以用 Qt 的图表来实现。绘图和图表的内容本章主要介绍绘图和图表的基本操作，以简单的例子呈现绘图与图表的用法，目的就是快速入门绘图与图表，关于绘图与图表 详解最好是看 Qt 官方的帮助文档。 一、QPainter绘图 Qt 里的所有绘图，比如一个按钮和一个 Label 的显示
qt-4.2-class-chart.rar_QT4.2-class-chart_class_qt pdf
09-14
总之，"qt 4.2-class-chart.pdf"这个文档是Qt 4.2版本开发者不可或缺的学习资源，它通过图表形式揭示了Qt库的组织结构，使得开发者能够更好地理解和利用这个强大的工具。通过深入研究这个类图，你可以掌握Qt的内在...
基于qt5.14.2版本Qchart绘制图表
12-01
QChart是Qt Charts库的一部分，它允许开发者创建各种图表，如线图、柱状图、饼图、散点图等，以直观地展示数据。在Qt5.14.2这个版本中，QChart已经相当成熟，支持多种定制选项，包括颜色、样式、数据绑定、交互性等...
QT-Qchart绘制实时动态曲线
10-22
QT Qchart库是Qt框架中用于创建复杂图表的模块，特别适合用于绘制各种统计和工程图形，如折线图、柱状图、饼图等。在"QT-Qchart绘制实时动态曲线"的主题下，我们将深入探讨如何利用QChart库来实现时间轴为基础的动态...
Qt4.8.4和Echarts5.3.3绘制图表例子
09-17
Qt4.8.4和Echarts5.3.3绘制图表例子。 ECharts，商业级数据图表，它是一个纯JavaScript的图标库，常用的图表形式，如折线图、柱状图，饼状图、雷达图等，都可绘制，而且效果好看。这是做Web前端的，经常会用到的工具...
QT-Charts使用
09-13
QT-Charts是Qt库中的一个模块，专门用于创建各种数据可视化图表。Qt是一个跨平台的C++应用程序开发框架，广泛应用于桌面、移动和嵌入式系统。QT-Charts的使用可以让你在Qt应用中轻松地展示复杂的数据，包括但不限于...
Qt - 一文理解QThread多线程（万字剖析整理）
热门推荐
Hsy的博客
10-26 1万+
本文关键字：QThread，多线程，正确使用方法，EvenLoop，源码分析，moveToThread，connect，正确退出线程，线程间通讯，线程同步，锁，可重入，线程安全...本文主要介绍了QThread的一些机制及非常多注意点，基本涵盖了线程使用的大部分场景，万字长文，耗时不少。特别感谢参考文章的博主，在学习的工程中它们的文章让我少走了很多弯路。代码是手撸的，可能存在错误，若发现还望留言指出。
QT - Linux下动态库&静态库的创建及使用指南
Hsy的博客
04-25 7837
本文介绍了Linux下Qt、动态库、静态链接库的创建以及使用的两种方法（显示链接及隐式链接），分享了在使用显示链接中遇到的坑及解决办法，希望能帮到大家。
QT 动态绘制 chart 类实现
06-03
你可以使用 Qt 自带的图表库 QChart 来实现动态绘制 chart。具体步骤如下： 1. 创建 QChart 对象 ```c++ QChart *chart = new QChart(); ``` 2. 设置 chart 的标题和标签 ```c++ chart->setTitle("Chart Title"); chart->setAxisX(new QValueAxis(), chart->series().at(0)); // 设置 X 轴，这里使用 QValueAxis chart->setAxisY(new QValueAxis(), chart->series().at(0)); // 设置 Y 轴，同样使用 QValueAxis ``` 3. 创建 QLineSeries 对象并添加到 chart 中 ```c++ QLineSeries *series = new QLineSeries(); chart->addSeries(series); ``` 4. 添加数据点 ```c++ series->append(x, y); // x 和 y 分别表示数据点的横坐标和纵坐标 ``` 5. 更新 chart 显示 ```c++ chartView->setChart(chart); // chartView 是一个 QChartView 对象，用于显示 chart ``` 6. 实现动态绘制 通过定时器 QTimer，定时更新数据并更新 chart 显示即可。 ```c++ QTimer *timer = new QTimer(this); connect(timer, SIGNAL(timeout()), this, SLOT(updateChart())); timer->start(1000); // 每秒钟更新一次 ``` 在 updateChart() 中更新数据并更新 chart 显示即可。 ```c++ void updateChart() { series->append(x, y); chartView->setChart(chart); } ``` 以上是一个简单的动态绘制 chart 的实现方式，你可以根据自己的需求进行修改。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值