QML 往图表添加文字显示

news2024/11/17 9:33:01

需求: 需要在图表的某几个点上,添加相应的文字显示。效果如下:

 主要是,如何将坐标进行转化为图表的相对坐标,然后动态创建文本后,将转换坐标设置到Text中。

演示demo。需要点击Text按钮后,图表显示。

import QtQuick 2.12
import QtQuick.Controls 2.12
import Qt.labs.qmlmodels 1.0
import QtQuick.Layouts
import QtCharts 2.15

Item {
    id: item
    width: 440
    height: 330
    property bool sourceLoaded: false
    property int timer: 0
    Column{
        Rectangle{
            width:1024
            height: 100
            Button{

                width:100
                height: 100
                text:"test"
                onClicked: {

                    // 动态返回的数据
                    var test = {"1690339907226":29.75,"1690339912226":29.6299991607666,"1690339917226":29.6299991607666,"1690339922226":29.649999618530275,"1690339927226":29.93000030517578,"1690339932226":29.75,"1690339937226":29.790000915527345,"1690339942228":29.93000030517578,"1690339948226":80,"1690339953226":29.56999969482422,"1690339958226":29.649999618530275,"1690339963226":29.690000534057618,"1690339974171":79}
                    var firstKey = Object.keys(test)[0];

                    var keys = Object.keys(test);
                    var lastKey = keys[keys.length-1]

                    console.log("firstKey",firstKey)
                    console.log("lastKEY",lastKey)
                    myAxisX.min = new Date(parseInt(firstKey))
                    myAxisX.max = new Date(parseInt(lastKey))

                    lineSeries.clear();
                    for(let key in test) {
                        lineSeries.append(parseInt(key),test[key]);
                        console.log("x",parseInt(key))
                        console.log("y",test[key])
                    }
                    // 坐标位置转换
                    var p = chartView.mapToPosition(Qt.point(1690339974171,80), lineSeries);
                    var p1 = chartView.mapToPosition(Qt.point(1690339907226,29.6299991607666), lineSeries);

                    var temp = Qt.createQmlObject("import QtQuick 2.3;  Text {text: '"+"hello"+"'; }", chartView, "")
                            temp.x = p.x
                            temp.y = p.y
                    var temp1 = Qt.createQmlObject("import QtQuick 2.3;  Text {text: '"+"hello"+"'; }", chartView, "")
                            temp1.x = p1.x
                            temp1.y = p1.y
                }

            }

        }
        ListModel{
            id: testModel
        }
        Rectangle{
            width: 1024
            height: 500
            ChartView {
                id: chartView
                anchors.fill: parent
                title: "XXX数据读取"
                antialiasing: true
                backgroundColor: "#9917719b"
                animationOptions: ChartView.SeriesAnimations
                titleColor: "#ccffffff"
                titleFont.bold: true
                titleFont.family: "方正粗倩_GBK"
                titleFont.pointSize: 15
                legend.visible:false
                margins.left: 10
                margins.right: 10
                margins.top: 10
                margins.bottom: 10

                DateTimeAxis {
                    id: myAxisX
                    //             min: new Date()
                    //             max: new Date(new Date().getTime() + 10000)
                    labelsColor: "#ffffff"
                    labelsFont.pointSize: 13
                    labelsFont.bold: true
                    format: "yyyy-MM-dd hh:mm:ss"
                }
                ValuesAxis{
                    id:myAxisY
                    min:0
                    max:100
                    tickCount: 6
                    labelsColor: "#ffffff"
                    labelsFont.pointSize: 13
                    labelsFont.bold: true
                    labelFormat: '%d'
                }


                LineSeries {
                    id:lineSeries
                    name: "LineSeries"
                    axisX: myAxisX
                    axisY:myAxisY
                    color: "#00ffff"
                    width: 3
                    //            XYPoint{x:new Date().getTime(); y:11}
                    //            XYPoint{x:new Date().getTime() + 1000; y:22}
                    //            XYPoint{x:new Date().getTime() + 2000; y:11}
                    //            XYPoint{x:new Date().getTime() + 3000; y:22}
                    //            XYPoint{x:new Date().getTime() + 4000; y:11}
                    //            XYPoint{x:new Date().getTime() + 5000; y:22}
                    Component.onCompleted: {


                    }
                }
                // 放大缩小功能
                MouseArea{
                    id:mosuearea
                    anchors.fill: parent

                    property point clickPos: "0,0"


                    onWheel: {
                        if(wheel.angleDelta.y > 0)
                        {
                            chartView.zoom(1.1 )
                        }else
                        {
                            chartView.zoom(0.9)
                        }
                    }
                    onPressed: {
                        clickPos  = Qt.point(mouse.x,mouse.y)
                    }


                    onPositionChanged: {
                        var delta = Qt.point(mouse.x-clickPos.x, mouse.y-clickPos.y)

                        if(delta.x > 30)
                        {
                            chartView.scrollLeft(30)
                        }
                        else if(delta.x< -30)
                        {
                            chartView.scrollLeft(-30)
                        }else
                        {
                            chartView.scrollLeft(delta.x)
                        }

                        if(delta.y > 30)
                        {
                            chartView.scrollUp(30)
                        }
                        else if(delta.y< -30)
                        {
                            chartView.scrollUp(-30)
                        }else
                        {
                            chartView.scrollUp(delta.y)
                        }

                        clickPos  = Qt.point(mouse.x,mouse.y)
                    }
                }


            }


        }

    }





}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/797460.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

