精华内容
下载资源
问答
  • Qt Charts 动态实时折线图绘制 万次阅读 多人点赞
    2017-10-17 14:28:49

    在Qt Charts发布之前, Qt比较著名两个画图插件是 qwt和Qcustom, 其中Qcustom较轻量,只需要在project 中包含qcustomplot.h 和 qcustomplot.cpp 几乎就可以使用。

    相比Qcustom,qwt功能更为强大,但是它的安装十分麻烦,阻挡了很多人(包括我)的使用。

    但是qwt只是对静态图表的表示非常不错,动态曲线性能并不突出。如果只是静态绘图,或者动态绘制的点并不多,继续用qwt甚至Qcustom完全没问题。

    但是如果是新入手Qt绘图,用Qt charts显然是更好的选择,因为它在各方面都比前两者要好,并且也易于使用。

    并且qml也支持charts,qml的渲染默认用GPU,成长性更好。

    如果你在安装Qt的时候,选择了Qt charts部分,那么在Qt中使用charts 只需要 在 .pro文件中

    QT += charts

    并且在程序的开头加上一句 using namespace Qtcharts或者一个宏 QT_CHARTS_USE_NAMESPACE 


    进入主题: 动态实时折线图绘制

    动态绘图,也就是说折线随着横坐标的增长而实时变化。

    从这一秒和上一秒的变化看来,就是坐标轴不动,整个图像往前移了一个单位,然后在空出的最后一个位置增加了一个新的点

    想一下,只要你的显示器不能够随着横坐标的增长变宽,上面说的就是不得不做的事情。或者除非你不把最前面的那个点淘汰掉,但是那样的话,你的点只有增,没有删,随着时间的增长,点越来越多,曲线最后只会挤成一团,啥也看不清。

    【多说一句,从相对的角度来说,既然可以把图像往前移一个单位,当然也可以坐标轴往后移一个单位,两者造成的结果当然是一样的。

    Qt有一个函数scroll可以实现后者的功能,它有两个参数,可以设置每次x、y轴向右和向上滚动的距离。但是scroll函数绘制坐标轴感觉很奇怪……真的有一种在滚的感觉,看起来很难受,具体可以看Qt欢迎界面里面的一个示例子dynamicspline】

    把整个图画往前移一个单位这个操作,这就是动态绘图的核心思想。

    除了往前移一个单位这个操作,还要有一个触发这个操作的信号

    一般来说,当产生动态绘图这个需求时,都会有一个驱动X轴随时间变化而增长的因素。或者是传感器上读取到一个数据就画一个点,或者说其它控件传过来一个数据就画一个点等等。

    如果仅仅是为了学习,也可以声明一个时间戳对象,当规定的时间戳被触发一次,就画一个点。

    显然,传感器,其它控件,时间戳都是信号,画图函数是槽。信号被触发一次,槽函数就画一个点。

    事先声明,我没用过时间戳,我做的项目是手机蓝牙传过来一个RSSI值就画一个点,之后我贴的代码也是这样写的。

    了解了以上两点,动态绘图也就没什么难的了,但是具体还是要看绘图的软件提供什么接口来操作。 

    下面具体说说Qt charts 怎么操作。

    Qt charts中,可以主要一下几个类: QChart 和 QChartView,QChart是用什么画,差不多画笔的意思,QChartView是在什么上画,差不多画布的意思。

    [cpp]  view plain  copy
    1. QChartView *chartView = new QChartView(this);    
    2. chartView *chart = chartView->chart();

    就新建了一个QChartView 和一个 QChart 指针。

     类 Series 是用来添加数据的对象(可以理解为一个集合)。常见的 QLineSeries,折线类,画出来的先棱角更强,QSplineSeries,曲线类,画出来更平滑,QScatterSeries,点类,画出来是一个个单独的点。Qt文档对这些类都有很详细的说明,并配有图画。

    类似于QChart 、QChartView、Series ,还有QValueAxis类(数值类型的坐标轴)等等,不再啰嗦,下面的代码里都有。并且有很详细的注释,想学的朋友一定仔细看一遍肯定能看明白。

    [cpp]  view plain  copy
    1. //新建 一个QLineSeries对象 指针  
    2. QLineSeries* series = new QLineSeries();  
    3. // 添加数据  
    4. series->append(0, 6);   
    5. series->append(2, 4);  
    6.  ...    
    7. //把series 这条线画出来  
    8. chart->addSeries(series);

    主要就是两个文件mainwindow.h和mainwindow.cpp,我删掉了一些和绘图没关系的变量,程序是不可以运行的,但是绘图的东西都在里面,可以参考。

    [cpp]  view plain  copy
    1. #ifndef MAINWINDOW_H  
    2. #define MAINWINDOW_H  
    3.   
    4. #include <QMainWindow>  
    5. #include <QChartView>  
    6. #include <QLineSeries>  
    7. #include <QScatterSeries>  
    8. #include <QValueAxis>  
    9.   
    10. QT_CHARTS_USE_NAMESPACE  
    11.   
    12. namespace Ui {  
    13. class MainWindow;  
    14. }  
    15.   
    16. class MainWindow : public QMainWindow  
    17. {  
    18.     Q_OBJECT  
    19.   
    20. public:  
    21.     explicit MainWindow(QWidget *parent = 0);  
    22.     ~MainWindow();  
    23.   
    24. public slots:  
    25.      void onIBScanTick(QList<IBResult*> list);  
    26. private:  
    27.     Ui::MainWindow *ui;  
    28.     int t = 0;  
    29.     int maxy = -1000,miny = 1000;  
    30.     QString major_minor ;  
    31.     QSet<QString> ib_set;  
    32.   
    33.     QLineSeries *series0;  
    34.     QLineSeries *series1;  
    35.   
    36.   
    37.     QScatterSeries * scatseries0;  
    38.     QScatterSeries * scatseries1;  
    39.   
    40.     QChart *chart;  
    41.     QChartView *chartView;  
    42.   
    43.     QValueAxis *axisX2;  
    44.     QValueAxis *axisY2;  
    45.     QValueAxis *axisX;  
    46.     QValueAxis *axisY;  
    47. };  
    48. #endif // MAINWINDO0W_H</span>  

    [cpp]  view plain  copy
    1. #include "mainwindow.h"  
    2. #include "ui_mainwindow.h"  
    3. #include "kalmanfilter.h"  
    4. #include <QDebug>  
    5. #include <QVector>  
    6. #include "ibscanner/ibscanner.h"  
    7. #include "kalmanfilter_now.h"  
    8. #include "global_data.h"  
    9. #include <QInputDialog>  
    10.   
    11. MainWindow::MainWindow(QWidget *parent) :  
    12.     QMainWindow(parent),  
    13.     ui(new Ui::MainWindow)  
    14. {  
    15.     ui->setupUi(this);  
    16.     global_widget* glw = global_widget::inst();  
    17.     major_minor = glw->str;  
    18.   
    19.      //设置一些QPen,以便待会设置线条的颜色,宽度  
    20.     QPen p0 ,p1,p2;  
    21.     p0.setWidth(3);  
    22.     p0.setColor(Qt::blue);  
    23.   
    24.     p1.setWidth(3);  
    25.     p1.setColor(Qt::red);  
    26.     p1.setBrush(Qt::red);  
    27.   
    28.     p2.setWidth(3);  
    29.     p2.setColor(Qt::black);  
    30.     p2.setBrush(Qt::black);  
    31.   
    32.     //QScatterSeries类的点,为了突出每个点的位置,Qcharts画的出的线每个点的痕迹几乎看不到  
    33.     scatseries0 = new QScatterSeries(this);  
    34.     scatseries0->setMarkerShape(QScatterSeries::MarkerShapeCircle);//设置点的类型  
    35.     scatseries0->setMarkerSize(10); //设置点的大小  
    36.   
    37.     scatseries1 = new QScatterSeries(this);  
    38.     scatseries1->setMarkerShape(QScatterSeries::MarkerShapeCircle);  
    39.     scatseries1->setMarkerSize(10);  
    40.     scatseries1->setPen(p1);  
    41.   
    42.     scatseries2 = new QScatterSeries(this);  
    43.     scatseries2->setMarkerShape(QScatterSeries::MarkerShapeCircle);  
    44.     scatseries2->setMarkerSize(10);  
    45.     scatseries2->setPen(p2);  
    46.   
    47.     series0 = new QLineSeries(this);  //线条0  
    48.     series0->setPen(p0);  
    49.   
    50.     series1 = new QLineSeries(this);  //线条1  
    51.     series1->setPen(p1);  
    52.   
    53.     series2 = new QLineSeries(this);  
    54.     series2->setPen(p2);  
    55.   
    56.    /********************************/  
    57.   
    58.     /*设置画笔和画布*/  
    59.     chartView = new QChartView(this);  
    60.     chart = chartView->chart();  
    61.   
    62.     chart->legend()->hide(); //隐藏图例  
    63.     chartView->setRenderHint(QPainter::Antialiasing); //设置抗锯齿  
    64.     chartView->resize(1200, 600);   //画布大小  
    65.     chartView->show(); //显示  
    66.   
    67.     /*添加数据*/  
    68.     chart->addSeries(scatseries0);  //把各个线条添加到chart中  
    69.     chart->addSeries(scatseries1);  
    70.     chart->addSeries(scatseries2);  
    71.     chart->addSeries(series0);  
    72.     chart->addSeries(series1);  
    73.     chart->addSeries(series2);  
    74.   
    75.     /*设置第一坐标轴*/   // rssi - dis  
    76.   
    77.     axisX = new QValueAxis;  
    78.     axisX->setRange(0,5);   //设置X坐标范围  
    79.     axisX->setTitleText("t/s"); //设置X坐标名字  
    80.   
    81.     axisY = new QValueAxis;  
    82.     axisY->setRange(0,50);  
    83.     axisY->setTitleText("dis/m");  
    84.   
    85.     //别忘记把坐标轴添加到chart  
    86.     chart->addAxis(axisX, Qt::AlignTop);  //并且XY轴的位置是上和右  
    87.     chart->addAxis(axisY, Qt::AlignRight);  
    88.   
    89.     /* 添加第二坐标轴*/   //t - dis  
    90.     axisX2 = new QValueAxis;  
    91.     axisX2->setLabelFormat("%g");  
    92.     axisX2->setMinorTickCount(15);  
    93.     axisX2->setTitleText("t/s");  
    94.     axisX2->setRange(0,5);  
    95.   
    96.     axisY2 = new QValueAxis;  
    97.     axisY2->setRange(-100,-40);  
    98.     axisY2->setMinorTickCount(10);  
    99.     axisY2->setTitleText("dis/m");  
    100.   
    101.     chart->addAxis(axisX2, Qt::AlignBottom); //并且XY轴的位置是下和左  
    102.     chart->addAxis(axisY2, Qt::AlignLeft);  
    103.   
    104.     //还要指定这条线是对应的是哪个坐标轴  
    105.     scatseries0->attachAxis(axisX2);  
    106.     scatseries0->attachAxis(axisY2);  
    107.   
    108.     scatseries1->attachAxis(axisX);  
    109.     scatseries1->attachAxis(axisY);  
    110.   
    111.     scatseries2->attachAxis(axisX2);  
    112.     scatseries2->attachAxis(axisY2);  
    113.   
    114.     series0->attachAxis(axisX2);  
    115.     series0->attachAxis(axisY2);  
    116.   
    117.     series1->attachAxis(axisX);  
    118.     series1->attachAxis(axisY);  
    119.   
    120.     series2->attachAxis(axisX2);  
    121.     series2->attachAxis(axisY2);  
    122.     IBScanner* g = IBScanner::instance();  
    123.   
    124.     connect(g, SIGNAL(ibScannerTick(QList<IBResult*>)), this, SLOT(onIBScanTick(QList<IBResult*>)));  
    125.     g->start();  
    126.     //getdata();  
    127. }  
    128.   
    129. double gety(int x)  
    130. {  
    131.    int iRssi = abs(x);  
    132.    float power = (iRssi-46)/(10*3.25);  
    133.    return pow(10, power);  
    134. }  
    135.   
    136.   
    137. void MainWindow::onIBScanTick(QList<IBResult*> list) //画图槽函数  
    138. {  
    139.     QListIterator<IBResult*> it(list);  //这是我接受到的数据  
    140.     while(it.hasNext())  
    141.     {  
    142.         IBResult* ib = it.next();  
    143.         QString mac = ib->mac;  
    144.         double tmp ;  
    145.         tmp = ib->rssi;  //取出我想画的数据  
    146.   
    147.         QString majMin = QString::number(ib->major) + QString::number(ib->minor);  
    148.         //if(!ib_set.contains(majMin))    ib_set.insert(majMin);  
    149.         if(major_minor == majMin)  
    150.         {  
    151.             qInfo() <<  majMin << ": rssi =" << tmp;  
    152.             if(t <= 60)  //如果点数小于60  
    153.             {  
    154.                  series0->append(t,tmp);  //把数据添加到series中  
    155.                  scatseries0->append(t,tmp);  
    156.   
    157.                  series1->append(t,ib->dis);  
    158.                  axisX->setRange(0,t);  
    159.   
    160.                  scatseries1->append(t,ib->dis);  
    161.                  axisX2->setRange(0,t);  //注意此处,重新设置X轴范围,保持与像显示的点数一致  
    162.                  //t++;  
    163.             }  
    164.             else //从传入第61个点开始,就开始滚动,把最早的点扔掉,加最新的一个点  
    165.             {  
    166.                 //把数据前移一个单位,如果点的数量太多,这里消耗的时间也会很多  
    167.                 QVector<QPointF> Points = series0->pointsVector();  
    168.                 int i;  
    169.                 for(i = 0;i< Points.size() - 1;i++)  
    170.                 {  
    171.                     Points[i] = QPoint(t+i,Points[i + 1].y());  
    172.                 }  
    173.                 Points[Points.size() - 1] = QPoint(t+i,tmp); //添加最新的点  
    174.                 series0->replace(Points); //利用replace函数更新数据  
    175.                 scatseries0->replace(Points);  
    176.   
    177.                 Points = series1->pointsVector();  
    178.                 for(i = 0;i< Points.size() - 1;i++)  
    179.                 {  
    180.                     Points[i] = QPoint(t+i,Points[i + 1].y());  
    181.                 }  
    182.                 Points[Points.size() - 1] = QPoint(t+i,ib->dis);  
    183.                 series1->replace(Points);  
    184.                 scatseries1->replace(Points);  
    185.   
    186.                 axisX2->setRange(t,t+i);  
    187.                 axisX->setRange(t,t+i);  
    188.   
    189.                 //t++;  
    190.             }  
    191.             if(tmp > maxy) maxy = tmp;  
    192.             if(tmp < miny) miny = tmp;  
    193.             axisY2->setRange(std::max(miny - 5,0) , maxy + 5);  
    194.         }  
    195. /*        if(majMin == "1009135166")  //对不同的蓝牙画另外的线 
    196.         { 
    197.             qInfo() <<  majMin << ": rssi =" << tmp; 
    198.             if(t <= 60 ) 
    199.             { 
    200.                 series2->append(t,tmp);//gety(ib->rssi)); 
    201.                 scatseries2->append(t,tmp);//gety(ib->rssi)); 
    202.  
    203.                 //t++; 
    204.             } 
    205.             else 
    206.             { 
    207.                 QVector<QPointF> Points = series2->pointsVector(); 
    208.                 qInfo() << "size3 = " << Points.size(); 
    209.                 int i; 
    210.                 for(i = 0;i< Points.size() - 1;i++) 
    211.                 { 
    212.                     Points[i] = QPoint(t+i,Points[i + 1].y()); 
    213.                 } 
    214.                 Points[Points.size() - 1] = QPoint(t+i,tmp);//gety(ib->rssi)); 
    215.                 series2->replace(Points); 
    216.                 scatseries2->replace(Points); 
    217.                 if(tmp > maxy) maxy = tmp; 
    218.                 if(tmp < miny) miny = tmp; 
    219.             } 
    220.             //t++; 
    221.         } 
    222.         */  
    223.         if(major_minor == majMin || majMin == "1009135166")  
    224.         {  
    225.             axisY2->setRange(miny, maxy + 5);  
    226.             t++;  
    227.         }  
    228.     }  
    229. }  
    230.   
    231. MainWindow::~MainWindow()  
    232. {  
    233.     delete ui;  
    234. }  
    更多相关内容
  • Qt实现动态曲线

    2018-08-08 10:21:52
    使用的是Qt4开发,经过实际的测试完全可以用,使用Qt5,只需简单的修改头文件也可以用。 在本人的博客中也有详细的程序解读,和开发的重要注意。
  • Qt实现动态折线图

    2021-08-28 17:02:15
    Qt中使用QChart绘制动态折线图。 可以根据刷新的点位置,更新折线图的后续走向,创建定时器,定时更新点,实现动态显示折线。 如图,线会往后走,坐标轴不动。(不会录屏,尴尬,要怎么录屏?怎么插入笔记?) ...

    Qt中使用QChart绘制动态折线图。

    可以根据刷新的点位置,更新折线图的后续走向,创建定时器,定时更新点,实现动态显示折线。

    如图,线会往后走,坐标轴不动。(不会录屏,尴尬,要怎么录屏?怎么插入笔记?)

    pro文件 + charts

    QT += core gui charts

    .h文件

    #ifndef WIDGET_H
    #define WIDGET_H
    
    
    #include <QWidget>
    #include <QtCharts/QLineSeries>
    #include <QtCharts/QChart>
    #include <QtCharts/QChartView>
    #include <QValueAxis>
    #include <QTimer>
    
    
    QT_CHARTS_USE_NAMESPACE
    
    QT_BEGIN_NAMESPACE
    namespace Ui { class Widget; }
    QT_END_NAMESPACE
    
    class Widget : public QWidget
    {
        Q_OBJECT
    
    public:
        Widget(QWidget *parent = nullptr);
        ~Widget();
    
        QLineSeries *series;
     
    展开全文
  • Qt折线图实现最简示例,演示如何通过Qt Charts模块构建一个漂亮的折线图。
  • 使用QT绘制折线图

    千次阅读 2022-02-19 11:59:39
    提升的类的名称我们写为QChartView 下面我们贴下主要代码 zx.pro ...#----------------------------------...# Project created by QtCreator 2022-02-13T18:15:06 # #--------------------------------------------

    我们先创建一个工程,然后在界面上放置一个Graphics Widget组件,在组件上点击鼠标右键,选择提升为...

    提升的类的名称我们写为QChartView

    下面我们贴下主要代码

    zx.pro

    #-------------------------------------------------
    #
    # Project created by QtCreator 2022-02-13T18:15:06
    #
    #-------------------------------------------------
    
    QT       += core gui charts
    
    greaterThan(QT_MAJOR_VERSION, 4): QT += widgets
    
    TARGET = zx
    TEMPLATE = app
    
    # The following define makes your compiler emit warnings if you use
    # any feature of Qt which as been marked as deprecated (the exact warnings
    # depend on your compiler). Please consult the documentation of the
    # deprecated API in order to know how to port your code away from it.
    DEFINES += QT_DEPRECATED_WARNINGS
    
    # You can also make your code fail to compile if you use deprecated APIs.
    # In order to do so, uncomment the following line.
    # You can also select to disable deprecated APIs only up to a certain version of Qt.
    #DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000    # disables all the APIs deprecated before Qt 6.0.0
    
    
    SOURCES += \
            main.cpp \
            widget.cpp
    
    HEADERS += \
            widget.h
    
    FORMS += \
            widget.ui
    

    widget.h

    #ifndef WIDGET_H
    #define WIDGET_H
    
    #include <QWidget>
    #include <QtCharts>
    
    namespace Ui {
    class Widget;
    }
    
    class Widget : public QWidget
    {
        Q_OBJECT
    
    public:
        explicit Widget(QWidget *parent = 0);
        ~Widget();
    
    private:
        Ui::Widget *ui;
    };
    
    #endif // WIDGET_H
    

    widget.cpp

    #include "widget.h"
    #include "ui_widget.h"
    
    
    Widget::Widget(QWidget *parent) :
        QWidget(parent),
        ui(new Ui::Widget)
    {
        ui->setupUi(this);
    
        //实例化一个QChart对象
        QChart *chart = new QChart;
    
        chart->setTitle("GDP增长图"); //设置标题
    
        ui->graphicsView->setChart(chart);  //将QChart对象设置到QChartView图表上
    
        //设置坐标轴
        QValueAxis* axisX = new QValueAxis;
        axisX->setTitleText("年份"); //设置标题
        axisX->setRange(1960, 2020); //设置范围
        axisX->setTickCount(7);      //设置主刻度个数
        axisX->setLineVisible(true); //设置轴线和刻度线可见性
        axisX->setGridLineVisible(false); //设置网格线可见性
    
        QValueAxis* axisY = new QValueAxis;
        axisY->setTitleText("GDP(万亿:美元)"); //设置标题
        axisY->setRange(0, 20);       //设置范围
        axisY->setTickCount(21);      //设置主刻度个数
        axisY->setLineVisible(true); //设置轴线和刻度线可见性
        axisY->setGridLineVisible(false); //设置网格线可见性
    
        //设置序列1
        QLineSeries *series = new QLineSeries;
        series->setName("中国");    //设置序列名
        series->setColor(QColor(255,0,0)); //设置序列颜色
    
        //添加数据点到序列
        series->append(1960, 0.06);
        series->append(1965, 0.07);
        series->append(1970, 0.09);
        series->append(1975, 0.16);
        series->append(1980, 0.19);
        series->append(1985, 0.30);
        series->append(1990, 0.36);
        series->append(1995, 0.73);
        series->append(2000, 1.21);
        series->append(2005, 2.29);
        series->append(2010, 6.09);
        series->append(2015, 11.06);
        series->append(2020, 14.72);
    
        //设置序列2
        QLineSeries *series2 = new QLineSeries;
        series2->setName("美国");    //设置序列名称
        series2->setColor(QColor(0,0,255)); //设置序列颜色
    
        //添加数据点到序列
        series2->append(1960, 0.54);
        series2->append(1965, 0.74);
        series2->append(1970, 1.07);
        series2->append(1975, 1.68);
        series2->append(1980, 2.85);
        series2->append(1985, 4.34);
        series2->append(1990, 5.96);
        series2->append(1995, 7.64);
        series2->append(2000, 10.25);
        series2->append(2005, 13.04);
        series2->append(2010, 15.00);
        series2->append(2015, 18.24);
        series2->append(2020, 20.93);
    
        //设置序列3
        QLineSeries *series3 = new QLineSeries;
        series3->setName("印度");    //设置序列名称
        series3->setColor(QColor(128,128,128)); //设置序列颜色
    
        //添加数据点到序列
        series3->append(1960, 0.03);
        series3->append(1965, 0.06);
        series3->append(1970, 0.06);
        series3->append(1975, 0.10);
        series3->append(1980, 0.18);
        series3->append(1985, 0.23);
        series3->append(1990, 0.32);
        series3->append(1995, 0.36);
        series3->append(2000, 0.47);
        series3->append(2005, 0.82);
        series3->append(2010, 1.67);
        series3->append(2015, 2.10);
        series3->append(2020, 2.62);
    
    
        //设置序列4
        QLineSeries *series4 = new QLineSeries;
        series4->setName("日本");    //设置序列名称
        series4->setColor(QColor(144,238,144)); //设置序列颜色
    
        //添加数据点到序列
        series4->append(1960, 0.04);
        series4->append(1965, 0.09);
        series4->append(1970, 0.21);
        series4->append(1975, 0.52);
        series4->append(1980, 1.10);
        series4->append(1985, 1.40);
        series4->append(1990, 3.13);
        series4->append(1995, 5.55);
        series4->append(2000, 4.97);
        series4->append(2005, 4.83);
        series4->append(2010, 5.76);
        series4->append(2015, 4.44);
        series4->append(2020, 5.06);
    
        //给Qchart添加序列
        chart->addSeries(series);
        chart->addSeries(series2);
        chart->addSeries(series3);
        chart->addSeries(series4);
    
    
        //把序列设置到坐标轴
        chart->setAxisX(axisX, series);
        chart->setAxisY(axisY, series);
        chart->setAxisX(axisX, series2);
        chart->setAxisY(axisY, series2);
        chart->setAxisX(axisX, series3);
        chart->setAxisY(axisY, series3);
        chart->setAxisX(axisX, series4);
        chart->setAxisY(axisY, series4);
    }
    
    Widget::~Widget()
    {
        delete ui;
    }
    

    效果图

     

    展开全文
  • 本资源为:pyqtchart绘制简单折线图源码<源码资源包不可以更换:代码段 self.charView.chart().setAxisX(self.x_Aix) #设置x轴属性 self.charView.chart().setAxisY(self.y_Aix) #设置y轴属性 注释> ,将博客中的...
  • Qt学习【3】绘制动态折线图

    千次阅读 2019-08-25 00:59:23
    一个简单的折线图 打开欢迎界面中的示例,搜索linechart,点击Running the Example,打开示例。 1、改pro工程文件 Qt Charts作为一个独立的模块,在使用前需要在项目的pro文件中添加: QT += charts 2、包含...


    一个简单的折线图

    打开欢迎界面中的示例,搜索linechart,点击Running the Example,打开示例。

    1、改pro工程文件

    Qt Charts作为一个独立的模块,在使用前需要在项目的pro文件中添加:

    QT += charts

    2、包含头文件,并引用qt chart空间命名

    // 包含line chart需要的头文件
    #include <QtCharts/QChartView>
    #include <QtCharts/QLineSeries>
    
    // 引用命名空间
    QT_CHARTS_USE_NAMESPACE

    3、创建QLineSeries并添加数据

    ​ 折线图的实现需要创建一个QLineSeries对象用于保存和绘制折线数据:

    QLineSeries *series = new QLineSeries();
    series->append(0, 6);
    series->append(2, 4);
    series->append(3, 8);
    series->append(7, 4);
    series->append(10, 5);
    *series << QPointF(11, 1) << QPointF(13, 3) << QPointF(17, 6) << QPointF(18, 3) <<QPointF(20, 2);

    4、创建QChart用于显示数据

    ​ 创建好series后,需要创建一个QChart实例并关联series,创建坐标才能将数据显示出来:

    QChart *chart = new QChart();
    chart->legend()->hide();
    chart->addSeries(series);
    chart->createDefaultAxes();
    chart->setTitle("Simple line chart example");

    5、创建QChartView对象并显示图表

    这里创建QChartView对象是为了将最终结果显示到界面,如果不想用QChartView,也可以选择QGraphicsView scene来显示。

    QChartView *chartView = new QChartView(chart);
    // 开启抗锯齿,让显示效果更好
    chartView->setRenderHint(QPainter::Antialiasing);

    官方源码

    #include <QtWidgets/QApplication>
    #include <QtWidgets/QMainWindow>
    #include <QtCharts/QChartView>
    #include <QtCharts/QLineSeries>
    
    QT_CHARTS_USE_NAMESPACE
    
    int main(int argc, char *argv[])
    {
        QApplication a(argc, argv);
    
    //![1]
        QLineSeries *series = new QLineSeries();
    //![1]
    
    //![2]
        series->append(0, 6);
        series->append(2, 4);
        series->append(3, 8);
        series->append(7, 4);
        series->append(10, 5);
        *series << QPointF(11, 1) << QPointF(13, 3) << QPointF(17, 6) << QPointF(18, 3) << QPointF(20, 2);
    //![2]
    
    //![3]
        QChart *chart = new QChart();
        chart->legend()->hide();
        chart->addSeries(series);
        chart->createDefaultAxes();
        chart->setTitle("Simple line chart example");
    //![3]
    
    //![4]
        QChartView *chartView = new QChartView(chart);
        chartView->setRenderHint(QPainter::Antialiasing);
    //![4]
    
    
    //![5]
        QMainWindow window;
        window.setCentralWidget(chartView);
        window.resize(400, 300);
        window.show();
    //![5]
    
        return a.exec();
    }
    

    绘制动态折线图

    1、使用QChart::scroll(qreal dx, qreal dy)函数

    参考官方示例Dynamic Spline Example。

    使用定时器,连接定时器timeout()信号、handleTimeout()槽函数,每过1000ms进入槽函数处理。

    槽函数:

    void Chart::handleTimeout()
    {
        qreal x = plotArea().width() / m_axis->tickCount();
        qreal y = (m_axis->max() - m_axis->min()) / m_axis->tickCount();
        m_x += y;
        m_y = qrand() % 5 - 2.5;
        m_series->append(m_x, m_y);
        scroll(x, 0);
        if (m_x == 100)
            m_timer.stop();
    }
    

    scroll()函数可以滚动表格,根据可见范围的特定距离。

    2、改变横坐标轴的范围

    QDateTimeAxis::setRange(QDateTime min, QDateTime max)函数可以设置时间横坐标轴的范围,从而达到折线图动态横移的效果。

    void MainWindow::timerEvent(QTimerEvent *event)
    {
        static int i = 0;
        if(i++ == 10)
        {
            i = 0;
            qDebug() << "timer";
        }
        QDateTime t(QDateTime::currentDateTime());
    
        dseries->append(t.toMSecsSinceEpoch(),(qrand()%10));
        QDateTime xMax;// 设置时间坐标轴范围
        xMax = QDateTime::currentDateTime();
    
        if(xMax > daxisX->max())
        {
            QDateTime xMin;
            xMin = xMax.addSecs(qint64(-20));
            daxisX->setRange(xMin,xMax);
        }
    }
    

     

    ------------------------------------------------------源文件------------------------------------

    头文件mainwindow.h

    #ifndef MAINWINDOW_H
    #define MAINWINDOW_H
    
    #include <QMainWindow>
    #include <QPainter>
    
    class MainWindow : public QMainWindow
    {
        Q_OBJECT
    
    public:
        MainWindow(QWidget *parent = 0);
        ~MainWindow();
    
    protected:
        void paintEvent(QPaintEvent *event);
    };
    
    #endif // MAINWINDOW_H
    

    mainwindow.cpp文件

    #include "mainwindow.h"
    #include <QDebug>
    
    int xAxisData[10];
    int yAxisData[10];
    int oldxData[10];
    int oldyData[10];
    QList<QPointF> pointList;
    
    MainWindow::MainWindow(QWidget *parent)
        : QMainWindow(parent)
    {
        QTimer *timer = new QTimer(this);
        this->startTimer(1000);
        // 按键
        button = new QPushButton(this);
        button->setText("KEY");
        button->move(400,20);
        connect(button,&QPushButton::clicked,this,&this->button_slot);
    
        // 按键1
        button1 = new QPushButton(this);
        button1->setText("KEY1");
        button1->move(400,40);
        connect(button1,&QPushButton::clicked,this,&this->button1_slot);
    
        // 按键2
        button2 = new QPushButton(this);
        button2->setText("KEY2");
        button2->move(400,70);
        connect(button2,&QPushButton::clicked,this,&this->button2_slot);
    
        // 设置轴坐标
        axisX = new QValueAxis;
        axisX->setRange(0, 10);
        axisX->setTickCount(10);  // 设置轴坐标网格数
        axisX->setLabelFormat("%.1f");
    
        // 设置轴坐标
        axisY = new QValueAxis;
        axisY->setRange(0, 10);
        axisY->setTickCount(5);  // 设置轴坐标网格数
        axisY->setLabelFormat("%d");
    
        QPen pen;
        pen.setWidth(3);
        pen.setColor(Qt::red);
    
        series = new QLineSeries;
        series->setPen(pen);
    
        chart = new QChart;
        chart->addSeries(series);
        chart->setTitle("坐标图");
        chart->setAxisX(axisX,series);
        chart->setAxisY(axisY,series);
        chart->legend()->hide(); // 隐藏图例
    
        chartView = new QChartView(chart,this);
        chartView->setRenderHint(QPainter::Antialiasing);
        chartView->resize(400,200);
        chartView->move(20,20);
    
        // 设置轴坐标
        daxisX = new QDateTimeAxis;
        daxisX->setTickCount(5);  // 设置轴坐标网格数
        daxisX->setFormat("h:mm:ss");
        QDateTime xMin,xMax;// 设置时间坐标轴范围
        xMin = QDateTime::currentDateTime();
        xMax = xMin.addSecs(20);
        daxisX->setRange(xMin,xMax);
    
        // 设置轴坐标
        daxisY = new QValueAxis;
        daxisY->setRange(0, 10);
        daxisY->setTickCount(5);  // 设置轴坐标网格数
        daxisY->setLabelFormat("%d");
    
        QPen dpen;
        dpen.setWidth(3);
        dpen.setColor(Qt::red);
    
        dseries = new QLineSeries;
        dseries->setPen(pen);
    
        dchart = new QChart;
        dchart->addSeries(dseries);
        dchart->setTitle("坐标图");
        dchart->setAxisX(daxisX,dseries);
        dchart->setAxisY(daxisY,dseries);
        dchart->legend()->hide(); // 隐藏图例
    
        dchartView = new QChartView(dchart,this);
        dchartView->setRenderHint(QPainter::Antialiasing);
        dchartView->resize(400,200);
        dchartView->move(20,260);
    }
    
    MainWindow::~MainWindow()
    {
    
    }
    
    void MainWindow::button_slot()
    {
        static int j = 0, k = 0;
        qDebug() << "button";
        if(k == 0)
        {
            k = 1;
            for(int i=0;i<10;i++)
            {
                oldxData[i] = -1 + i;
                series->append(oldxData[i],oldyData[i]);
            }
        }
        else
        {
            for(int i=0;i<10;i++)
            {
                xAxisData[i] = oldxData[i] + 1;
                if(i!=9)yAxisData[i] = yAxisData[i+1];
                else{
                    yAxisData[9] = qrand() % 10;
                    axisX->setRange(xAxisData[0],xAxisData[9]);
                }
                series->remove(oldxData[i],oldyData[i]);
                series->append(xAxisData[i],yAxisData[i]);
                oldxData[i] = xAxisData[i];
                oldyData[i] = yAxisData[i];
            }
        }
    }
    
    void MainWindow::button1_slot()
    {
        qDebug() << "button1";
        QDateTime t(QDateTime::currentDateTime());
    
        dseries->append(t.toMSecsSinceEpoch(),(qrand()%10));
        QDateTime xMax;// 设置时间坐标轴范围
        xMax = QDateTime::currentDateTime();
    
        if(xMax > daxisX->max())
        {
            QDateTime xMin;
            xMin = xMax.addSecs(qint64(-20));
            daxisX->setRange(xMin,xMax);
        }
    }
    
    /* 使用list队列添加折线图的点
     * 1、创建list
     * 2、按下按键,添加一个QPointF点到list内,刷新series内的点
     * 3、如果添加的个数大于10个需要:1)移动轴坐标 2)删除列表尾,删除曲线集的最后一个
     *
     *
    */
    void MainWindow::button2_slot()
    {
        qDebug() << "button2";
        static int i = 0;
        QPointF p11(i,(qrand()%10));
        pointList.append(p11);
        series->append(p11);
        if(pointList.isEmpty() == false && pointList.count() > 10)
        {
            series->remove(*(pointList.begin()));
            pointList.removeFirst();
            qreal a1 =0, a2 = 0;
            a1 = pointList.back().rx();
            a2 = pointList.front().rx();
            axisX->setRange(a2,a1);
        }
        i++;
    }
    
    void MainWindow::timerEvent(QTimerEvent *event)
    {
        static int i = 0;
        if(i++ == 10)
        {
            i = 0;
            qDebug() << "timer";
        }
        QDateTime t(QDateTime::currentDateTime());
    
        dseries->append(t.toMSecsSinceEpoch(),(qrand()%10));
        QDateTime xMax;// 设置时间坐标轴范围
        xMax = QDateTime::currentDateTime();
    
        if(xMax > daxisX->max())
        {
            QDateTime xMin;
            xMin = xMax.addSecs(qint64(-20));
            daxisX->setRange(xMin,xMax);
        }
    }
    

    main.cpp

    #include "mainwindow.h"
    #include <QApplication>
    
    int main(int argc, char *argv[])
    {
        QApplication a(argc, argv);
        MainWindow w;
        w.show();
    
        return a.exec();
    }
    

    展开全文
  • qt绘制折线图,趋势图,柱状图等,使用简单,功能强大
  • qt绘制折线图

    千次阅读 多人点赞 2019-10-21 08:53:16
    qt绘制折线图需要用到QChartView,QChart,QLineSeries 效果如下图: 代码中需要添加的东西: 1.在.pro文件中添加 QT += charts 2.在mainwindow.h头文件中添加 #ifndef MAINWINDOW_H #define ...
  • Qt实现动态曲线Qt5 + Qt4。 使用的是Qt4开发,经过实际的测试完全可以用,使用Qt5,只需简单的修改头文件也可以用。 在本人的博客中也有详细的程序解读,和开发的重要注意。 QT 曲线 动态 源码
  • qt折线图案例(带点击标签)代码
  • 使用QPainter绘制圆形和折线的demo,实现了在label控件下绘制圆形和折线图,定时刷新界面
  • 实现QT串口的基本功能,并添加了QChart图表写的折线图,用来显示实时数据。这是第一版,只实现了定时器不断刷新数据,并没有按照接收到的数据实时显示。这里的折线图(波形图)只是用来调试
  • Qt6绘制折现图完整工程,折线图支持缩放等操作。
  • Qt自定义折线图控件

    千次阅读 热门讨论 2018-10-15 11:34:43
    目录 基础效果图 前言 设计要点 ...使用Qt自定义折线图,可以自己控制折线图的重绘规则,究竟是每添加一个数据就刷新整个折线图,还是只刷新部分折线图。 我把折线图分为以下两类: 坐标系是静...
  • QT绘制折线图

    2021-01-08 09:38:26
    QT绘制折线图 项目简介 项目技术 项目展示 主要源码片段解析 获取完整项目源码传送门 项目简介 该示例显示了如何创建简单的折线图。 项目技术 qt5.12,qt charts模块,c++ 项目展示 主要源码片段解析 要创建折线图,...
  • Qt(十三)QChart绘制折线图

    千次阅读 2022-03-23 10:17:15
    文章目录一、简单绘图二、绘制折线图 一、简单绘图 Qt Charts基于Qt的Graphics View架构,其核心组件是QChartView 和 QChart QChartView是显示图标的视图,基类为QGraphicsView QChart的基类是QGraphicsltem 类的...
  • qt例程-折线图-柱状图ChartView.7z
  • 配置QtChart开发环境 项目开发样例 代码分析 横纵轴设置 设置范围 设置等分 设置横纵轴标题 折线设置 给图表添加线条 设置突点 设置线段名称 设置线段名称展示位置 设置折线颜色 设置数据 源代码 ...
  • QT 折线图 曲线图 柱形图 官方例子[1.Callout Example](https://doc.qt.io/qt-5/qtcharts-callout-example.html)[2.BarChart Example](https://doc.qt.io/archives/qt-5.7/qtcharts-barchart-example.html)自己的...
  • Qt - QCustomPlot折线图

    2021-03-29 21:51:12
    QCustomPlot 是一个Qt三方图表库,在QChart还未免费开放时,应该是一个很受欢迎的三方库。即使现在QChart已经可以免费使用了,有些功能使用QCustomPlot实现,体验也非常棒!下为QCustomPlot官网的一些示例,非常...
  • QT画坐标系折线图

    2018-01-02 15:06:05
    QT使用QPainter画坐标系折线图,图中可显示所有数据的最大值,最小值,以及平均值,
  • Qt 绘制折线图和表格,实现两者数据同步
  • Qt制作简单的折线图

    2021-06-19 17:25:24
    首先在.pro添加 QT += Charts ; 若使用的是VS编程软件,具体操作如下所示:
  • 画一个折线图,关键点使用空心的圆点(散点)标识出来,鼠标移动到关键点上,显示出当前数值,并将散点改变形状(增加边框);鼠标移走数值消失。https://blog.csdn.net/xiezhongyuan07/article/details/82760103
  • 本实例主要是在Qt4中学习使用QtCharts绘制简单的折线图;涉及的内容主要有:QValueAxis、QChart、QChartView、QLineSeries。 QValueAxis类用于操作图表轴,可以设置为显示带有勾号、网格线和阴影的轴线,轴的值绘制...
  • Qt一个函数使用QtChart绘制简单的折线图,非常简单的入门Demo,基本每一行代码都包含相应的注释说明。
  • Qt曲线图和折线图.rar

    2021-11-01 23:07:45
    Qt曲线图和折线图,LineChart,SplineChart,QLineSeries,QSplineSeries
  • QtChart绘制折线图

    2018-12-10 17:11:20
    QtChart绘制折线图

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,125
精华内容 850
关键字:

qt动态折线图