QtCharts中添加标线MarkLine

QtCharts中添加标线MarkLine。效果如下

代码如下

import QtQuick 2.9
import QtQuick.Window 2.2
import QtCharts 2.2

Window {
    visible: true
    width: 640
    height: 480

    title: qsTr("曲线增加标线")

    //开始--------------------------------------------------------------
    ChartView
    {
        id : chartview
        anchors.fill: parent
        antialiasing: true

        property bool marklinevisable : true  //标线是否可见
        property int markline_orientation: Qt.Horizontal //设置标线方向

        ValueAxis {
                  id: xAxis;
                  min: 0; max: 10
              }
        ValueAxis {
                  id: yAxis
                  min: 0;max: 10
              }

        LineSeries {
           id : lineSeries
          name: "LineSeries"
          XYPoint { x: 0; y: 0 }
          XYPoint { x: 1.1; y: 2.1 }
          XYPoint { x: 1.9; y: 3.3 }
          XYPoint { x: 2.1; y: 2.1 }
          XYPoint { x: 2.9; y: 4.9 }
          XYPoint { x: 3.4; y: 3.0 }
          XYPoint { x: 4.1; y: 3.3 }

          axisX : xAxis;
          axisY : yAxis
        }

        ///////////////////////////////////////////
        //1
        //采用的方式添加一个Rectangle在chartview里面实现标线的功能
        Rectangle{
            id : markline;
            visible: chartview.marklinevisable
            color: "red"

            property int plotw: chartview.plotArea.width;
            property int ploth: chartview.plotArea.height;

            x : chartview.plotArea.x;
            y : chartview.plotArea.y; // 默认在最上面

            width: chartview.markline_orientation==Qt.Horizontal?plotw:2
            height: chartview.markline_orientation==Qt.Horizontal?2:ploth

            Behavior on x {
                NumberAnimation {duration: 500;}
            }

            Behavior on y {
                NumberAnimation {duration: 500;}
            }
        }
        //1
        /////////////////////////////////////////


        //////////////////////////////////////////
        //2
        //设置标线的位置
        function setMarkLine(x,y)
        {

            if (chartview.markline_orientation == Qt.Horizontal) //水平方向
            {
                //将y的值进行转换
                var p1 = chartview.mapToPosition(Qt.point(0,y),lineSeries);
                markline.y =  p1.y-markline.height/2;
            }
            else
            {
                //将x的值进行转换
                var p1 = chartview.mapToPosition(Qt.point(x,0),lineSeries);
                markline.x = p1.x-markline.width/2;
            }

        }
        //2
        //////////////////////////////////////////

        //鼠标点击事件，点击时移动markline
        MouseArea{
            anchors.fill: parent
            acceptedButtons: Qt.LeftButton | Qt.RightButton
            onClicked: {
                if (!chartview.marklinevisable) return;

                //测试

                if (mouse.button ==Qt.RightButton)
                {
                    chartview.setMarkLine(Math.random()*5,Math.random()*10);
                }
                else
                {
                    if (chartview.markline_orientation == Qt.Horizontal) //水平方向
                    {
                        markline.y = mouse.y-markline.height/2;
                    }
                    else
                    {
                        markline.x = mouse.x-markline.width/2;

                    }
                }
                //////////////////////////////////////////////
            }
        }
    }

    //结束--------------------------------------------------------------
}