如何为WordPress博客网站配置自己购买的域名,并且公网可访问?

文章目录 如何为WordPress博客网站配置自己购买的域名&#xff0c;并且公网可访问&#xff1f;前置条件&#xff1a;具体操作步骤如下&#xff1a;步骤1: 后台预留自定义域名步骤2: 配置您的域名DNS解析步骤3: 测试域名解析步骤4: 在前台终端测试运行步骤4: 修改cpolar配置文件…

等保测评需要做几次?做一次以后还需要做吗?

虽然我国等保政策已经严格落地执行了&#xff0c;但不少企业对于等保测评相关政策还不是很了解&#xff0c;有人在问&#xff0c;等保测评需要做几次&#xff1f;做一次以后还需要做吗&#xff1f;今天我们就来简单回答一下吧&#xff01; 等保测评需要做几次&#xff1f;做一…

【无公网IP】在公网环境下Windows远程桌面Ubuntu 18.04

文章目录 一、 同个局域网内远程桌面Ubuntu1. 更新软件仓库2. 安装支持包3. 安装XFCE4桌面环境4. 安装XRDP5. 环境设置5.1 XFCE桌面配置5.2 在配置文件中&#xff0c;加入XFCE会话 6 重启服务7. 查看IP地址8. 使用Windows远程桌面连接 二、公网环境系统远程桌面Ubuntu1. 注册cp…

如何恢复U盘数据 U盘数据恢复图文教程

u盘是我们日常生活中很常用到的存储设备&#xff0c;我们会经常用到u盘去保存重要的数据或文件&#xff0c;但是使用的频率多了&#xff0c;有时候也会因为一些原因&#xff0c;出现各种各种的异常问题&#xff0c;就比如说u盘数据丢失。那&#xff0c;当u盘数据丢失后还可以恢…

金山云与平凯星辰达成全面战略合作 技术创新模式助力企业数字化转型

在新型经济形态下&#xff0c;云计算成为数字化发展的必然方向&#xff0c;互联网、金融、医疗等行业的企业纷纷加速数字经济转型。2023 年&#xff0c;金山云与企业级开源分布式数据库厂商平凯星辰&#xff08;PingCAP&#xff09;达成战略合作&#xff0c;顺应技术创新与行业…

python 之 浮点数精度丢失例如:0.1 + 0.2,产生的原因、问题的推导、解决的方案

一、背景 计算机基本上使用二进制数字&#xff0c;即 0 或 1表示&#xff1b; 十进制&#xff1a; 1 / 3 0.3333333333… 无限循环的情况 浮点数的总数是无限且不可数的&#xff0c;浮点数在计算机占用的内存是有限的&#xff0c;如果表示计算机内存则占满 不可能用有限的内存…

Kafka 入门到起飞系列 - 到底什么是再平衡?谁来执行再平衡呢?什么是组协调器呢?

再平衡&#xff08;Rebalance&#xff09; 本质上是一种协议&#xff0c;规定了一个消费组中所有消费者如何达成一致来分配订阅主题的每个分区 其实就是建立分区和消费者映射关系的这么一个过程&#xff0c;最终主题下的一个分区只会分配给一个消费者 比如有10个分区&#xff…

个人博客系统 -- 登录页面添加图片验证码

目录 1. 功能展示 2. 前段代码 3. 后端代码 1. 功能展示 在登录页面添加验证码登录 1. 检测到没有输入验证码或者输入的验证码错误时,进行弹窗提示.并且刷新当前验证码图片 2. 点击验证码进行刷新 2. 前段代码 1. 添加验证码标签,在密码的下面,在login.html进行修改 主要…

