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.rhkb.cn/news/328760.html

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

相关文章

Springboot开发 -- Postman 调试 session 验证 接口

当我们在开发Spring Boot应用时,经常会遇到带有Session验证的接口,这些接口需要用户先登录并获取到Session ID(或称为cookie中的JSESSIONID),然后在后续的请求中携带这个Session ID来保持会话状态。下面我将以一个实际…

Java 插入数据到Elasticsearch中进行各种类型文档的内容检索

源码下载&#xff1a;链接&#xff1a;https://pan.baidu.com/s/1D3yszkTzjwQz0vFRozQl2g?pwdz6kb 提取码&#xff1a;z6kb 实现思路 1.搭建一个新的springboot项目&#xff0c;不会的请看我这篇博客&#xff1a;springboot项目搭建 2.添加maven依赖 <dependency><…

信息系统项目管理师0602:项目立项管理 — 历年考题(详细分析与讲解)

点击查看专栏目录 1、2017年11月第31题 题干: 项目经理小李依据当前技术发展趋势和所掌握的技术能否支撑该项目的开发,进行可行性研究。小李进行的可行性研究属于( )。 选项: A. 经济可行性分析 B. 技术可行性分析 C. 运行环境可行性分析 D. 其他方面的可行性分析 答案…

远程桌面如何配置?使用快解析远程访问

远程桌面如何设置&#xff1f; 远程桌面作为windows系统内置的一个组件&#xff0c;多年来深受用户喜爱。使用此功能&#xff0c;我们能够轻而易举的控制我们想要控制的电脑。下面我就简单的介绍一下远程桌面的设置方法。 在讲具体设置方法之前&#xff0c;首先应该给大家普及…

6大部分,20 个机器学习算法全面汇总!!建议收藏!(上篇)

前两天有小伙伴说想要把常见算法的原理 公式汇集起来。 这样非常非常方便查看&#xff01;分为上下两篇&#xff0c;下篇地址&#xff1a; 本次文章分别从下面6个方面&#xff0c;涉及到20个算法知识点&#xff1a; 监督学习算法 无监督学习算法 半监督学习算法 强化学习…

PingCAP 黄东旭参与 CCF 秀湖会议,共探开源教育未来

日前&#xff0c;第十二期 CCF 秀湖会议在苏州 CCF 业务总部 & 学术交流中心成功举办。本次会议以“开源教育&#xff1a;使命、挑战与发展”为主题&#xff0c;汇聚了来自学术界、工业界的二十余位专家&#xff0c;共同探讨开源教育的现状与未来。 PingCAP 联合创始人兼 C…

【微信小程序开发(从零到一)【婚礼邀请函】制作】——邀请函界面的制作(2)

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;开发者-曼亿点 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 曼亿点 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a…

QT多线程的使用

目录 一.介绍 二.第一种多线程方式 1.创建一个线程子类&#xff0c;继承QT中的QThread 2.重新父类的run( )方法 3.在线程中创建子线程对象 4.run( )方法 5.启动子线程 三.第二种多线程方式 1.创建一个新类&#xff08;这个类是QObject的派生&#xff09; 2.在这个类中…

Unity射击游戏开发教程:(18)添加弹药计数+补充弹药

添加简单的弹药计数 我将讨论如何向游戏中添加简单的弹药计数。这将包括在 HUD 中添加弹药计数器,当弹药达到 0 时,文本会将颜色更改为红色以提醒玩家。另外,当弹药数为0时,玩家将无法再射击。让我们深入了解吧! 在播放器脚本中我们需要添加一些变量。我们将创建两个公共整…

Linux 安裝 rpm包

下载 地址&#xff1a;https://developer.aliyun.com/packageSearch 安装 rpm -ivh lsof-4.87-6.el7.x86_64.rpmlsof -Ki|awk {print $2}|sort|uniq -c|sort -nr|head lsof | wc -l

《天空之城》观后感

