? ? ? ? 這里在QML中使用QCustomPlot是定義一個繼承自QQuickPaintedItem的類，它包含一個QCustomPlot對象，在paint函數(shù)中將這個對象轉(zhuǎn)化為pixmap繪制到布局中顯示。

在QML中使用QT的Widget控件也可以借鑒這個思路實(shí)現(xiàn)

順便記錄一下QCustomPlot的簡單設(shè)置與使用。

QCustomPlot可以直接到官網(wǎng)下載源碼。

main.cpp中添加代碼，將C++類注冊為QML組件

#include "plot/liquidheightplot.h"
...int main(int argc, char *argv[])
{
...qmlRegisterType<LiquidHeightPlot>("LiquidHeightPlot", 1, 0, "LiquidHeightPlot");
...
}

類定義liquidheightplot.h

#ifndef LIQUIDHEIGHTPLOT_H
#define LIQUIDHEIGHTPLOT_H#include "qcustomplot/qcustomplot.h"
#include <QQuickItem>
#include <QQuickPaintedItem>
#include <QVector>
#include <QJsonObject>class LiquidHeightPlot : public QQuickPaintedItem
{Q_OBJECT
public:explicit LiquidHeightPlot(QQuickItem *parent = nullptr);~LiquidHeightPlot();//更新實(shí)時數(shù)據(jù)Q_INVOKABLE void updateRealData(double value);//設(shè)置歷史數(shù)據(jù)Q_INVOKABLE void setHistoryData(QJsonObject data);//清除數(shù)據(jù)Q_INVOKABLE void clearData();signals:void sigIllegalData();private:virtual void paint(QPainter *painter);private:QCustomPlot *m_customPlot;double                  m_maxY;QVector<double>         m_x1;QVector<double>         m_y1;
};#endif // LIQUIDHEIGHTPLOT_H

類實(shí)現(xiàn)liquidheightplot.cpp

