QT:QML制作线形图

目录

一.介绍

二.引入库

三.自定义属性

四.悬停处理函数

五.设置X轴

六.设置Y轴

七.画线

八.测试点坐标

九.设置值

十.效果演示

十一.代码演示

1.LineGraph.qml

2.main.qml


一.介绍

线形图(也称为折线图)是一种常用的数据可视化工具,主要用于展示数据随时间或其他连续变量的变化趋势。它的作用主要包括:

1.趋势展示:线形图能清晰地展示数据随时间的变化,帮助观察者理解数据随时间的发展趋势,如股票价格、气温变化、销售量等。

2.比较分析:可以同时绘制多条线,便于比较不同类别或组别的数据变化,便于找出差异和相似之处。

3.趋势预测:基于历史数据,线形图可以用于预测未来的趋势,为决策提供依据。

4.数据解读:通过观察线的斜率和起伏,可以直观地理解数据的增减速度以及波动的幅度。

5.易于理解:相比于散点图或柱状图,线形图更易于解读,特别是对于连续的变化数据。

6.数据可视化:它是数据可视化中最基础的图表类型之一,对于初学者来说,学习和理解线形图是入门其他复杂图表的基础。

二.引入库

import QtCharts 2.1

QtCharts 是 Qt 提供的一个模块,用于在应用程序中创建各种类型的图表,如折线图、柱状图、饼图、散点图等。通过引入这个模块,开发者可以利用 QtCharts 提供的类和函数来设计和实现图表功能,从而使得应用程序能够以图形化的方式展示数据。

具体来说,引入 QtCharts 2.1 后,你可以使用以下功能:

1.创建图表:使用 QChart 类创建一个图表对象,它是所有图表类型的基类。

2.添加数据系列:使用不同的数据系列类(如 QLineSeriesQBarSeriesQPieSeries 等)向图表中添加数据。

3.设置轴:使用 QValueAxisQCategoryAxis 等类来设置图表的坐标轴。

4.定制图表外观:可以设置图表的标题、图例、背景、颜色、字体等属性。

5.交互功能:为图表添加交互功能,如缩放、平移、工具提示等。

6.显示图表:使用 QChartView 类将图表显示在应用程序的用户界面中。

三.自定义属性

自定义属性,用于存储图表的配置信息,如 Y 轴的最小值和最大值、图例的文本、线条的颜色和宽度等。

四.悬停处理函数

1.将传入的颜色参数 _color 赋值给局部变量 m_color。这个颜色可能用于后续的绘图或者文本显示。

2.检查 type 参数的值。如果 type 为 true,则执行以下操作:

(1)将 data 参数转换为字符串,并保留两位小数,然后将这个字符串赋值给 dataNameValue 组件的 text 属性。
(2)将 dataNameValue 组件的 visible 属性设置为 true,使其在界面上可见。

3.如果 type 为 false 或者不是 true,则将 dataNameValue 组件的 visible 属性设置为 false,使其在界面上不可见。

五.设置X轴

  • min: minXaxis: 设置轴上显示的最小值。

  • max: maxXaxis: 设置轴上显示的最大值。

  • tickCount: 3: 在最小值和最大值之间设置了3个主要刻度线。

  • minorTickCount: 0: 没有设置次要刻度线。

  • color: titleColor: 设置轴线的颜色为titleColor的值。

  • labelsColor: titleColor: 设置轴上刻度线的值的颜色为titleColor的值。

  • minorGridLineColor: titleColor: 设置次要网格线的颜色为titleColor的值。由于minorTickCount设置为0,因此不会显示次要网格线。

  • titleVisible: true: 使轴标题可见。

  • titleBrush: titleColor: 设置用于轴标题的笔刷(颜色和样式)为titleColor的值。

六.设置Y轴

  • min: m_min_Y_L: 设置轴上显示的最小值。

  • max: m_max_Y_L: 设置轴上显示的最大值。

  • labelsColor: lineSeries1.color: 设置轴上刻度线的值的颜色为lineSeries1组件的颜色。

  • color: titleColor: 设置轴线的颜色为titleColor的值。

  • titleText: m_sLegent1: 设置轴标题的文本为m_sLegent1的值。

  • titleVisible: true: 使轴标题可见。

  • titleBrush: lineSeries1.color: 设置用于轴标题的笔刷(颜色和样式)为lineSeries1组件的颜色。

  • visible: m_bAxis1: 设置轴的可见性为m_bAxis1的值。

