系列文章目录

提示：这里是该系列文章的所有文章的目录
第一章： （一）QCustomPlot常见属性设置、多曲线绘制、动态曲线绘制、生成游标、矩形放大等功能实现
第二章： （二）QCustomPlot生成热力图/矩阵颜色图
第三章： （三）Qt+QCustomPlot生成上下方向/不同颜色的条形图(柱形图)

文章目录

• 系列文章目录
• 前言
• 一、QCustomPlot的提升
• 二、示例完整代码展示
• 三、下载链接
• 总结

前言

接上一篇文章，在前文中实现的一个柱形图数据都是固定的，无法通过模拟按钮来进行数据的增加，并且数据量较小，无法体现实际项目中所需要的功能。所以在这一篇文章中进行了数据的模拟增加，并且可以动态显示界面，也可以清空图表进行重绘，详细功能实现见文章内容，大家可以参考学习，如有错误之处，欢迎大家批评指正。

项目效果

提示：以下是本篇文章正文内容，下面案例可供参考

一、QCustomPlot的提升

本文在ui界面上添加了两个widget控件，并将其提升为QCustomPlot类，具体的提升步骤可见此博客：QCustomPlot常见属性设置、多曲线绘制、动态曲线绘制、生成游标、矩形放大等功能实现

由于界面上有多个QCustomPlot，所以在我们的构造函数中需要对这两个控件进行初始化，两个控件背景等等都是一样的，所以这里使用了一个setBarCustomPlot()函数通过输入形参的方式来完成两个控件的初始化，见下文示例完整代码。