多模态预训练 + 自监督学习 + 下游任务介绍

预训练 1&#xff09;特征提取要解决的问题是怎么分别量化文字和图像&#xff0c;进而送到模型学习? 特征抽取&#xff1a; 文本&#xff1a;倾向于bert等大模型 图像&#xff1a;神经网络&#xff0c;VIT等 2&#xff09;特征融合要解决的问题是怎么让文字和图像的表征交…

基于Java+SpringBoot+vue前后端分离社区医院信息平台设计实现

博主介绍&#xff1a;✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专…

Hadoop_HDFS_常见的文件组织格式与压缩格式

参考资料 1. HDFS中的常用压缩算法及区别_大数据_王知无_InfoQ写作社区 2. 本文主要介绍下HDFS上的常见文件格式和压缩格式 总结 : HDFS 中常见的文件存储格式 textfile &#xff1a;行式存储格式sequencefile &#xff1a;行式存储格式orc &#xff1a;列式存储格式, 支…

Deployment 升级应用2

上次我们说到自己手动的做使用 RS 的方式来升级 pod &#xff0c;感觉还是蛮复杂的&#xff0c;并且容易弄错&#xff0c;实际生产过程中&#xff0c;肯定不会这样来弄&#xff0c;很危险 那么今天我们来分享 Deployment 的方式来显示的升级应用吧 Deployment 的方式升级应用…

3dmax崩溃后如何恢复文件?

当意外或突然关闭 3ds Max 场景时&#xff0c;有时会出现恢复 3ds Max 场景的问题。在处理任何项目的过程中&#xff0c;有时需要恢复 3ds Max 场景&#xff0c;为此在专用文件夹中创建备份副本。如果您使用的是 Windows 操作系统并且未更改项目位置或不知道项目位置&#xff0…

如何通过nginx代理实现外网访问内网mysql或oracle数据库

项目开发部署中经常会遇到MySQL或Oracle数据库安装在内网&#xff0c;而我们的应用服务只能部署在外网&#xff0c;如果实现外网服务访问连接内网的数据库呢&#xff1f;本次介绍如何通过Nginx配置实现外网访问内网数据库。 1、前置机服务器 首先要保证有一台前置机服务器既可…

为Android构建现代应用——主体结构

创建Screents和ViewModels 在前面的章节中&#xff0c;我们已经分析了OrderNow项目的理论概念和我们将赋予的组织。 在本章中&#xff0c;我们将开始实现初始结构和模板&#xff0c;这将联接每一个应用程序的部分。 首先将添加以下带有各自视图模型的主屏幕&#xff1a; •…

到底什么是前后端分离

目录 Web 应用的开发主要有两种模式&#xff1a; 前后端不分离 前后端分离 总结 Web 应用的开发主要有两种模式&#xff1a; 前后端不分离 前后端分离 理解它们的区别有助于我们进行对应产品的测试工作。 前后端不分离 在早期&#xff0c;Web 应用开发主要采用前后端不…

“云上新气象”,VDI+IDV混合部署,麒麟信安云正式上线某市气象局!

阴晴冷暖&#xff0c;风云变幻&#xff0c;气象与人们的生活密切相关&#xff0c;气象局信息系统的智慧高效运营对于提升灾害防御能力、城市气象观测等方面具有重要作用&#xff0c;随着气象业务范围的不断扩展&#xff0c;气象局的信息化建设与数字化转型也亟需提上日程。 走…

【Solr】Solr搜索引擎使用

文章目录 一、什么是Solr?二 、数据库本身就支持搜索啊,干嘛还要搞个什么solr?三、如果我们想要使用solr那么首先我们得安装它 一、什么是Solr? 其实我们大多数人都使用过Solr,也许你不会相信我说的这句话,但是事实却是如此啊 ! 每当你想买自己喜欢的东东时,你可能会打开某…

Python入门准备

安装并配置Python 1、想要更新终端里Python的版本&#xff1a; 在python.org官网上下载最新版&#xff0c;下载安装以后&#xff0c;在终端输入python3进行询问。 2、完成Python环境的安装(Linux:操作系统&#xff0c;基于Cent0S7&#xff09; 在Linux系统上安装Python需要…

中小学分班查询系统如何制作?这个方法3分钟轻松搞定

暑假一过完&#xff0c;新学年即将开始&#xff0c;学校面临着一个重要的任务&#xff1a;学生分班。无论是新生入学还是低年级升高年级&#xff0c;都需要进行分班工作。这对负责分班的老师们来说&#xff0c;增加了相当大的工作量和挑战。 在开学前&#xff0c;如何快速搞定…