前言：

? ? ? ? 封裝的一個實時波形圖的類，可以直接提升使用。 提供了接口，可以更改顏色，樣式，等等

參考：

Qt Plotting Widget QCustomPlot - Introduction

另外參考了一個大神的作品，鏈接沒找到。

項目文件：

123盤??

123盤? 實時波形圖官方版下載丨最新版下載丨綠色版下載丨APP下載-123云盤

CSDN

【免費】一個實時波形圖的封裝demo（QT）（qcustomplot）資源-CSDN文庫

源碼

WaveChart文件夾：

1.加入文件qcustomplot.h 和 qcustomplot.cpp：

2.WaveChart.pri文件：

QT       += core gui
greaterThan(QT_MAJOR_VERSION, 4): QT += widgets printsupportFORMS += \$$PWD/waveWidget.uiHEADERS += \$$PWD/qcustomplot.h \$$PWD/waveWidget.hSOURCES += \$$PWD/qcustomplot.cpp \$$PWD/waveWidget.cpp

3.waveWidget.h文件：

#ifndef WAVEWIDGET_H
#define WAVEWIDGET_H#include <QWidget>
#include <QVBoxLayout>
#include <vector>
#include <cstring>
#include <numeric>
//#include <QScrollBar>
#include "qcustomplot.h"
using std::vector;
namespace Ui {
class WaveWidget;
}class WaveWidget : public QWidget
{Q_OBJECTpublic:explicit WaveWidget(QWidget *parent = nullptr);~WaveWidget();void init(bool isShowTicks=true, bool isShowTickLables=true, bool isShowGrid=true, bool isShowSubGrid=true, bool isShowAxis2=true, bool isGraphBigAndSmall=true);void setTheme(QColor axis, QColor background);void setXAxisLable(const char* name, const char* name2 = "");void setYAxisLable(const char* name, const char* name2 = "");void setPen(Qt::GlobalColor penColor, QCPGraph::LineStyle lineStyle = QCPGraph::lsLine, QColor brushColor = QColor(255,255, 255, 100), bool isShow = true);void addNewData(double data);void setTitle(const char* name);double getMax();double getMin();double getAverage();QCustomPlot*    getTheChartPlot();QCPGraph*       getTheGraph();vector<double>  &getTheVector();private:Ui::WaveWidget *ui;QCustomPlot*    chartPlot = new QCustomPlot(this);      // 圖表QCPGraph*       graph;                                  // 曲線//QScrollBar      horizontalScrollBar;vector<double>  graphData;                              // 圖表數據,只作記錄使用int             timeRange = 10;                         // 時間軸范圍QTime time;double          sum = 0.0;};#endif // WAVEWIDGET_H

4.waveWidget.cpp文件

#include "waveWidget.h"
#include "ui_waveWidget.h"WaveWidget::WaveWidget(QWidget *parent) :QWidget(parent),ui(new Ui::WaveWidget)
{ui->setupUi(this);// 初始化圖表graph = chartPlot->addGraph();// graph->addData(1,1);// graph->addData(2,3);// 初始化設置// chartPlot->xAxis->setRange(1, 4096);// chartPlot->yAxis->setRange(-1, 350); // 假設灰度值的范圍為0-255// chartPlot->xAxis->setLabel("Pixel");// chartPlot->yAxis->setLabel("Gray Value");QVBoxLayout* layout = new QVBoxLayout;layout->addWidget(ui->title);layout->addWidget(chartPlot);chartPlot->setSizePolicy(QSizePolicy::Policy(QSizePolicy::Preferred), QSizePolicy::Policy(QSizePolicy::Expanding));//layout->addWidget((QWidget)horizontalScrollBar);setLayout(layout);// init();}WaveWidget::~WaveWidget()
{delete ui;
}void WaveWidget::init(bool isShowTicks, bool isShowTickLables, bool isShowGrid, bool isShowSubGrid, bool isShowAxis2, bool isGraphBigAndSmall)
{time = QTime::currentTime();// 刻度顯示chartPlot->xAxis->setTicks(isShowTicks);chartPlot->yAxis->setTicks(isShowTicks);// 刻度值顯示chartPlot->xAxis->setTickLabels(isShowTickLables);chartPlot->yAxis->setTickLabels(isShowTickLables);// 網格顯示chartPlot->xAxis->grid()->setVisible(isShowGrid);chartPlot->yAxis->grid()->setVisible(isShowGrid);// 子網格顯示chartPlot->xAxis->grid()->setSubGridVisible(isShowSubGrid);chartPlot->yAxis->grid()->setSubGridVisible(isShowSubGrid);// 右和上坐標軸、刻度值顯示chartPlot->xAxis2->setVisible(isShowAxis2);chartPlot->yAxis2->setVisible(isShowAxis2);chartPlot->yAxis2->setTicks(isShowAxis2);chartPlot->yAxis2->setTickLabels(isShowAxis2);// make top right axes clones of bottom left axes. Looks prettier:
//    chartPlot->axisRect()->setupFullAxesBox();// make left and bottom axes always transfer their ranges to right and top axes:if(isShowAxis2){connect(chartPlot->xAxis, SIGNAL(rangeChanged(QCPRange)), chartPlot->xAxis2, SLOT(setRange(QCPRange)));connect(chartPlot->yAxis, SIGNAL(rangeChanged(QCPRange)), chartPlot->yAxis2, SLOT(setRange(QCPRange)));}// 暗色主題//setPlotTheme(Qt::white, Qt::black);// 亮色主題setTheme(Qt::black, Qt::white);if(isGraphBigAndSmall){// 可放大縮小和移動chartPlot->setInteractions(QCP::iRangeDrag | QCP::iRangeZoom);}// x軸以時間形式顯示QSharedPointer<QCPAxisTickerTime> timeTicker(new QCPAxisTickerTime);timeTicker->setTimeFormat("%h:%m:%s");chartPlot->xAxis->setTicker(timeTicker);chartPlot->axisRect()->setupFullAxesBox();chartPlot->replot();
}void WaveWidget::setTheme(QColor axis, QColor background)
{
//----------------------------------------------------------------------------------------//// 坐標標注顏色chartPlot->xAxis->setLabelColor(axis);chartPlot->yAxis->setLabelColor(axis);// 坐標刻度值顏色chartPlot->xAxis->setTickLabelColor(axis);chartPlot->yAxis->setTickLabelColor(axis);// 坐標基線顏色和寬度chartPlot->xAxis->setBasePen(QPen(axis, 1));chartPlot->yAxis->setBasePen(QPen(axis, 1));// 坐標主刻度顏色和寬度chartPlot->xAxis->setTickPen(QPen(axis, 1));chartPlot->yAxis->setTickPen(QPen(axis, 1));// 坐標子刻度顏色和寬度chartPlot->xAxis->setSubTickPen(QPen(axis, 1));chartPlot->yAxis->setSubTickPen(QPen(axis, 1));// 坐標標注顏色chartPlot->xAxis2->setLabelColor(axis);chartPlot->yAxis2->setLabelColor(axis);// 坐標刻度值顏色chartPlot->xAxis2->setTickLabelColor(axis);chartPlot->yAxis2->setTickLabelColor(axis);// 坐標基線顏色和寬度chartPlot->xAxis2->setBasePen(QPen(axis, 1));chartPlot->yAxis2->setBasePen(QPen(axis, 1));// 坐標主刻度顏色和寬度chartPlot->xAxis2->setTickPen(QPen(axis, 1));chartPlot->yAxis2->setTickPen(QPen(axis, 1));// 坐標子刻度顏色和寬度chartPlot->xAxis2->setSubTickPen(QPen(axis, 1));chartPlot->yAxis2->setSubTickPen(QPen(axis, 1));// 整個畫布背景色chartPlot->setBackground(background);// 繪圖區(qū)域背景色chartPlot->axisRect()->setBackground(background);// 刷新繪圖chartPlot->replot();
}void WaveWidget::setXAxisLable(const char *name, const char* name2)
{chartPlot->xAxis->setLabel(name);if(strlen(name2)!=0)chartPlot->xAxis2->setLabel(name2);chartPlot->replot();
}void WaveWidget::setYAxisLable(const char *name, const char* name2)
{chartPlot->yAxis->setLabel(name);if(strlen(name2)!=0)chartPlot->yAxis2->setLabel(name2);chartPlot->replot();
}void WaveWidget::setPen(Qt::GlobalColor penColor, QCPGraph::LineStyle lineStyle, QColor brushColor, bool isShow)
{graph->setPen(QPen(penColor)); // 設置線條顏色為藍色graph->setLineStyle(lineStyle); // 設置線型為直線graph->setVisible(isShow);chartPlot->graph()->setBrush(QBrush(brushColor));chartPlot->replot();
}void WaveWidget::addNewData(double data)
{// 系統(tǒng)當前時間 = 系統(tǒng)運行初始時間 + 系統(tǒng)運行時間static double start = time.hour()*60*60 + time.minute()*60 + time.second() + time.msec()/1000.0;double key = start + time.elapsed()/1000.0;// 設置時間軸chartPlot->xAxis->setRange(key, timeRange, Qt::AlignRight);//chartPlot->rescaleAxes();// 刷新繪圖水平滾動條//horizontalScrollBar.setRange(int(start), int(key));  // 刷新滾動條的范圍//horizontalScrollBar.setPageStep(1);                  // 設置翻頁步長為 1s 的寬度//horizontalScrollBar.setValue(int(key));              // 調整滑塊位置到最右邊// 更新曲線繪圖chartPlot->graph()->addData(key, data);chartPlot->replot(QCustomPlot::rpQueuedReplot);// 存儲曲線的當前值graphData.push_back(data);sum += data;
}void WaveWidget::setTitle(const char *name)
{ui->title->setText(name);
}double WaveWidget::getMax()
{return *std::max_element(graphData.begin(),graphData.end());
}double WaveWidget::getMin()
{return *std::min_element(graphData.begin(),graphData.end());
}double WaveWidget::getAverage()
{return 1.0*sum/(graphData.size());
}QCustomPlot *WaveWidget::getTheChartPlot()
{return   chartPlot;
}QCPGraph *WaveWidget::getTheGraph()
{return  graph;
}vector<double> &WaveWidget::getTheVector()
{return graphData;
}

5.測試demo：

新建測試界面：

提升為剛剛的類：

效果：

測試：

    ui->setupUi(this);// 初始化：可以設置參數ui->waveWidget->init();// 可選設置：ui->waveWidget->setXAxisLable("Time");ui->waveWidget->setYAxisLable("Value");ui->waveWidget->setPen(Qt::blue, QCPGraph::lsLine, QColor( 36,141,218,255));ui->waveWidget->setTheme(Qt::red, Qt::white);ui->waveWidget->setTitle("Wave Chart Test");// 測試加入數據：QTimer *timer = new QTimer(this);connect(timer,&QTimer::timeout,[=](){ui->waveWidget->addNewData((qrand()%1000)/1000.0);qDebug()<<"max:"<<ui->waveWidget->getMax()<<"   min:"<<ui->waveWidget->getMin()<<"  average:"<<ui->waveWidget->getAverage();if(num%10==0){qDebug()<<"size: "<<ui->waveWidget->getTheVector().size();ui->waveWidget->getTheVector().clear();qDebug()<<"size: "<<ui->waveWidget->getTheVector().size()<<"********";}if(num>50){timer->stop();}num++;});timer->start(100);