void Widget::initWidget()
{...m_customPlot = new QCustomPlot();m_customPlot = ui->customplot;setBarCustomPlot(m_customPlot,0);m_customPlot_2 = new QCustomPlot();m_customPlot_2 = ui->customplot_2;setBarCustomPlot(m_customPlot_2,1);...

二、示例完整代码展示

这里将示例的完整代码进行展示，详情见代码注释
1.widget.h

#ifndef WIDGET_H
#define WIDGET_H#include 
#include "CustomPlot/qcustomplot.h"QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACEclass Widget : public QWidget
{Q_OBJECTpublic:Widget(QWidget *parent = nullptr);~Widget();void initWidget();void setBarCustomPlot(QCustomPlot *customPlot,int index);void setBarReplot(QCustomPlot *customPlot);protected:bool eventFilter(QObject *watched,QEvent *event);private slots:void on_pb_Start_clicked();void on_pb_Replot_clicked();void on_pb_Change_clicked();private:Ui::Widget *ui;QCustomPlot *m_customPlot;QCustomPlot *m_customPlot_2;QCPItemText *maxLabel[2];QCPItemText *minLabel[2];int serialNum;double maxNum;double minNum;double xNum;double yNum;
};
#endif // WIDGET_H

2.widget.cpp

#include "widget.h"
#include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);this->initWidget();
}Widget::~Widget()
{delete m_customPlot;delete ui;
}void Widget::initWidget()
{//初始化变量serialNum = 0;maxNum = 0;minNum = 0;xNum = 0;yNum = 0;m_customPlot = new QCustomPlot();m_customPlot = ui->customplot;setBarCustomPlot(m_customPlot,0);m_customPlot_2 = new QCustomPlot();m_customPlot_2 = ui->customplot_2;setBarCustomPlot(m_customPlot_2,1);//添加事件过滤器ui->customplot->installEventFilter(this);ui->customplot_2->installEventFilter(this);
}void Widget::setBarCustomPlot(QCustomPlot *customPlot,int index)
{//qDebug()<<"*customPlot:"<objectName();//设置背景黑色customPlot->axisRect()->setBackground(QBrush(Qt::black));//x轴设置customPlot->xAxis->setVisible(true);customPlot->xAxis->setTickLabels(false);customPlot->xAxis->setSubTickLength(0);customPlot->xAxis->setTickLength(0);customPlot->xAxis->setRange(0,30);//x2轴设置customPlot->xAxis2->setVisible(true);customPlot->xAxis2->setTickLabels(false);customPlot->xAxis2->setSubTickLength(0);customPlot->xAxis2->setTickLength(0);//y轴设置customPlot->yAxis->setVisible(true);customPlot->yAxis->setTickLabels(false);customPlot->yAxis->setSubTickLength(0);customPlot->yAxis->setTickLength(0);customPlot->yAxis->setRange(-1.6,1.6);customPlot->yAxis->ticker()->setTickCount(3);customPlot->yAxis->grid()->setPen(QPen(Qt::white));//y2轴设置customPlot->yAxis2->setVisible(true);customPlot->yAxis2->setTickLabels(false);customPlot->yAxis2->setSubTickLength(0);customPlot->yAxis2->setTickLength(0);//设置文本框maxLabel[index] = new QCPItemText(customPlot);   //在QCustomplot中新建文字框maxLabel[index]->position->setType(QCPItemPosition::ptAxisRectRatio);   //位置类型maxLabel[index]->position->setCoords(0.96,0.18);maxLabel[index]->setText("   ");maxLabel[index]->setColor(QColor(Qt::white));   //字体颜色maxLabel[index]->setFont(QFont(font().family(),8));   //字体大小maxLabel[index]->setBrush(QColor(Qt::red));maxLabel[index]->setPadding(QMargins(2,2,2,2));   //文字距离边框几个像素minLabel[index] = new QCPItemText(customPlot);minLabel[index]->position->setType(QCPItemPosition::ptAxisRectRatio);minLabel[index]->position->setCoords(0.96,0.82);minLabel[index]->setText("   ");minLabel[index]->setColor(QColor(Qt::white));minLabel[index]->setFont(QFont(font().family(),8));minLabel[index]->setBrush(QColor(Qt::red));minLabel[index]->setPadding(QMargins(2,2,2,2));}void Widget::setBarReplot(QCustomPlot *customPlot)
{QCPBars *bars = new QCPBars(customPlot->xAxis,customPlot->yAxis);bars->setAntialiased(false);   //为了更好的边框效果,关闭抗齿锯bars->setWidth(1);   //设置各柱之前无间隔bars->setPen(QPen(QColor(Qt::black).lighter(100)));   //设置柱状图的边框颜色qDebug()<<"maxNum:"<minNum*0.8)&&(yNumbars->setBrush(QColor(Qt::green));//绿色}else if((yNummaxNum)){bars->setBrush(QColor(Qt::red));//红色}else{bars->setBrush(QColor(Qt::yellow));//黄色}QVector ticks1;ticks1 << xNum;QVector fossilData1;fossilData1  << yNum;bars->setData(ticks1,fossilData1,true);if(xNum > 30){customPlot->xAxis->setRange(xNum-29.5,xNum+0.5);}customPlot->replot(QCustomPlot::rpQueuedReplot);
}bool Widget::eventFilter(QObject *watched, QEvent *event)
{if(event->type() == QEvent::MouseButtonDblClick)   //双击图表事件{if(watched == ui->customplot){qDebug()<<"customplot doubleClicked";}else if(watched == ui->customplot_2){qDebug()<<"customplot_2 doubleClicked";}}return QWidget::eventFilter(watched,event);
}void Widget::on_pb_Start_clicked()
{//maxLabel[0]->setText("-1.11");//minLabel[0]->setText("-1.11");maxLabel[0]->setText(QString::number(maxNum,'f',2));minLabel[0]->setText(QString::number(minNum,'f',2));maxLabel[1]->setText(QString::number(maxNum,'f',2));minLabel[1]->setText(QString::number(minNum,'f',2));serialNum ++;qDebug()<<"serialNum:"<yNum += 0.1;}else{yNum = -1.5;}qDebug()<<"xNum:"<//清除数据serialNum = 0;maxNum = 0;minNum = 0;xNum = 0;yNum = 0;maxLabel[0]->setText("   ");minLabel[0]->setText("   ");maxLabel[1]->setText("   ");minLabel[1]->setText("   ");m_customPlot->xAxis->setRange(0,30);m_customPlot->clearPlottables();m_customPlot->replot(QCustomPlot::rpQueuedReplot);m_customPlot_2->xAxis->setRange(0,30);m_customPlot_2->clearPlottables();m_customPlot_2->replot(QCustomPlot::rpQueuedReplot);
}void Widget::on_pb_Change_clicked()
{//设置文本框maxNum = 1.00;minNum = -1.00;maxLabel[0]->setText(QString::number(maxNum,'f',2));minLabel[0]->setText(QString::number(minNum,'f',2));maxLabel[1]->setText(QString::number(maxNum,'f',2));minLabel[1]->setText(QString::number(minNum,'f',2));m_customPlot->replot(QCustomPlot::rpQueuedReplot);m_customPlot_2->replot(QCustomPlot::rpQueuedReplot);
}

3.widget.ui见上文。

三、下载链接

我的示例百度网盘链接：https://pan.baidu.com/s/1IAHCmKt4x14oef_09kD0Gg
提取码：xxcj

总结

测试发现多个QCustomPlot同时显示也是很流畅的，不会造成界面卡顿啥的，文中实现界面动态显示的关键是这句代码customPlot->xAxis->setRange(xNum-29.5,xNum+0.5)，大家可以根据实际进行图表X轴范围的修改。在实际工作中可能还会遇到点击QCustomPlot界面来实现其他的功能，这时候可以考虑使用事件过滤器的方法，文中进行了双击图表的事件重写，可以根据项目需要进行更改。

本系列文章上一篇：（三）Qt+QCustomPlot生成上下方向/不同颜色的条形图(柱形图)

hello：
共同学习，共同进步，如果还有相关问题，可在评论区留言进行讨论。