七.画线

1.axisX: axisX: 设置该线系列沿axisX轴进行绘制,axisX可能是另一个已定义的ValueAxis

2.axisY: axisY_L: 设置该线系列沿axisY_L轴进行绘制,即沿之前定义的垂直轴。

3.width: m_seriesWidth1: 设置线的宽度为m_seriesWidth1的值,这通常是用来控制线的粗细,m_seriesWidth1需要在其他地方定义具体数值。

4.color: "green": 设置线的颜色为绿色。

5.onHovered: hoverShowText(state,point.y,lineSeries2.color): 当鼠标悬停在该线上的数据点时,调用名为hoverShowText的处理函数,传递当前的鼠标状态(state),数据点的y值(point.y),以及线的颜色(lineSeries2.color)作为参数。这个函数可能在图表组件的样式表或JavaScript代码中定义,用于显示数据点的详细信息或者改变线的样式。

八.测试点坐标

九.设置值

十.效果演示

十一.代码演示

1.LineGraph.qml

import QtQuick 2.3
import QtCharts 2.1
import QtQuick.Controls 2.0ChartView {id : myChartviewlegend.visible:falseanimationOptions: ChartView.NoAnimationantialiasing: truebackgroundColor: "#939393"titleColor: "#000000"property var m_min_Y_L: 0property var m_max_Y_L: 1property var m_sLegent1: qsTr("")property var m_color : "red"property var m_seriesWidth1: 3    //线宽property var m_line1Color : "blue"property bool m_bTitleVisible :falseproperty bool m_bAxis1 : trueproperty var objectLine1:lineSeries1property var objectLine2:lineSeries2property var objectLine3:lineSeries3property int maxXaxis : 300property int minXaxis : 0property var _valueL:0Component.onCompleted:{}function hoverShowText(type,data,_color){m_color = _color;if(type){dataNameValue.text = String(data.toFixed(2))dataNameValue.visible = true}elsedataNameValue.visible = false}ValueAxis{id:                 axisXmin:                minXaxismax:                maxXaxistickCount:          3minorTickCount:     0color:              titleColorlabelsColor:        titleColorminorGridLineColor: titleColortitleVisible:       truetitleBrush:         titleColor}ValueAxis{id:             axisY_Lmin:            m_min_Y_Lmax:            m_max_Y_LlabelsColor:   lineSeries1.colorcolor:          titleColortitleText:      m_sLegent1titleVisible:   truetitleBrush:     lineSeries1.colorvisible:        m_bAxis1}Label{id:            titleLabelLtext:          m_sLegent1color:         lineSeries1.coloranchors.left:   parent.leftanchors.leftMargin:   30anchors.top:        parent.topanchors.topMargin: 30horizontalAlignment:    Text.AlignLeftverticalAlignment:      Text.AlignVCenterwrapMode:               Text.WordWrapfont.pixelSize: 20}Label{id: _lab1visible: m_bTitleVisiblecolor:lineSeries1.coloranchors.top: parent.topanchors.topMargin: 30anchors.left: titleLabelL.rightanchors.leftMargin: 30text:_valueL.toFixed(2)font.pixelSize: 20}LineSeries {id: lineSeries1axisX: axisXaxisY: axisY_Lwidth: m_seriesWidth1color: m_line1ColoronHovered:hoverShowText(state,point.y,lineSeries1.color)}// 第二条线LineSeries {id: lineSeries2axisX: axisXaxisY: axisY_Lwidth: m_seriesWidth1 // 您可能需要为每条线设置不同的线宽color: "green" // 设置线的颜色onHovered: hoverShowText(state,point.y,lineSeries2.color) // 更新悬停处理函数}// 第三条线LineSeries {id: lineSeries3axisX: axisXaxisY: axisY_Lwidth: m_seriesWidth1 // 您可能需要为每条线设置不同的线宽color: "orange" // 设置线的颜色onHovered: hoverShowText(state, point.y, lineSeries3.color) // 更新悬停处理函数}Text {id: dataNameValuecolor: m_colorfont.pixelSize: 20visible: falsetext: qsTr("")x:parent.width/2y:10}
}

