Qt5--实时数据动态显示--使用QCustomPlot库（一）基本应用

 使用qcustomplot这个库来开发。

简单应用

源码下载地址：https://download.csdn.net/download/qq_28877125/10402229

文件目录

Graph_Widget
      |--------qcustomplot
        |------qcustomplot.cpp
        |------qcustomplot.h
        |------....
      |--------Graph_Widget.pro
      |--------Graph_Widget.pro.user
      |--------main.cpp
      |--------widget.cpp
      |--------widget.h
      |--------widget.ui

main.cpp

#include "widget.h"
#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    Widget w;
    w.show();

    return a.exec();
}

---

widget.cpp

#include "widget.h"
#include "ui_widget.h"

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

    //建立一个曲线图表
    customPlot = new QCustomPlot(this);
    customPlot->setObjectName(QString::fromUtf8("customPlot"));
    customPlot->setBackground(Qt::white); //设置背景颜色
    customPlot->setGeometry(QRect(20, 20, 650, 400)); //设置 位置 高度



    customPlot->plotLayout()->insertRow(0);
    customPlot->plotLayout()->addElement(0, 0, new QCPPlotTitle(customPlot, "Cure")); //插入一行并且添加一个标题元素
    customPlot->addGraph(); // blue line
    customPlot->graph(0)->setPen(QPen(Qt::blue));
    customPlot->graph(0)->setBrush(QBrush(QColor(240, 255, 200)));
    customPlot->graph(0)->setAntialiasedFill(false);


  //显示当前数值文本
   textLabel = new QCPItemText(customPlot);
   customPlot->addItem(textLabel);
   textLabel->setPositionAlignment(Qt::AlignTop);  //布局内控件
   textLabel->position->setType(QCPItemPosition::ptAxisRectRatio); //按比例设置位置，依赖于坐标轴矩形大小，区别于按视口大小
   textLabel->position->setCoords(0, 0); // place position at center/top of axis rect
   textLabel->setFont(QFont(font().family(), 15)); // make font a bit larger
   textLabel->setPen(QPen(Qt::black)); // show black border around text



    //设置当前曲线名字文本
   textLabel2 = new QCPItemText(customPlot);
   customPlot->addItem(textLabel2);
   textLabel2->setPositionAlignment(Qt::AlignBottom);
   textLabel2->position->setType(QCPItemPosition::ptAxisRectRatio);
   textLabel2->position->setCoords(0, 1.0);
   textLabel2->setFont(QFont(font().family(), 15)); // make font a bit larger
   textLabel2->setPen(QPen(Qt::black)); // show black border around text
   CureName="123";//设置曲线名字
   textLabel2->setText("CureName:"+CureName); //显示当前值


   //x坐标轴设置
   customPlot->xAxis->setLabel("time:");//设置坐标名字
   customPlot->xAxis->setLabelColor(Qt::black);//设置坐标颜色
   customPlot->xAxis->setLabelPadding(1);//设置坐标轴名称文本距离坐标轴刻度线距离
    //y坐标轴设置
   customPlot->yAxis->setAutoTickStep(false);  ////设置是否自动分配刻度间距
   customPlot->yAxis->setTickStep(25);// 数值的大小是y轴的一半，设置刻度间距
   customPlot->yAxis->setLabelColor(QColor(0, 160, 230));  //设置文本颜色
   customPlot->yAxis->setRange(-50,50);   //y轴的范围

   customPlot->xAxis2-> setTicks(false); //不显示坐标轴
   customPlot->yAxis2-> setTicks(false); //不显示坐标轴


    value0=1; //测试用到
    key=7;
    QTimer *dataTimer = new QTimer(this);
    connect(dataTimer, SIGNAL(timeout()), this, SLOT(realtimeDataSlot()));
    dataTimer->start(1000);
}

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

void Widget::realtimeDataSlot()
{
    key++;
    static double lastPointKey = 0;
    if (key-lastPointKey > 0.01) // at most add point every 10 ms
    {
        //测试用
         if(value0>0 && value0<10)
        {
          value0=value0+5;
        }
        else  {value0=5;}

        customPlot->graph(0)->addData(key, value0);
        lastPointKey = key;

    }

    textLabel->setText("Current:"+QString::number( value0 )); //显示当前值
    customPlot->xAxis->setAutoTickStep(false);  ////设置是否自动分配刻度间距
    customPlot->xAxis->setTickStep(1);// 数值的大小是y轴的一半，设置刻度间距
    customPlot->xAxis->setRange(key,8,Qt::AlignRight);
    customPlot->replot();
}

---

widget.h

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>

#include <qmath.h>
#include <QTimer>
#include <qcustomplot/qcustomplot.h>
#include <QString>

namespace Ui {
class Widget;
}

class Widget : public QWidget
{
    Q_OBJECT

public:
    explicit Widget(QWidget *parent = 0);
    ~Widget();

private:
    Ui::Widget *ui;
    double value0;
    double key;
    QString  CureName;//设置曲线名字
    QCustomPlot *customPlot;
    QCPItemText *textLabel;
    QCPItemText *textLabel2;

private slots:
   void realtimeDataSlot();
};