曾经很长一段时间都着迷于《天空之城》这段旋律&#xff0c;一遍一遍不厌其烦地听&#xff0c;静谧而温馨、豪迈却苍凉&#xff0c;各种复杂的感受随着起伏的音符流淌进心里。多年之后才知道这首曲子出自宫崎骏的同名动画电影。说来也有意思&#xff0c;似乎大多数人是通过电影…

python批量生成防伪识别二维码

欢迎关注我👆,收藏下次不迷路┗|`O′|┛ 嗷~~ 目录 一.前言 二.代码 三.使用 四.总结 一.前言 二维码(QR Code)是一种矩阵条码技术,它使用黑白矩形图案来表示二进制数据,这些矩形图案可以被设备扫描并解读。二维码可以被用来存储

吞吐量 和 延时的关系

关于吞吐量/吞吐率、延时&#xff0c;你可以通过 Jmeter中的”聚合报告“和”用表格查看报告“来获取。 Throughput 越大&#xff0c;Latency 越差&#xff1a;因为请求过多&#xff0c;系统繁忙导致响应速度降低。Latency 的值越小说明能支持的 Throughput 越高&#xff1a;L…

使用Docker进行Jmeter分布式搭建

大家好&#xff0c;随着技术的不断发展&#xff0c;对性能测试的要求也日益提高。在这样的背景下&#xff0c;如何利用 Docker 来巧妙地搭建 Jmeter 分布式成为了关键所在。现在&#xff0c;就让我们开启这场探索之旅&#xff0c;揭开其神秘的面纱。前段时间给大家分享了关于 L…

线性模型之岭回归的用法

实战&#xff1a;使用岭回归模型 完整代码&#xff1a; import numpy as np import matplotlib.pyplot as plt from sklearn.linear_model import LinearRegression from sklearn.datasets import make_regression from sklearn.model_selection import train_test_split fro…

3D Tiles资源大全

本文汇总整理3D Tiles相关的各种资源&#xff0c;包括查看器、生成器、示例数据集、教程、演示等。 1、3D Tiles特色演示 注意&#xff1a;这些演示是基于 CesiumJS 1.87.1 Release 发布的&#xff0c;其中包括对 3D Tiles Next 扩展的实验性支持。这些演示中显示的大多数功能现…

2024数维杯数学建模C题思路代码

2024年数维杯&电工杯思路代码在线文档​https://www.kdocs.cn/l/cdlol5FlRAdE 这道题想要做出好的结果&#xff0c;必须要结合插值法和分布函数来做&#xff0c;主要还是因为勘探点太少&#xff0c;直接用插值法效果不太好&#xff0c;以下是我做的&#xff0c;函数分布可…

Qwen 开源标杆

Qwen的博客 在线体验Qwen开源版本、非常丝滑 不算量化、已经开源的Qwen1.5 版本有9个&#xff1a; 0.5B、1.8B、4B、7B、14B、32B、72B、110B、MoE-A2.7B 闭源已经发展到 Qwen-Max-0428、网页端从2.1升级到2.5 Qwen API详情 一些记录&#xff1a; 1、Qwen1.5 110B&#x…

FPGA相关论文阅读

一、Achieving 100Gbps Intrusion Prevention on a Single Server 论文名称中文翻译&#xff1a;在单台服务器上实现100Gbps吞吐量的入侵防御检测。 文章中的Mixed-1和Norm-1 二、Distributed Password Hash Computation on Commodity Heterogeneous Programmable Platforms…

虚拟化技术 使用vSphere Web Client管理ESXi主机

一、实验内容 通过vSphere Web Client将ESXi主机连接到iSCSI共享存储通过vSphere Web Client&#xff0c;使用共享存储创建虚拟机并安装windows 2008 R2操作系统通过vSphere Web Client&#xff0c;为虚拟机创建快照 二、、实验主要仪器设备及材料 安装有64位Windows操作系统…