在Qml中使用QCustomPlot

已于 2024-08-22 17:19:40 修改
阅读量1.5k 收藏 12
点赞数 31
CC 4.0 BY-SA版权
分类专栏： Qt 实战应用 文章标签： c++ Qt qml QCustomPlot
于 2024-06-18 15:45:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_41898196/article/details/139775140

QmlQCustomPlot

基于 QCustomPlot，一个支持在 Qml 中使用的简单包

version

目录

🔔工程下载

GitHub源码下载：https://github.com/MrHulu/QmlQCustomPlot

优快云资源下载 (积分)：https://download.youkuaiyun.com/download/qq_41898196/89450306

🔔快速开始

使用cmake构建

在你的工程目录内创建一个目录, 假设你为改目录命名为QmlQCustomPlot, 本仓库的src目录是一个独立的模块,
可直接拷贝src里面的所有文件到你的QmlQCustomPlot目录内, 然后在你的项目适当的CMakeList.txt里链接这个模块即可

使用qmake构建

在你的工程目录内创建一个目录, 假设你为改目录命名为QmlQCustomPlot, 拷贝src里面的所有文件(除了CMakeLists.txt)到你的QmlQCustomPlot目录内, 创建一个名为QmlQCusomPlot.pri的文件, 内容如下:

# QmlQCusomPlot.pri

HEADERS += $$files(*.h)
SOURCES += $$files(*.cpp *.cc)

QT += core gui quick widgets printsupport

QTPLUGIN += qmlplugin
QML_IMPORT_PATH = $$PWD
QML_FILE_EXTENSIONS += .qml

# Setting the C++ standard (C++11 is assumed to be used here, adjust as appropriate)
CONFIG += c++11

# Linking Qt libraries
LIBS += -lQt5Core \
        -lQt5Gui \
        -lQt5Quick \
        -lQt5Widgets \
        -lQt5PrintSupport

接下来，在你的.pro文件中包含这个.pri文件，例如，如果你的项目名为MyProject.pro，则在该文件中添加以下行：

# MyProject.pro

TEMPLATE = app
TARGET = MyProject

# Include QmlQCustomPlot modules
include(QmlQCusomPlot.pri)

# Other...

🔔讨论

  1. 截止到2024年05月27日，目前作者还没有实现直接支持qml的QCustomPlot，但是我联系了作者，作者有说在实施但是具体上线时间没有一个实际的计划。
  2. QCustomPlot源码中虽然很多属性使用了Q_PROPERTY,但是没有信号导致无法对QML的属性绑定提供支持。所以封装为可以提供Qml使用的类需要的工作量巨大😭，我只封装了一部分，如果无法满足你的需求，可以直接修改源码，应该很简单。
  3. 一些其他的参考：https://www.qcustomplot.com/index.php/support/forum/172

