QtChart——简单的动态波形图

转载 2018年04月17日 08:27:44

https://blog.csdn.net/q294971352/article/details/78558987

众所周知Qt 5.7过后Qt添加了官方的Chart库,终于可以用官方的库替代QWT和QCustomerPlot。本文只是简单的融合了几个Qt官方例子。程序运行图如下: 

这里写图片描述

功能点

其实大家来看博客,就是来看有啥功能,能ctrl + C加ctrl + V到自己项目里的,至于原理,有兴趣的同学可以自己去看看Qt源码,所以这里就主要讲一下本例有什么功能:

  1. 数据动态更新。例子里是定时器,定时更新一个正弦波。
  2. 放大缩小。通过鼠标滚轮实现图像放大缩小功能。
  3. 比例复原。当你不小心把图像弄丢了,没关系,点击一下鼠标右键就行了。
  4. 坐标显示。鼠标悬停到数据线条上就会显示,XY坐标的值。
  5. 图像拖拽。不能拖拽那有啥意思?

接下来就简单讲解一下每个功能点的简单实现,基础知识我就不讲了,因为我也不知道,写代码就是一个搬运的过程。

数据动态更新

说道数据动态更新,但凡用过QWT和QCustomerPlot的同学都知道,这样做:

QVector<QPointF> data;

