#QT# QCustomPlot

志扬工作室

共 2804字,需浏览 6分钟

 · 2022-04-24

-Start:关注本公众号后,可直接联系后台获取排版美化的详细文档!

-Hints:本篇文章所编纂的资料均来自网络,特此感谢参与奉献的有关人员。


QCustomPlot

QCustomPlot是Qt的一个小型第三方图表库,支持静态/动态曲线、柱状图、蜡烛图、频谱图等。

 

QCustomPlot 使用

-下载链接:

https://www.qcustomplot.com/index.php/download

-新建项目

使用Qtcreator新建一个工程,基类模板选择QMainWindow

-复制qcustomplot

将解压得到的QCustompPlot文件夹里面的头文件qcustomplot.h和源文件qcustomplot.cpp复制粘贴到工程文件夹下。

 

QCustomPlot的几个重要类

-QCustomPlot 图表类:用于图表的显示和交互

-QCPLayer 图层:管理图层元素(QCPLayerable),所有可显示的对象都是继承自图层元素

-QCPAbstractPlottable 绘图元素:包含 折线图(QCPGraph)、曲线图(QCPCurve)、柱状图(QCPBars)、QCPStatiBox(盒子图)、QCPColorMap(色谱图)、QCPFinancial(金融图)

-QCPAxisRect 坐标轴矩形:一个坐标轴矩形默认包含上下左右四个坐标轴,但是可以添加多个坐标轴

 

QCustomPlot类

QCustomPlot类管理着所有的图层,它默认自带了六个图层,分别是:

1背景层background

2网格层grid

3绘图层main

4坐标轴层axes

5图例层legend

6 overlay层overlay

依据层的顺序的不同,绘制的顺序也不同,越在底下的层越早绘制,当前层默认为绘图层main

我们的绘图区域则在QCPAxisRect中,QCustomPlot类默认包含一个QCPAxisRect,我们可以在下图中可以看到一个QCPAxisRect一般来说会有上轴xAxis2、下轴xAxis、左轴yAxis和右轴yAxis2四个轴


 

QCustomPlot 静态示例

-主要函数

voidMainWindow::setupQuadraticDemo(QCustomPlot *customPlot)

{

   QVector x(101), y(101);

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

       x[i] = i / 50.0 - 1; // -1 到 1

       y[i] = x[i] * x[i];

    }

 

   customPlot->addGraph();                       // 添加一个曲线图QGraph

   customPlot->graph(0)->setData(x, y);          // 为曲线图添加数据

   customPlot->graph(0)->setName("第一个示例");   // 设置曲线图的名字

   customPlot->xAxis->setLabel("x");             // 设置x轴的标签

   customPlot->yAxis->setLabel("y");

   customPlot->xAxis->setRange(-1, 1);           // 设置x轴的范围为(-1,1)

   customPlot->yAxis->setRange(0, 1);

   customPlot->legend->setVisible(true);         // 显示图例

}

-示例效果

 

QCustomPlot 动态示例

mainwindow.h代码如下:

   #ifndef MAINWINDOW_H

   #define MAINWINDOW_H

 

   #include

   #include

   #include "qcustomplot.h"

 

   namespace Ui {

       class MainWindow;

    }

 

   class MainWindow : public QMainWindow

    {

       Q_OBJECT

 

   public:

       explicit MainWindow(QWidget *parent = 0);

       ~MainWindow();

       //设置qcustomplot画图属性,实时

       void setupRealtimeDataDemo(QCustomPlot *customPlot);

   private slots:

       //添加实时数据槽

       void realtimeDataSlot();

 

   private:

       Ui::MainWindow *ui;

       //定时器,周期调用realtimeDataSlot()槽,实现动态数据添加到曲线

       QTimer dataTimer;

 

 

    };

 

   #endif // MAINWINDOW_H

 

