QML charts 鼠标动态跟随数值（十字交叉定位）

有时需要在图表中使用鼠标动态的显示某个点的数据值，Series中提供了一些相关鼠标事件的信号，此文就记录使用hovered(point point, bool state)信号实现十字交叉定位。效果图：

hovered(point point, bool state)信号发出当前鼠标所处的图表坐标Point(x,y)，x和y分别代表了Series中该点处的值。借助ChartView中的函数mapToPosition(point value, AbstractSeries series)可返回得到当前鼠标于ChartView的相对位置绘制一纵一横两条交叉线。

如果像我的效果图中那样显示的十字线仅仅只在图表区域内显示，那么可以使用chartview中的属性plotArea获得绘图区域的位置大小即可。

数据结果在ToolTip中进行显示（注意：ToolTip的parent必须为Item，因此ToolTip在ChartView中初始化或者在Series中对其指定父类）,以下代码只贴出了重要的核心内容，并非QML全部，其余内容可自行添加。

ToolTip{id:toolTipdelay: 4font.family: "微软雅黑"font.bold: truefont.pointSize: 13}LineSeries {id:lineSeriesname: "LineSeries"axisX: myDateTimeAxisaxisY:myAxisYcolor: "#00ffff"width: 3onHovered: {var chartPosition = chartView.mapToPosition(point,lineSeries)myCanvas.xx = chartPosition.xmyCanvas.yy = chartPosition.ytoolTip.visible = statetoolTip.text = "X："+point.x+"  Y："+point.ytoolTip.x = chartPosition.x+10toolTip.y = chartPosition.y-40var d = new Date()myCanvas.requestPaint()}}Canvas{id:myCanvasanchors.fill: chartViewproperty double xx: 0property double yy: 0onPaint: {if(xx+yy>0){var ctx = getContext("2d")ctx.clearRect(0,0,parent.width,parent.height)ctx.strokeStyle = '#ccf48993'ctx.lineWidth = 3ctx.beginPath()ctx.moveTo(xx,chartView.plotArea.y)ctx.lineTo(xx,chartView.plotArea.height+chartView.plotArea.y)ctx.stroke()ctx.beginPath()ctx.moveTo(chartView.plotArea.x,yy)ctx.lineTo(chartView.plotArea.x+chartView.plotArea.width,yy)ctx.stroke()}}}

QML charts 鼠标动态跟随数值（十字交叉定位）相关推荐

来自CCNet的一种创新：语义分割中的十字交叉视觉注意力
来自CCNet的一种创新:语义分割中的十字交叉视觉注意力写在文章开头看个大概引入 CCNet之道整体架构十字交叉注意力循环--RCCA 优化类别一致性损失 CCNet效果一览写在文章末尾 ...
【码上实战】【立体匹配系列】经典AD-Census: （4）十字交叉域代价聚合
抱歉让大家久等了! 下载完整源码,点击进入: https://github.com/ethan-li-coding/AD-Census 欢迎同学们在Github项目里讨论! 上篇代价计算中,带大家深入 ...
excel表格行列显示十字定位_Excel行列十字交叉高亮显示
Excel 行列十字交叉高亮显示 Excel 行列十字交叉高亮显示! Excel 中数据量比较大时, 有时候容易看花钱,行号列号看错,这个时候,可以使用简单的 VBA 语句对选中单元格的行列进行高亮 ...
十字交叉链表c语言,C语言课程设计报告—十字交叉链表的应用.doc
C语言课程设计报告-十字交叉链表的应用 PAGE \* MERGEFORMAT 13 华中科技大学计算机科学与技术学院 C语言程序设计课程设计实验报告题目:水产品养殖信息管理系统专业: 计算机科学 ...
基于SVG的鼠标动态绘制矩形和动态放置图片
web开发中经常会遇到需要在图片上或画布上使用鼠标动态绘制图形,或者用图形或者小图片标注位置的需求,这里选择使用svg来实现. 一.在html中添加svg标签,并在其中放置图片(做背景) <sv ...
77_Qt_承接【75】解决表格tableWidget添加行、列，删除行、列，以及下拉框comboBox动态跟随变化问题【难点：removeItem、addItem所需参数不同】
下拉框comboBox动态跟随行.列,添加.删除变化功能: void myMainWindow::add_row() {int row = ui->tableWidget->current ...
SUMO(test):简单建立十字交叉路口网络（1）
所需文件:.nod.xml文件, .edg.xml文件, .typ.xml文件, .con.xml文件其代码如下: 打开start-command-line.bat键入cd/d f:\sumo-wi ...
mac鼠标指针跟随很慢的问题
最近买了个苹果鼠标2代,使用时感觉鼠标指针跟随太慢,在系统偏好设置里面将鼠标跟随速度调到最大,还是感觉很慢. 后来在网上找到了一个通过命令行改全局配置的方式调快跟随速度.具体方法如下: 可以先查看一下 ...
【mac】mac鼠标指针跟随很慢的问题
使用时感觉鼠标指针跟随太慢,在系统偏好设置里面将鼠标跟随速度调到最大,还是感觉很慢. 后来在网上找到了一个通过命令行改全局配置的方式调快跟随速度.具体方法如下: 可以先查看一下当前值打开终端,输入命 ...

QML charts 鼠标动态跟随数值（十字交叉定位）

QML charts 鼠标动态跟随数值（十字交叉定位）相关推荐

最新文章

热门文章