#endif // WIDGET_H

 上面的代码，那个图表示在整个主界面上面，现在想让它在一个固定的地方，主界面的其它地方有其他用处。在主widget里面添加一个widget取名为widget_graph然后，在设计界面鼠标在这个widget上面点右键promoted成QCousotmPlot类，有些东西就要改了。

widget.h

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>

#include <qmath.h>
#include <QTimer>
#include <qcustomplot/qcustomplot.h>
#include <QString>

namespace Ui {
class Widget;
}

class Widget : public QWidget
{
    Q_OBJECT

public:
    explicit Widget(QWidget *parent = 0);
    ~Widget();

private:
    Ui::Widget *ui;
    double value0;
    double key;
    QString  CureName;//设置曲线名字
//    QCustomPlot *customPlot;
    QCPItemText *textLabel;
    QCPItemText *textLabel2;

private slots:
   void realtimeDataSlot();
};

#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);


    //建立一个曲线图表
    ui->widget_graph->setObjectName(QString::fromUtf8("customPlot"));
    ui->widget_graph->setBackground(Qt::white); //设置背景颜色

    ui->widget_graph->plotLayout()->insertRow(0);
    ui->widget_graph->plotLayout()->addElement(0, 0, new QCPPlotTitle(ui->widget_graph, "Cure")); //插入一行并且添加一个标题元素
    ui->widget_graph->addGraph(); // blue line
    ui->widget_graph->graph(0)->setPen(QPen(Qt::blue));
//    ui->widget_graph->graph(0)->setBrush(QBrush(QColor(240, 255, 200))); // 线下面的阴影的颜色
    ui->widget_graph->graph(0)->setAntialiasedFill(false);

    //设置可放大缩小
    ui->widget_graph->setInteractions(QCP::iRangeDrag | QCP::iRangeZoom);



  //显示当前数值文本
   textLabel = new QCPItemText(ui->widget_graph);
   ui->widget_graph->addItem(textLabel);
   textLabel->setPositionAlignment(Qt::AlignTop);  //布局内控件
   textLabel->position->setType(QCPItemPosition::ptAxisRectRatio); //按比例设置位置，依赖于坐标轴矩形大小，区别于按视口大小
   textLabel->position->setCoords(0, 0); // place position at center/top of axis rect
   textLabel->setFont(QFont(font().family(), 15)); // make font a bit larger
   textLabel->setPen(QPen(Qt::black)); // show black border around text



    //设置当前曲线名字文本
   textLabel2 = new QCPItemText(ui->widget_graph);
   ui->widget_graph->addItem(textLabel2);
   textLabel2->setPositionAlignment(Qt::AlignBottom);
   textLabel2->position->setType(QCPItemPosition::ptAxisRectRatio);
   textLabel2->position->setCoords(0, 1.0);
   textLabel2->setFont(QFont(font().family(), 15)); // make font a bit larger
   textLabel2->setPen(QPen(Qt::black)); // show black border around text
   CureName="123";//设置曲线名字
   textLabel2->setText("CureName:"+CureName); //显示当前值


   //x坐标轴设置
   ui->widget_graph->xAxis->setLabel("time:");//设置坐标名字
   ui->widget_graph->xAxis->setLabelColor(Qt::black);//设置坐标颜色
   ui->widget_graph->xAxis->setLabelPadding(1);//设置坐标轴名称文本距离坐标轴刻度线距离
    //y坐标轴设置
   ui->widget_graph->yAxis->setAutoTickStep(false);  ////设置是否自动分配刻度间距
   ui->widget_graph->yAxis->setTickStep(25);// 数值的大小是y轴的一半，设置刻度间距
   ui->widget_graph->yAxis->setLabelColor(QColor(0, 160, 230));  //设置文本颜色
   ui->widget_graph->yAxis->setRange(0,100);   //y轴的范围

   ui->widget_graph->xAxis2-> setTicks(false); //不显示坐标轴
   ui->widget_graph->yAxis2-> setTicks(false); //不显示坐标轴


    value0=1; //测试用到
    value1=1;
    key=7;
    QTimer *dataTimer = new QTimer(this);
    connect(dataTimer, SIGNAL(timeout()), this, SLOT(realtimeDataSlot()));
    dataTimer->start(1000);
}

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

void Widget::realtimeDataSlot()
{
    key++;
    static double lastPointKey = 0;
    if (key-lastPointKey > 0.01) // at most add point every 10 ms
    {
        //测试用
         if(value0>0 && value0<10)
        {
          value0=value0+5;
        }
        else  {value0=5;}

        ui->widget_graph->graph(0)->addData(key, value0);

        lastPointKey = key;

    }

    textLabel->setText("Current:"+QString::number( value0 )); //显示当前值
    ui->widget_graph->xAxis->setAutoTickStep(false);  ////设置是否自动分配刻度间距
    ui->widget_graph->xAxis->setTickStep(0.5);// 数值的大小是y轴的一半，设置刻度间距
    ui->widget_graph->xAxis->setRange(key,8,Qt::AlignRight);
    ui->widget_graph->replot();
}