2.main.qml

   Component.onCompleted: {lineView.objectLine1.append(0,10)lineView.objectLine1.append(100,16)lineView.objectLine2.append(0,5)lineView.objectLine2.append(100,19)lineView.objectLine3.append(0,-10)lineView.objectLine3.append(100,14)lineView2.objectLine1.append(0,10)lineView2.objectLine1.append(100,16)lineView2.objectLine2.append(0,5)lineView2.objectLine2.append(100,19)lineView2.objectLine3.append(0,-10)lineView2.objectLine3.append(100,14)lineView3.objectLine1.append(0,10)lineView3.objectLine1.append(100,16)lineView3.objectLine2.append(0,5)lineView3.objectLine2.append(100,19)lineView3.objectLine3.append(0,-10)lineView3.objectLine3.append(100,14)}Rectangle{id:_lineRectanglewidth: 800height: 800anchors.right: parent.rightanchors.top: parent.topanchors.rightMargin: 30anchors.topMargin: 60visible: falseColumn{spacing: 30LineGraph{id: lineViewwidth: 800height: 250minXaxis: 0maxXaxis : 500m_min_Y_L: -20.0m_max_Y_L: 20.0}LineGraph{id: lineView2width: 800height: 250minXaxis: 0maxXaxis : 500m_min_Y_L: -20.0m_max_Y_L: 20.0}LineGraph{id: lineView3width: 800height: 250minXaxis: 0maxXaxis : 500m_min_Y_L: -20.0m_max_Y_L: 20.0}}}

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

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

相关文章

如何找到MySQL中存储引擎所对应的表空间并且打开?

在上节课我们学习了数据库(MySQL)进阶:存储引擎,有不少同学产生疑惑,到底要怎么找到表空间并且打开啊?这节课我们就来探讨。 首先,根据这个路径:C:\ProgramData\MySQL\MySQL Server…

mybatis-plus如何使用QueryWrapper和LambdaQueryWrapper的and方法?

