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:toolTip
        delay: 4
        font.family: "微软雅黑"
        font.bold: true
        font.pointSize: 13
    }

    LineSeries {
        id:lineSeries
        name: "LineSeries"
        axisX: myDateTimeAxis
        axisY:myAxisY
        color: "#00ffff"
        width: 3
        onHovered: {
            var chartPosition = chartView.mapToPosition(point,lineSeries)
            myCanvas.xx = chartPosition.x
            myCanvas.yy = chartPosition.y
            toolTip.visible = state
            toolTip.text = "X："+point.x+"  Y："+point.y
            toolTip.x = chartPosition.x+10
            toolTip.y = chartPosition.y-40
            var d = new Date()
            myCanvas.requestPaint()
        }
    }

Canvas{
        id:myCanvas
        anchors.fill: chartView
        property double xx: 0
        property double yy: 0
        onPaint: {
            if(xx+yy>0){
                var ctx = getContext("2d")
                ctx.clearRect(0,0,parent.width,parent.height)
                ctx.strokeStyle = '#ccf48993'
                ctx.lineWidth = 3
                ctx.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()
            }
        }
    }