mainwindow.cpp代码如下:

   #include "mainwindow.h"

   #include "ui_mainwindow.h"

   #include

   #include

   #include

 

 

 

   MainWindow::MainWindow(QWidget *parent) :

       QMainWindow(parent),

       ui(new Ui::MainWindow)

    {

       ui->setupUi(this);

 

       setupRealtimeDataDemo(ui->customPlot);

       ui->customPlot->replot();

 

       ui->checkBox_temp->setChecked(true);

       ui->checkBox_hui->setChecked(true);

    }

 

   MainWindow::~MainWindow()

    {

       delete ui;

    }

 

   //画图初始化

   void MainWindow::setupRealtimeDataDemo(QCustomPlot *customPlot)

    {

   //#if QT_VERSION < QT_VERSION_CHECK(4, 7, 0)

     //QMessageBox::critical(this, "", "You're using Qt <4.7, the realtime data demo needs functions that are available with Qt 4.7 towork properly");

   //#endif

     //demoName = "Real Time Data Demo";

 

     // include this section to fully disable antialiasing for higherperformance:

     /*

     customPlot->setNotAntialiasedElements(QCP::aeAll);

     QFont font;

     font.setStyleStrategy(QFont::NoAntialias);

     customPlot->xAxis->setTickLabelFont(font);

     customPlot->yAxis->setTickLabelFont(font);

     customPlot->legend->setFont(font);

     */

     customPlot->addGraph(); // blue line

     customPlot->graph(0)->setPen(QPen(Qt::blue));

     customPlot->graph(0)->setName("temp");

     //customPlot->graph(0)->setBrush(QBrush(QColor(240, 255, 200)));

     //customPlot->graph(0)->setAntialiasedFill(false);

     customPlot->addGraph(); // red line

     customPlot->graph(1)->setPen(QPen(Qt::red));

      customPlot->graph(1)->setName("hui");

     //customPlot->graph(0)->setChannelFillGraph(customPlot->graph(1));

 

 

     customPlot->xAxis->setTickLabelType(QCPAxis::ltDateTime);

     customPlot->xAxis->setDateTimeFormat("hh:mm:ss");

     customPlot->xAxis->setAutoTickStep(false);

     customPlot->xAxis->setTickStep(2);

     customPlot->axisRect()->setupFullAxesBox();

 

     // make left and bottom axes transfer their ranges to right and topaxes:

     //connect(customPlot->xAxis, SIGNAL(rangeChanged(QCPRange)),customPlot->xAxis2, SLOT(setRange(QCPRange)));

     //connect(customPlot->yAxis, SIGNAL(rangeChanged(QCPRange)),customPlot->yAxis2, SLOT(setRange(QCPRange)));

 

     // setup a timer that repeatedly calls MainWindow::realtimeDataSlot:

     connect(&dataTimer, SIGNAL(timeout()), this,SLOT(realtimeDataSlot()));

     dataTimer.start(0); // Interval 0 means to refresh as fast as possible

     customPlot->legend->setVisible(true);

 

 

 

    }

 

   void MainWindow::realtimeDataSlot()

    {

       //key的单位是秒

       double key = QDateTime::currentDateTime().toMSecsSinceEpoch()/1000.0;

       qsrand(QTime::currentTime().msec() + QTime::currentTime().second() *10000);

       //使用随机数产生两条曲线

       double value0 = qrand() % 100;

       double value1 = qrand() % 80;

       if (ui->checkBox_temp->isChecked())

           ui->customPlot->graph(0)->addData(key, value0);//添加数据1到曲线1

       if (ui->checkBox_hui->isChecked())

           ui->customPlot->graph(1)->addData(key, value1);//添加数据2到曲线2

       //删除8秒之前的数据。这里的8要和下面设置横坐标宽度的8配合起来

       //才能起到想要的效果,可以调整这两个值,观察显示的效果。

       ui->customPlot->graph(0)->removeDataBefore(key-8);

       ui->customPlot->graph(1)->removeDataBefore(key-8);

 

     //自动设定graph(1)曲线y轴的范围,如果不设定,有可能看不到图像

//也可以用ui->customPlot->yAxis->setRange(up,low)手动设定y轴范围

 

       ui->customPlot->graph(0)->rescaleValueAxis();

       ui->customPlot->graph(1)->rescaleValueAxis(true);  

 

       //这里的8,是指横坐标时间宽度为8秒,如果想要横坐标显示更多的时间

       //就把8调整为比较大到值,比如要显示60秒,那就改成60。

       //这时removeDataBefore(key-8)中的8也要改成60,否则曲线显示不完整。

       ui->customPlot->xAxis->setRange(key+0.25, 8, Qt::AlignRight);//设定x轴的范围

       ui->customPlot->replot();

    }

-示例效果

 

参考资料:

https://blog.csdn.net/guojunjunjun2006/article/details/122376139?spm=1001.2101.3001.6650.3&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-3.pc_relevant_antiscanv2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-3.pc_relevant_antiscanv2&utm_relevant_index=6

http://blog.chinaunix.net/uid-11829250-id-5750296.htmlhttps://blog.csdn.net/baojiboy/article/details/119899271

https://blog.csdn.net/baidu_31788709/article/details/120471313

2D热力图

https://blog.csdn.net/qq10097355/article/details/105741397


公众号二维码

End:如果有兴趣了解量化交易、数据分析和互联网+的实用技术,欢迎关注本公众号

浏览 22
点赞
评论
收藏
分享

手机扫一扫分享

举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

举报