if (data.size() > max) {
    data.pop_back();
    data.push_front(point);
} else {
    data.push_front(point);
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

每次只需要把最后的数据弹出去,然后添加新的数据就OK了,但是QChart这个地方有点意思,到替换原来数据的时候,前面数据和后面数据就连一起了,一条好好的正弦波多了一条线,肯定不爽啊。然后就看了Qt的Example,在audio那,就是音频数据采集那,但凡做过AD数据采集的同学应该都懂,然后我当然就把那的代码化为己有了:

void MainWidget::updateData()
{
    int i;
    QVector<QPointF> oldData = series->pointsVector();
    QVector<QPointF> data;

    if (oldData.size() < 97) {
        data = series->pointsVector();
    } else {
        /* 添加之前老的数据到新的vector中,不复制最前的数据,即每次替换前面的数据
         * 由于这里每次只添加1个数据,所以为1,使用时根据实际情况修改
         */
        for (i = 1; i < oldData.size(); ++i) {
            data.append(QPointF(i - 1 , oldData.at(i).y()));
        }
    }

    qint64 size = data.size();
    /* 这里表示插入新的数据,因为每次只插入1个,这里为i < 1,
     * 但为了后面方便插入多个数据,先这样写
     */
    for(i = 0; i < 1; ++i){
        data.append(QPointF(i + size, 10 * sin(M_PI * count * 4 / 180)));
    }

    series->replace(data);

    count++;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29

清楚明了,每次都需要copy一次数据,不过这种方法效率不知道怎么样,普通的采集还好,我之前公司的项目,收数据是按us级来搞的,所以之前用QCustomerPlot效果也不太好,一次replot()就是3个ms(毕竟QCustomerPlot的底层也是copy了一次数据= =!),那我得漏多少条数据。。。

放大缩小

这个就比较好搞,一个鼠标滚轮事件:

void MainWidget::wheelEvent(QWheelEvent *event)
{
    if (event->delta() > 0) {
        chart->zoom(1.1);
    } else {
        chart->zoom(10.0/11);
    }

    QWidget::wheelEvent(event);
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

比例自己定,这里我的是比例是10%。

比例复原

其实就调用了一个zoomReset()函数:

void ChartView::mousePressEvent(QMouseEvent *event)
{
    if (event->button() & Qt::LeftButton) {
        isClicking = true;
    } else if (event->button() & Qt::RightButton) {
        chart()->zoomReset();
    }

    QChartView::mousePressEvent(event);
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

坐标显示

改自官方Example的Callout,其实我就改了一下命名,因为有代码洁癖,不习惯匈牙利命名法,C++喜欢用驼峰,C语言还是K&C,然后内容没改,但愿不会被查水表,具体代码就不贴了,下面发整个工程的代码链接。

图像拖拽

就是一个mousePressEvent和mouseMoveEvent事件,鼠标按下了把标志位变为true,然后在鼠标Move的时候检测标志位是否为true,如果是就根据坐标计算scroll值:

void ChartView::mouseMoveEvent(QMouseEvent *event)
{
    int x, y;

    if (isClicking) {
        if (xOld == 0 && yOld == 0) {

        } else {
            x = event->x() - xOld;
            y = event->y() - yOld;
            chart()->scroll(-x, y);
        }

        xOld = event->x();
        yOld = event->y();

        return;
    }

    QChartView::mouseMoveEvent(event);
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

代码链接: 
https://github.com/DragonPang/QtChart

关于GraphicsView和GraphcisScene以及QChart的使用心得

本人菜鸟一枚,将在csdn博客记录我的编程之路,把自己所学,所掌握的及时分享给大家,也把自己的困惑,不解的东西同大家一起交流。好,开始正题:关于qtcharts最基础的东西,大家可以看一些基础的东西,...
  • Aprildeer
  • Aprildeer
  • 2018-04-04 21:59:59
  • 9

Qt Charts发布

在Windows下使用Qt自带的windeployqt.exe工具发布应用时,发现应用可以运行,但是什么东西都没显示。 原因是使用了Qt Charts,而windeployqt.exe没有给我们添加q...
  • k331922164
  • k331922164
  • 2017-05-27 16:29:55
  • 627

Qt QChart,利用QChart绘制动态曲线

这是一个简单的demo,在更新数据的时候我采用了官方中audio这个example的方式。 效果图 程序 -----------------------------------------...
  • HiccupHiccup
  • HiccupHiccup
  • 2017-07-11 20:18:27
  • 6231

配置速率调整

• 速率调整简介 • 创建并实施速率等级 • 配置速率等级设置 • 管理速率等级 速率调整简介 BIG-IP®本地流量管理(LTM)系统具有称为速率调整的特性。速率调 整使您能够对入站流量...
  • xo_zhang
  • xo_zhang
  • 2013-05-07 09:32:40
  • 552

delphi控件使用

Standard页 1-      Tlistbox控件 重要属性items.* 举例,界面设计如下左,执行结果如下右:      代码为 procedure TForm1.Button...
  • jsrgren
  • jsrgren
  • 2011-10-27 11:07:54
  • 7095

QtCharts动态的显示折线图

本本提供一个可以动态绘制折线图的接口Graph,该接口只提供了每次加入一个点的方法,其他方法可以在此基础上添加。绘制曲线图等类似。 QT版本:QT5.7或以上 QT5.5或5.6可以按照如下方法部署Q...
  • tianya_team
  • tianya_team
  • 2017-09-12 11:20:20
  • 922

QtCharts_动态图QSplineSeries 显示实时动态曲线

在 实时动态曲线 一节介绍了使用算法实现实时动态曲线,Qt 提供了 charts 模块,使用 QSplineSeries 就能很轻松的实现平滑曲线了,而且效果很好,但是需要注意一点的是,免费版的 ...
  • lmhuanying1012
  • lmhuanying1012
  • 2017-11-06 10:19:47
  • 415

QT之 QChart 显示实时动态曲线(模拟数据采集过程)

Qt 5.7 后提供了 charts 模块,使用 QSplineSeries 就能很轻松的实现平滑曲线了,而且效果很好,但是需要注意一点的是,免费版的 Qt 中 charts 模块是 GPL 协议的。...
  • ZuoYueXian
  • ZuoYueXian
  • 2017-07-12 09:13:35
  • 6098

使用队列实时显示波形图实现

使用队列实现动态波形实时显示
  • himilong
  • himilong
  • 2015-07-06 19:59:38
  • 1210

加强版Qcharts曲线支持散点图

  • 2017年11月01日 11:16
  • 6KB
  • 下载
收藏助手
不良信息举报
您举报文章:QtChart——简单的动态波形图
举报原因:
原因补充:

(最多只允许输入30个字)