#include "liquidheightplot.h"
#include <QDateTime>
#include <QStringList>LiquidHeightPlot::LiquidHeightPlot(QQuickItem *parent): QQuickPaintedItem(parent), m_customPlot(nullptr)
{m_customPlot = new QCustomPlot();m_customPlot->rescaleAxes(true);//設(shè)置軸 ============================QFont font;font.setPixelSize(16);m_customPlot->xAxis->setLabelFont(font);m_customPlot->yAxis->setLabelFont(font);m_customPlot->xAxis->setLabel(tr("時間"));m_customPlot->yAxis->setLabel(tr("液位高度(cm)"));m_customPlot->xAxis->setLabelColor(QColor(Qt::gray));//軸標(biāo)體色m_customPlot->yAxis->setLabelColor(QColor(Qt::gray));m_customPlot->xAxis->setBasePen(QPen(QColor(Qt::gray), 1));//軸色m_customPlot->yAxis->setBasePen(QPen(QColor(Qt::gray), 1));m_customPlot->xAxis->setTickPen(QPen(QColor(Qt::gray), 1));//軸主標(biāo)色m_customPlot->yAxis->setTickPen(QPen(QColor(Qt::gray), 1));m_customPlot->xAxis->setSubTickPen(QPen(QColor(Qt::gray), 1));//軸次標(biāo)色m_customPlot->yAxis->setSubTickPen(QPen(QColor(Qt::gray), 1));font.setPixelSize(14);m_customPlot->xAxis->setTickLabelFont(font);m_customPlot->yAxis->setTickLabelFont(font);m_customPlot->xAxis->setTickLabelColor(QColor(Qt::gray));//軸標(biāo)文本色m_customPlot->yAxis->setTickLabelColor(QColor(Qt::gray));m_customPlot->setBackground(QBrush(QColor(Qt::white)));m_customPlot->setGeometry(0, 0, width()*1.6, height()*1.6);m_customPlot->setMultiSelectModifier(Qt::KeyboardModifier::ControlModifier);//設(shè)置邊距QCPMarginGroup *marginGroup = new QCPMarginGroup(m_customPlot);m_customPlot->plotLayout()->setMargins(QMargins(0, 0, 0, 0));m_customPlot->axisRect()->setMarginGroup(QCP::msLeft | QCP::msRight | QCP::msTop | QCP::msBottom, marginGroup);//設(shè)置時間軸QSharedPointer<QCPAxisTickerDateTime> dateTicker(new QCPAxisTickerDateTime);dateTicker->setDateTimeFormat("yyyyMMdd\nhh:mm");m_customPlot->xAxis->setTicker(dateTicker);QString sCurrent = QDateTime::currentDateTime().toString("yyyyMMdd hh:00:00");QDateTime current = QDateTime::fromString(sCurrent, "yyyyMMdd hh:mm:ss");m_customPlot->xAxis->setRange(current.toTime_t(), current.toTime_t() + 1800);//默認(rèn)顯示時間軸當(dāng)前半小時//縱軸QSharedPointer<QCPAxisTicker> ticker(new QCPAxisTicker);m_customPlot->yAxis->setTicker(ticker);m_customPlot->yAxis->setRange(0, 200);//添加數(shù)據(jù)曲線圖形m_customPlot->addGraph();m_customPlot->graph(0)->setPen(QPen(Qt::blue));//顯示圖例QCPLegend * legend = m_customPlot->legend;m_customPlot->legend->setVisible(true);legend->setFont(font);legend->setBrush(QColor(Qt::gray));legend->setTextColor(QColor(Qt::white));m_customPlot->graph(0)->setName("液位曲線");//設(shè)置clearData();
}LiquidHeightPlot::~LiquidHeightPlot()
{m_customPlot->deleteLater();m_customPlot = nullptr;
}void LiquidHeightPlot::paint(QPainter *painter)
{m_customPlot->setGeometry(0,0,this->width()*1.6,this->height()*1.6);painter->drawPixmap(0,0,this->width(),this->height(), m_customPlot->toPixmap());
}//更新實(shí)時數(shù)據(jù)
void LiquidHeightPlot::updateRealData(double value)
{QDateTime current = QDateTime::currentDateTime();if(m_x1.size() == 0) {//第一幀實(shí)時數(shù)據(jù)m_customPlot->xAxis->setRange(current.toTime_t(), current.toTime_t() + 1800);}if(m_x1.size() > 0 && m_x1.last() == current.toTime_t()) return;//同一時間的數(shù)據(jù)while (m_x1.size() >= 30) {//半小時，30個數(shù)據(jù)m_x1.takeFirst();m_y1.takeFirst();}m_x1.push_back(current.toTime_t());m_y1.push_back(value);if(m_maxY < value) {//更新最大值m_maxY = value;m_maxY = (m_maxY / 10 + 1) * 10;m_customPlot->yAxis->setRange(0, m_maxY);}if(m_x1.size() == 30) m_customPlot->xAxis->setRange(m_x1.first(), m_x1.last());//更新軸m_customPlot->graph(0)->setData(m_x1, m_y1);m_customPlot->replot();//刷新曲線update();//刷新顯示
}//設(shè)置歷史數(shù)據(jù)
//"data": {
//    "maxLiquidLevelHeight": "68,88",
//    "minLiquidLevelHeight": "68,88",
//    "time": "2023-01-02 22:59:59,2023-01-02 23:59:59",
//  }
void LiquidHeightPlot::setHistoryData(QJsonObject data)
{QString maxLiquidLevelHeight = data["maxLiquidLevelHeight"].toString();QString times = data["time"].toString();maxLiquidLevelHeight.remove('\n');times.remove('\n');QStringList heightList = maxLiquidLevelHeight.split(",", QString::SkipEmptyParts);QStringList timeList = times.split(",", QString::SkipEmptyParts);if (heightList.count() != timeList.count()) {qDebug() << "LiquidHeightPlot::setHistoryData error heightList.count() != timeList.count() !";return;}for (int i = 0; i < heightList.count(); i++) {QDateTime time = QDateTime::fromString(timeList[i], "yyyy-MM-dd HH:mm:ss");qDebug() << "LiquidHeightPlot::setHistoryData time isValid " << time.isValid() << time;if(!time.isValid()) {//存在非法數(shù)據(jù)emit sigIllegalData();return;}uint value = heightList[i].toInt();m_x1.append(time.toTime_t());m_y1.append(value);if(m_maxY < value) {//更新最大值m_maxY = value;m_maxY = (m_maxY / 10 + 1) * 10;m_customPlot->yAxis->setRange(0, m_maxY);}}m_customPlot->xAxis->setRange(m_x1.first(), m_x1.last());m_customPlot->graph(0)->setData(m_x1, m_y1);m_customPlot->replot();//刷新曲線update();//刷新顯示qDebug() << "LiquidHeightPlot::setHistoryData m_x1" << m_x1 << ",\n m_y1" << m_y1;
}//清除數(shù)據(jù)
void LiquidHeightPlot::clearData()
{qDebug() << "LiquidHeightPlot::clearData ---------------------------------";m_maxY = 200;m_x1.clear();m_y1.clear();m_customPlot->graph(0)->setData(m_x1, m_y1);m_customPlot->replot();//刷新曲線update();//刷新顯示
}

QML的使用

import LiquidHeightPlot 1.0Item {id: root
...LiquidHeightPlot {id: liquidHeightPlotanchors.fill: parentonSigIllegalData: {popuTip.text = qsTr("數(shù)據(jù)異常 ！");popuTip.visible = true;}}
...
}