构造器去构造条件的时候,我们都知道eq方法去链式的时候是自动添加and的,那如果需要and的那个条件需要加括号呢? 环境 Jdk 1.8、mybatis-plus 3.5.3.2、mysql 5.7.11 示例 sql: select * from user where openid 1 and (phon…

谷歌Flank潜藏3年的Github Action供应链攻击

01 简 介 Flank [1] 是谷歌 Firebase Test lab 开源在 Github 的一个项目,用于同时对多个安卓和IOS设备进行测试。2024年4月15号 AWS 安全工程师 Adnan Khan 公布了关于该项目代码仓库 Github Action CI/CD 存在漏洞的细节[2],漏洞在2020年于此 代码合…

通信网络时钟同步(PTP网络授时服务器)技术探讨

通信网络时钟同步(NTP网络授时服务器)技术探讨 通信网络时钟同步(NTP网络授时服务器)技术探讨 1、着移动通信业务的发展和移动用户的快速增长, 移动网络架构向IP化、宽带化进展。为了适应业务IP化发展趋势&#xff0c…

02 VUE学习:模板语法

模板语法 Vue 使用一种基于 HTML 的模板语法,使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML,可以被符合规范的浏览器和 HTML 解析器解析。 在底层机制中,Vue 会将模板编译成高度优化的…

开发vue3,真的可以不用ref/reactive了,也不需要ref.value

什么是Cabloy-Front? Cabloy-Front 是一款支持 IOC 容器的 Vue3 框架。不用ref/reactive,不用ref.value,不用pinia 与UI库的配合 Cabloy-Front 可以搭配任何 UI 库使用,并且内置了几款 UI 库的项目模版,便于开箱即用…

免费SSL证书签发安装指南

一、签发 1.选择证书颁发机构(CA):首先,你需要找到一个提供免费SSL证书的CA。有些CA会提供永久免费的SSL证书,而有些则可能只提供有限时间的试用证书,如JoySSL就提供永久免费证书。 2.生成CSR&#xff08…

WPF 鼠标拖拽平移

效果 xaml <ScrollViewer x:Name"scrollViewer" HorizontalScrollBarVisibility"Hidden" VerticalScrollBarVisibility"Disabled" Background"#FFF1ADAD"PreviewMouseDown"ScrollViewer_OnPreviewMouseDown"PreviewMou…

Electron学习笔记(一)

文章目录 相关笔记笔记说明 一、轻松入门 1、搭建开发环境2、创建窗口界面3、调试主进程 二、主进程和渲染进程1、进程互访2、渲染进程访问主进程类型3、渲染进程访问主进程自定义内容4、渲染进程向主进程发送消息5、主进程向渲染进程发送消息6、多个窗口的渲染进程接收主进程发…

白鲸开源CEO郭炜在2024 DataOps发展大会上获聘专家

2024年5月15日&#xff0c;白鲸开源CEO郭炜在2024 DataOps发展大会上被正式聘任为DataOps专家&#xff0c;并获得了荣誉证书。本次大会由中国通信标准化协会主办&#xff0c;中关村科学城管委会提供支持&#xff0c;大数据技术标准推进委员会&#xff08;CCSATC601&#xff09;…

iisnginx环境一次奇怪的跨域问题解决经过

跨域问题描述&#xff1a; iis网站跨域、nginx 网站跨域 都已配置&#xff0c;访问接口依然出现跨域问题。 错误提示&#xff1a; ccess to XMLHttpRequest at ‘https://xxx.com/gameapi/preserve/get/status’ from origin ‘https://cdn.xxx.com’ has been blocked by CO…

Python简易信息管理系统

我们将通过一个实例来探讨如何使用Python与MySQL数据库进行交互&#xff0c;以构建一个简单的学生信息管理系统。这个系统将能够执行基本的CRUD&#xff08;创建(Create)、读取(Retrieve)、更新(Update)、删除(Delete)&#xff09;操作&#xff0c;以管理学生信息。我们将使用m…

Python爬虫-批量爬取新能源汽车上牌量

前言 本文是该专栏的第27篇,后面会持续分享python爬虫干货知识,记得关注。 最近粉丝朋友咨询新能源汽车上牌量数据的爬取方法,对此在本文中,笔者以某汽车平台为例,通过python来实现对“新能源汽车上牌量”的数据进行抓取。 具体实现思路和详细逻辑,笔者将在正文结合完整…

三丰云搭建QQ-bot的服务器-代码实现(3)

网址&#xff1a;https://www.sanfengyun.com >> 三丰云免费云服务器 代码实现 书接上回装饰器&#xff0c;显而易见&#xff0c;只有装饰器还不完善&#xff0c;所以我们接着来补充代码 首先定义一个 MyClient 类 class MyClient(botpy.Client):async def on_ready(…

Nacos :安装配置、服务注册

目录 一、中文官网 二、配置 1、application.properties 2、启动 Nacos 服务 3、访问 Nacos 三、服务注册 1、配置Nacos客户端的pom依赖 2、添加服务配置信息 3、添加 Nacos 启动注解 一、中文官网 Nacos官网 | Nacos 官方社区 | Nacos 下载 | Nacos 下载后直接解压…

0X JavaSE-- ( 遍历-- for each、Iterator 、)、

for each for each 语句是 JDK5 的新特征&#xff0c;主要用于遍历数组、集合。 // collection 可以是数组/实现了 Iterable 接口的集合类 for(dataType variable : collection){ // 使用 item 进行操作 } // 遍历二维数组// 初始化一个二维数组int[][] array {{1, 2, 3},{4…

GO语言核心30讲 实战与应用 (io包,bufio包,os包,网络服务,http,性能分析)

原站地址&#xff1a;Go语言核心36讲_Golang_Go语言-极客时间 一、io包中的接口和工具 1. strings.Builder、strings.Reader 和 bytes.Buffer 这些类型实现了 io 包的很多接口&#xff0c;目的是什么&#xff1f; 是为了提高不同程序实体之间的互操作性。 程序实体是指比如网…

浏览器插件Video Speed Controller(视频倍速播放),与网页自身快捷键冲突/重复/叠加的解决办法

浏览器插件Video Speed Controller&#xff08;视频倍速播放&#xff09;&#xff0c;与网站自身快捷键冲突/重复/叠加的解决办法 插件介绍问题曾今尝试的办法今日发现插件列表中打开Video Speed Controller的设置设置页面翻到下面&#xff0c;打开实验性功能。将需要屏蔽的原网…

网络工程师----第三十一天

DNS&#xff1a; DNS含义&#xff1a;DNS 是 Domain Name System&#xff08;域名解析系统&#xff09; 端口号&#xff1a;DNS为53&#xff08;UDP&#xff09; 域名的层次结构&#xff1a; 域名的分级&#xff1a; 域名服务器&#xff1a; 域名解析过程&#xff1a; 递归查…

PHP xdebug

使用场景 一台MAC上安装了phpstorm&#xff0c;虚拟机安装了对应的web程序&#xff0c;需要调试。 坑点&#xff0c;网上教程太多&#xff0c;不如看官网&#xff0c;需要按照xdebug版本来配置php.ini https://www.jetbrains.com/help/phpstorm/2023.3/configuring-xdebug.htm…