🔔UML
1
*
1
4
1
1
1
1
Graph
- QCustomPlot* m_parentPlot
- QCPGraph* m_graph
Q_PROPERTY(bool visible READ visible WRITE setVisible NOTIFY visibleChanged)
Q_PROPERTY(bool antialiased READ antialiased WRITE setAntialiased NOTIFY antialiasedChanged)
Q_PROPERTY(QString name READ name WRITE setName NOTIFY nameChanged)
Q_PROPERTY(LineStyle lineStyle READ lineStyle WRITE setLineStyle NOTIFY lineStyleChanged)
Q_PROPERTY(QColor graphColor READ graphColor WRITE setLineColor NOTIFY graphColorChanged)
Q_PROPERTY(int graphWidth READ graphWidth WRITE setLineWidth NOTIFY graphWidthChanged)
Q_ENUM(LineStyle)
enum LineStyle(lsNone, lsLine, lsStepLeft, lsStepRight, lsStepCenter, lsImpulse)
+Graph(QCustomPlot* parentPlot)
+~Graph()
+void setData(const QVector& x, const QVector& y)
+void addData(double x, double y)
+void removeDataBefore(double x)
+void clearData()
-updateProperty()
QObject
Axis
- QCustomPlot* m_parentPlot
- QCPAxis* m_axis
- Grid* m_grid
- Ticker* m_ticker
Q_PROPERTY(bool visible READ visible WRITE setVisible NOTIFY visibleChanged)
Q_PROPERTY(QString label READ label WRITE setLabel NOTIFY labelChanged)
Q_PROPERTY(float upper READ upper WRITE setUpper NOTIFY upperChanged)
Q_PROPERTY(float lower READ lower WRITE setLower NOTIFY lowerChanged)
Q_PROPERTY(Grid* grid READ grid CONSTANT)
Q_PROPERTY(Ticker* ticker READ Ticker NOTIFY TickerChanged)
Q_ENUM(TickerType)
enum TickerType(Fixed, Log, Pi, Text, DateTime, Time)
+Axis(QCPAxis* axis, QObject* parent)
+~Axis()
+setTickerType(TickerType type)
+setRange(float position, float size, Qt::AlignmentFlag align)
+setTicker(QSharedPointer ticker)
-updateProperty()
Grid
- QCustomPlot* m_parentPlot
- QCPGrid* m_qcpgrid
Q_PROPERTY(bool visible READ visible WRITE setVisible NOTIFY visibleChanged)
Q_PROPERTY(bool subVisible READ subVisible WRITE setSubVisible NOTIFY subVisibleChanged)
Q_PROPERTY(int lineWidth READ lineWidth WRITE setLineWidth NOTIFY lineWidthChanged)
Q_PROPERTY(QColor lineColor READ lineColor WRITE setLineColor NOTIFY lineColorChanged)
Q_PROPERTY(LineType lineType READ lineType WRITE setLineType NOTIFY lineTypeChanged)
Q_PROPERTY(int subLineWidth READ subLineWidth WRITE setSubLineWidth NOTIFY subLineWidthChanged)
Q_PROPERTY(QColor subLineColor READ subLineColor WRITE setSubLineColor NOTIFY subLineColorChanged)
Q_PROPERTY(LineType subLineType READ subLineType WRITE setSubLineType NOTIFY subLineTypeChanged)
Q_ENUM(LineType)
enum LineType(NoPen, SolidLine, DashLine, DotLine, DashDotLine, DashDotDotLine)
+Grid(grid, QCustomPlot* parentPlot)
~Grid()
-updateProperty()
Ticker
- QCustomPlot* m_parentPlot
- QSharedPointer m_ticker
Q_PROPERTY(bool ticks READ ticks WRITE setTicks NOTIFY ticksChanged)
Q_PROPERTY(bool subTicks READ subTicks WRITE setSubTicks NOTIFY subTicksChanged)
Q_PROPERTY(int tickCount READ tickCount WRITE setTickCount NOTIFY tickCountChanged)
Q_PROPERTY(QColor tickColor READ tickColor WRITE setTickColor NOTIFY tickColorChanged)
Q_PROPERTY(QColor subTickColor READ subTickColor WRITE setSubTickColor NOTIFY subTickColorChanged)
Q_PROPERTY(QColor baseColor READ baseColor WRITE setBaseColor NOTIFY baseColorChanged)
Q_PROPERTY(int baseWidth READ baseWidth WRITE setBaseWidth NOTIFY baseWidthChanged)
+Ticker(QSharedPointer ticker, QCustomPlot* parentPlot)
+~Ticker()
-updateProperty()
BasePlot
- QCustomPlot* m_customPlot
- QMap m_graphs
Q_PROPERTY(Axis* xAxis READ xAxis CONSTANT)
Q_PROPERTY(Axis* x1Axis READ x1Axis CONSTANT)
Q_PROPERTY(Axis* yAxis READ yAxis CONSTANT)
Q_PROPERTY(Axis* y1Axis READ y1Axis CONSTANT)
Q_PROPERTY(QVariantMap graphs READ graphs NOTIFY graphsChanged)
Q_PROPERTY(QColor backgroundColor READ backgroundColor WRITE setBackgroundColor NOTIFY backgroundColorChanged)
+BasePlot(QQuickItem* parent)
+~BasePlot()
+void addGraph(const QString& key)
+void removeGraph(const QString& key)
+void rescaleAxes(bool onlyVisiblePlottables=false)
+void paint(QPainter *painter)
+QCustomPlot *customPlot()
+const QMap &graphsMap()
+Graph* getGraph(const QString& key)
#void onChartViewReplot()
#void onChartViewSizeChanged()
#virtual void hoverMoveEvent(QHoverEvent *event)
#virtual void mousePressEvent(QMouseEvent* event)
#virtual void mouseReleaseEvent(QMouseEvent* event)
#virtual void mouseMoveEvent(QMouseEvent* event)
#virtual void mouseDoubleClickEvent(QMouseEvent* event)
#virtual void wheelEvent(QWheelEvent *event)
#void routeMouseEvents(QMouseEvent* event)
#void routeWheelEvents(QWheelEvent* event)
QQuickPaintedItem
TimePlot
- QTimer* m_timer
- qint64 m_lastAddedTime
- qint64 m_lastClearTime
Q_PROPERTY(int plotTimeRangeInMilliseconds READ plotTimeRangeInMilliseconds WRITE set_plotTimeRangeInMilliseconds NOTIFY plotTimeRangeInMillisecondsChanged)
+TimePlot(QQuickItem* parent)
+~TimePlot()
+setTimeFormat(const QString &format)
+addCurrentTimeValue(const QString& name, double value)
+addCurrentTimeValues(QVariantMap values)
#virtual void timerEvent(QTimerEvent *event)
#virtual void onTimeOut()
qt qml-如何在QML中使用QCustomPlot之曲线/折线示例
MusicScore的博客
06-26 954
在main.cpp中注册自定义的QML组件。通过以上步骤，你可以在QML中使用QCustomPlot绘制曲线。这种方法将QCustomPlot包装在QQuickPaintedItem中，然后通过在QML中注册和使用这个自定义组件，实现了QML与QCustomPlot的结合。这种方法适用于需要在QML应用中显示复杂图表的场景。
在QML中使用QCustomPlot绘制曲线/折线示例
YjjOle的博客
09-24 1152
在CustomPlot元素中，我们定义了一个addData()函数，它用于在每次定时器触发时添加一个随机数据点。在onPaint事件处理程序中，我们首先清空画布，然后创建一个新的曲线图形对象，并设置其样式和颜色。在上面的示例中，我们创建了一个名为"CustomPlot"的自定义QML组件。QCustomPlot是一个强大的开源库，用于在Qt应用程序中绘制高品质的图表。将上述代码保存为"main.qml"并运行你的应用程序，你将看到一个绘制了实时曲线的窗口。下载最新版本的QCustomPlot。
QML使用QCustomPlot笔记
wangshenqiang的博客
01-11 1784
在QML中使用QCustomPlot，QML使用QT的Widget控件，QML使用QWidget控件，QCustomPlot的设置与使用，QCustomPlot设置时间轴
QML使用QCustomPlot
gyzw_mx的博客
02-16 2925
在 QtQuick 中使用 QCustomPlot 的方法
在Qml中实现QCustomPlot图表绘制.zip
最新发布
weixin_36431145的博客
06-26 824
创建 QCustomPlot 实例后，可以设置一些基本属性来定制图表外观。例如，更改背景颜色、启用抗锯齿、设置坐标轴等。customPlot.plotLayout勢置为整布局此外，还可以设置图表标题和子标题，以提供关于图表内容的更多信息：自定义坐标轴是 QCustomPlot 的另一项强大功能。可以调整刻度间隔、刻度标签格式、轴向文本角度等。QCustomPlot 支持各种事件的处理，包括鼠标事件、拖拽事件、图表项点击事件等。开发者可以利用这些事件来实现交互功能，如缩放、选择数据点等。
基于QtQuick的QCustomPlot实现 (QML 实现)
08-02
QCustomPlot 默认是QWidget实现，该demo可以很好的学习QWidget如何转换qml，详情查看博客 https://blog.youkuaiyun.com/CLinuxF/article/details/98208351
79.qt qml-如何在QML中使用QCustomPlot之曲线/折线示例(已适配黑白风格)
抵抗时间扭曲，坚持做一件有意义的事
03-29 3600
但我们添加完线段后,只需要重新更新下XY轴,然后在调用qcp.replot()重新渲染,图就出来了.所以感兴趣的可以自己去优化一下caurve曲线点的生成. 不过如果时间短的话, 还是建议尽量用折线。剩下的交互篇,本人就暂时没时间提供了,有经验的可以自己添加标记等操作。所以本章我们需要实现在QML中如何使用。我们学习了 qcp简单使用。
20200511-01 基于 QCustomPlot 移植到 QML 上(qt.514)
你学习了吗？咋办，先想法子忽悠成“砖家”呗
05-11 3429
源码下载 一：要点说明 replot() 界面刷新（需要单独调用) replot() 这个函数的作用是用于刷新显示界面，根据文档显示，刷新的方式总共有 4 中： rpImmediateRefresh 立即全局更新（先立即重绘表格，然后调用 QWidget::repaint() 重绘整个 widget rpQueuedRefresh 依次更新（先立即重绘表格，然后调用 QWidget::update() 进行更新，避免多次 repaint() 消耗资源) rpRefreshHint （默认)
使用QCustomPlot绘制曲线/折线是Qt中非常常见的需求。在QML中，我们可以使用QML中的Canvas元素来实现这个功能。
.
04-12 1087
首先，我们需要在QML文件中添加Canvas元素，并指定该元素的id。接着，我们需要在Canvas元素中添加一个onPaint事件处理函数，用于绘制曲线/折线。在该事件处理函数中，我们需要创建QPainterPath对象，并通过该对象绘制曲线/折线。在上述示例程序中，我们创建了一个CustomPlot元素，并在其中添加了一个LineSeries元素，用于绘制曲线/折线。在上述示例程序中，我们创建了一个Canvas元素，并在其onPaint事件处理函数中绘制了一条曲线/折线。
Qt/C++编写自定义控件25-自定义QCustomPlot
Qt/C++视频监控/推流/物联网/大屏系统/自定义控件/UI定制/输入法
06-08 3079
一、前言 上次在写大屏数据可视化电子看板系统时候，提到过改造QCustomPlot来实现柱状分组图、横向柱状图、横向分组图、鼠标悬停提示等。这次单独列出来描述，有很多人疑问为啥不用QChart，或者echart等形式，其实这两种方式我都尝试过，比如Qt5.7以后新增的QChart模块，曲线这块，支持数据量很小，而且用法极其不适应，非常别扭，尤其是10W以上数据量的支持，简直是渣渣，优点也是有很多的...
qmlCustomPlot.zip
05-11
Qml 移植 QCustomPlot 版本，同时内部实现示例，直接可以移植到应用程序中，不过没有做太多 API 接口
基于QtQuick的QCustomPlot实现
03-19
## QtQuick开发需要C++基础和JS基础 * 掌握必要的C++基础是学习和使用QtQuick框架的重要基石 ## QCustomPlot能做什么 * 可以在QWidget大放异彩,绘制各种图表和曲线 * 也可以在QtQuick大展拳脚 ## 基于QtQuick的QCustomPlot实现 * 继承QQuickPaintedItem类 实现绘制
QcustomPlot
10-31
QcustomePlot是qt中画曲线图的一个库，可以方便的画出想要的曲线坐标图
qt下超强绘图控件 QCustomPlot
02-10
qt超强精美绘图控件 - QCustomPlot 详细介绍：http://blog.youkuaiyun.com/czyt1988/article/details/10143141
QCustomPlot示例
03-01
QCustomPlot开发示例，跟股票相关，一个展示的曲线图，别人存下来，以备需要。。。。
QCustomPlot 的使用-折线图和散点图
qq_40501206的博客
07-26 6590
QCustomPlot 的使用 VS+QT+散点图 下载资源 https://www.qcustomplot.com/index.php/download 资源说明 在VS中创建项目，同时将.cpp和.h放到对应的路径下 添加项目，引用 往项目中加入#include ps 编译会出现一个问题Link2019 解决方案： 代码编写 两种鼠标显示数值 .h #pragma once #include <QtWidgets/QWidget> #include "ui
qcustomplot圆_Qt图形图像开发之高性能曲线图模块QCustomplot库详细使用方法与实例(支持动、静曲线图)...
weixin_39983223的博客
12-22 587
Qt曲线图模块QCustomPlot库介绍QCustomPlot是一个小型的Qt画图标类，支持绘制静态曲线、动态曲线、多重坐标曲线，柱状图，蜡烛图等前段时间用QChart模块画图,一条曲线上面放8000条数据就会卡的不行必须要换个其他的控件，后来找到了曲线图模块QCustomplot库这个库性能非常好，画曲线图折线图柱状图动态静态，放大缩小，都很好用，10w条数据量无压力秒画出来一点也不卡下载地址...
QT绘制实时动态曲线——qcustomplot使用（一）
梅山
05-04 7313
下载与安装 要使用qcustomplot，首先需要在官网下载qcustomplot。 下载链接。 下载完成后，打开解压压缩包，添加qcustomplot.c和qcustomplot.h到目标工程文件。 打开工程文件中的examples中的实例。 可以看到有许多工程示例： 动态实时曲线绘制就需要用到setupRealtimeDataDemo这个demo： 源码如下： void MainWindow::setupRealtimeDataDemo(QCustomPlot *customPlot) { dem
qt qml-如何在qml中使用qcustomplot之曲线/折线示例
12-06
在QML中使用QCustomPlot的曲线/折线示例可以通过以下步骤实现： 首先，确保在项目文件中包含QCustomPlot库，并在QML文件中导入QCustomPlot库。 在QML文件中，创建一个QML窗口并添加一个QCustomPlot对象。然后，创建一个QCPGraph对象，并将其添加到QCustomPlot中。在QCPGraph对象中，设置数据点并配置曲线的样式、颜色、线宽等属性。 例如，可以在QML中按照以下步骤配置QCustomPlot的曲线/折线示例： ```qml import QtQuick 2.15 import QtCharts 2.3 Item { id: plotWindow QCustomPlot { id: customPlot anchors.fill: parent // 创建一个曲线对象 QCPGraph { id: graph lineStyle: QCPGraph.LineStyle.lsLine linePen: Qt.rgba(0, 0, 255, 255) // 设置曲线的数据点 data: [ { x: 1, y: 2 }, { x: 2, y: 3 }, { x: 3, y: 1 }, // ... ] } } } ``` 在这个例子中，我们创建了一个QML窗口并在其中添加了一个QCustomPlot对象。然后，我们在QCustomPlot中创建了一个QCPGraph对象，并通过设置data属性来定义曲线的数据点。最后，我们设置了曲线的样式和颜色。 通过以上步骤，就可以在QML中使用QCustomPlot来绘制曲线/折线示例。同时，可以根据具体需求进一步定制曲线的样式和属性，以实现更加丰富多彩的数据可视化效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值