98.qt qml-使用曲线图综合示例、支持多种鼠标交互、支持百万数据显示(已适配黑白风格)

已于 2023-11-22 15:10:00 修改
阅读量1.5k 收藏 1
点赞数 5
分类专栏： Qt Quick/QML入门到精通 文章标签： qt 开发语言
于 2023-11-18 20:47:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37997682/article/details/134482336
版权
Qt Quick/QML入门到精通 专栏收录该内容
104 篇文章 434 订阅 ¥299.90 ¥99.00
订阅专栏

在上章我们只是简单实现了曲线图和折线图的显示：

79.qt qml-如何在QML中使用QCustomPlot之曲线/折线示例(已适配黑白风格)_qml 折线图_诺谦的博客-CSDN博客

所以本章实现综合示例、并添加多种功能如下所示：

  • 详细显示：鼠标任意移动显示具体值内容
  • 鼠标右击: 弹出菜单栏，支持用户对线条进行操作，比如删除线条、
  • 鼠标双击: 对图表进行还原，显示所有线的值   
  • 鼠标拖拽: 鼠标左键按下拖拽，对图表进行框选局部放大    
  • 鼠标滑轮: 对图表进行任意缩放    
  • 鼠标Ctrl+拖拽: 对图表进行左右拖拽

黑色风格界面如下所示：

白色风格界面如下所示：

  

效果如下所示：

了解本专栏 订阅专栏 解锁全文
诺谦
关注
  • 5
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
基于QtQuick的QCustomPlot实现 (QML 实现)
08-02
QCustomPlot 默认是QWidget实现，该demo可以很好的学习QWidget如何转换qml，详情查看博客 https://blog.csdn.net/CLinuxF/article/details/98208351
QT性能优化之QT6框架高性能统计图框架快速展示百万个数据点曲线图
QT界面开发界面美化
07-15 1342
QT性能优化之QT6框架高性能统计图框架快速展示百万个数据点曲线图本文目录：百万个数据点的QT统计图运行效果百万个数据点的QT统计图程序的源代码QT统计图功能和效果展示QT统计图模块(QT Charts)整体结构QT统计图和QT图形视图框架QT统计图和QT模型视图代理框架QT QML中的QT统计图Qt Data Visualization模块。
Qt Quick 渲染机制
billy的博客
04-07 5218
作者：billy 版权声明：著作权归作者所有，商业转载请联系作者获得授权，非商业转载请注明出处
Qt qml ChartView demo 动态数据曲线图显示
10-31
Qt qml ChartView demo 动态数据曲线图显示
【Qt串口波形绘图】基于QCustomPlot的串口波形绘图上位机，源码开放
Mark_md的博客
11-24 8802
之前写了一款串口调试上位机，有很大的功能欠缺，整体感觉十分不爽。这次在原有基础上进行了优化，并且增加了协议帧捕获功能，使用QCustomPlot进行波形绘图的功能，可应用于实时动态绘图。（直男审美，实在不懂UI设计，望吐槽时嘴下留情） GitHub源码仓库：源码下载 波形界面展示： 左侧是绘图区，右侧为控制区。最大可以显示20条曲线，可对波形、散点、背景、坐标进行设置。 绘图散点功能展示： 右侧 曲线/散点设置 的功能，依次为：隐藏/显示、颜色选择、加粗显示、值显示、线...
Qt使用QCustomplot图形库
billy的博客
07-27 3984
作者：billy 版权声明：著作权归作者所有，商业转载请联系作者获得授权，非商业转载请注明出处 前言 在最近的项目中需要显示一些图形和图表，博主感觉Qt自带的 QtCharts 比较简陋，于是往第三方库上考虑。对比了QCustomplot、QWT、ECharts等一些比较热门的图形库，博主这里选择了QCustomplot，这章节记录一下使用过程，方便后期回顾。 QCustomPlot 是一个基于Qt C++的图形库，用于绘制和数据可视化，并为实时可视化应用程序提供高性能服务。它没有进一步的依赖关系，并有着良
QML使用QCustomPlot
gyzw_mx的博客
02-16 1707
在 QtQuick 中使用 QCustomPlot 的方法
QCustomPlot 的使用-折线图和散点图
qq_40501206的博客
07-26 5349
QCustomPlot 的使用 VS+QT+散点图 下载资源 https://www.qcustomplot.com/index.php/download 资源说明 在VS中创建项目，同时将.cpp和.h放到对应的路径下 添加项目，引用 往项目中加入#include ps 编译会出现一个问题Link2019 解决方案： 代码编写 两种鼠标显示数值 .h #pragma once #include <QtWidgets/QWidget> #include "ui
Qt Charts QML下的图形绘制方法
weixin_41922484的博客
02-21 5990
目录一、参考二、简介三、静态绘制曲线图四、动态绘制曲线图和散点图五、如何确定哪些QML对象属性可以被JS调用六、如何确定某些QML属性赋值的格式 一、参考 https://doc.qt.io/qt-5/qtcharts-index.html 二、简介 Qt Charts 提供了一系列使用图表功能的简单方法。它使用Qt Graphics View Framework 图形视图框架，因此可以很容易集成到用户界面。可以使用Qt Charts作为QWidgets, QGraphicsWidget, 或者 Q.
QML绘画曲线图
qq_44690417的博客
10-31 5571
用QML绘画曲线图介绍Charts的引用ChartviewSplineSeriesValueAxisXYPoint示例显示![](https://img-blog.csdnimg.cn/20201031193725966.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjkwNDE3,size_16,color_FFFFFF,t_70#
Qt-QML-Example:Qt，QML示例集合
03-20
Qt-QML-示例 Qt，QML示例集合。 1.QML-ExpandableListView 用QML中的listview来实现树形二级列表（类似android ExpandableListView控件） 2.QML阴影字体 QML实现阴影字体效果，可定义阴影颜色及阴影大小等 3.QML...
qml-backbone-todo:示例项目如何在 QtQML 中使用 Backbone.js 和 zepto.js
07-12
qml-backbone-todo 示例项目如何在 Qt/QML 中使用 、 和 本示例使用 Enginio 数据存储作为数据库。 请查看更多信息##Usage 像往常一样使用 Backbone 模型和集合 // app.jsvar baseUrl = "https://api.engin.io/v1" ;...
qml--ChartView --显示曲线
05-11
该文件实现的功能有： 将C++ 生成的数据， 在QML 中进行曲线显示（ChartView）。
Quick QML-简单且好看的图片浏览器-支持多个图片浏览、缩放、旋转、滑轮切换图片
05-13
资源文章介绍地址:https://www.cnblogs.com/lifexy/p/14762697.html ,Qt版本尽量Qt5.12及以上,支持多个图片浏览、缩放、旋转、滑轮切换图片
QML-图形渲染QtGraphicalEffects
m0_53292003的博客
12-10 28
https://blog.csdn.net/ieearth/article/details/44493427
qml使用opengl渲染yuv
lanxiaziyi的专栏
07-04 5619
qml opengl yuv420p
QML中动态与静态模型应用详解
m0_73443478的博客
06-25 370
QML中动态与静态模型应用详解
79.qt qml-如何在QML中使用QCustomPlot之曲线/折线示例(已适配黑白风格)
抵抗时间扭曲，坚持做一件有意义的事
03-29 2199
但我们添加完线段后,只需要重新更新下XY轴,然后在调用qcp.replot()重新渲染,图就出来了.所以感兴趣的可以自己去优化一下caurve曲线点的生成. 不过如果时间短的话, 还是建议尽量用折线。剩下的交互篇,本人就暂时没时间提供了,有经验的可以自己添加标记等操作。所以本章我们需要实现在QML中如何使用。我们学习了 qcp简单使用。
QT设计模式：外观模式
最新发布
buhuiCyvyan的博客
05-07 313
外观模式（Facade Pattern）是一种设计模式，它提供了一个统一的接口，用于访问子系统中的一群接口，从而简化了客户端与子系统之间的交互，这种方式隐藏了子系统的复杂性，使客户端更容易使用子系统。
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
发出的红包

打赏作者

诺谦

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值