标签（空格分隔）： Qt

使用chartView实现触发x轴y轴，一个x对应三个y，显示相应的坐标信息

demo

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtCharts 2.2

Rectangle {
    width: 1000;
    height: 400;
    color: "skyblue";
    property var xdata: [1,2,3,4,5,6,7,8,9,10,11,12];
    property var enterY: [300,220,226,445,246,446,200,341,220,218,248, 200];

    property var exitY: [180,146,120,140,120,152,122,141,110,120,126,120];
    property var stayY: [120,74,106,305,126,294,78,200,110,98,122,80];

    property real oneMouseH: 0;//enter的
    property real threeMouseH: 0;//exit的Y
    property real fourMouseH: 0;//stay的Y
    property real oneMouseW: 0;
    property real enterTipX: 0; //浮动显示的x，y提示值
    property real enterTipY: 0; //浮动显示的x，y提示值
    property real exitTipX: 0; //浮动显示的x，y提示值
    property real exitTipY: 0; //浮动显示的x，y提示值
    property real stayTipX: 0; //浮动显示的x，y提示值
    property real stayTipY: 0; //浮动显示的x，y提示值
    property var realTimeArray: new Array;
    property bool bShowTip: false;//十字线的显示
    property int enterTipW: 100;//150
    property int enterTipH: 36;//36
    property int enterTipLeftMargin: 5;
    property int enterTipTopMargin: 5;
    property int exitTipLeftMargin: 5;
    property int exitTipTopMargin: 5;
    property int stayTipLeftMargin: 5;
    property int stayTipTopMargin: 5;
    //画图Enter
    function drawEnter()
    {
        axisY.max = Math.max.apply(null, enterY);
//        axisY.min = Math.min.apply(null, enterY);
        axisY.min = 0;
        /////////////////////////////////////
        for (var i = 0; i < 11; i++)
        {
            enterData.append(xdata[i],enterY[i]);
        }
    }
    //画图exit
    function drawExit()
    {


//        axisY.max = Math.max.apply(null, enterY);
//        axisY.min = Math.min.apply(null, enterY);
        /////////////////////////////////////
        for (var i = 0; i < 11; i++)
        {
            exitData.append(xdata[i],exitY[i]);
        }
    }
    //画图stay
    function drawStay()
    {

//        axisY.max = Math.max.apply(null, enterY);
//        axisY.min = Math.min.apply(null, enterY);
        /////////////////////////////////////
        for (var i = 0; i < 11; i++)
        {
            stayData.append(xdata[i],stayY[i]);
        }
    }

    //画十字线
    function getPositionValue(pointX, pointY)
    {
        //画进入第一个十字
        var temEnterX, temEnterY;
        if(xdata.length > 0)
        {
            temEnterX = xdata[0];
            temEnterY = enterY[0];

            enterTipY = enterY[0];
            enterTipX = enterY[0];//(realTimeArray[0] === undefined ? 0 : realTimeArray[0]);

            var i;
            for(i = 1; i < xdata.length; i++)
            {
                if(Math.abs(pointX - xdata[i]) < Math.abs(pointX - temEnterX))
                {   //var j = i-1;
                    temEnterX = xdata[i];
                    temEnterY = enterY[i];
                    //print("yOrdinate===========", yOrdinate, i, realTimeArray[i])
                }
            }
            //利用当前的值映射出坐标，然后画出两条线
            var enterPoint = achartview.mapToPosition(Qt.point(temEnterX, temEnterY), enterGraph);

            //获取提示窗口出现的位置
            getTipPosFun(enterPoint);

            oneMouseH = enterPoint.y;
            oneMouseW = enterPoint.x;
            enterTipX = temEnterX;
            enterTipY = temEnterY;
            //--------------------------


            //----------------------------

        }
        //****************************************************
        //画退出第二个
        var temExitX, temExitY;
        if(xdata.length > 0 && exitY.length !==0)
        {
            temExitX = xdata[0];
            temExitY = exitY[0];

            exitTipY = exitY[0];
            exitTipX = exitY[0];//(realTimeArray[0] === undefined ? 0 : realTimeArray[0]);


            for(var k = 1; k < xdata.length; k++)
            {
                if(Math.abs(pointX - xdata[k]) < Math.abs(pointX - temExitX))
                {
                    temExitX = xdata[k];
                    temExitY = exitY[k];
                }
            }

            //--------------------------
            //利用当前的值映射出坐标，然后画出两条线
            var exitPoint = achartview.mapToPosition(Qt.point(temExitX, temExitY), exitGraph);

            //获取提示窗口出现的位置
            getTipPosFun(exitPoint);

            threeMouseH = exitPoint.y;
            oneMouseW = exitPoint.x;
            exitTipX = temExitX;
            exitTipY = temExitY;

        }
        //画第三个
        var temStayX, temStayY;
        if(xdata.length > 0 && stayY.length !==0)
        {
            temStayX = xdata[0];
            temStayY = stayY[0];

            stayTipY = stayY[0];
            stayTipX = stayY[0];


            for(var m = 1; m < xdata.length; m++)
            {
                if(Math.abs(pointX - xdata[m]) < Math.abs(pointX - temStayX))
                {
                    temStayX = xdata[m];
                    temStayY = stayY[m];
                }
            }

            //利用当前的值映射出坐标，然后画出两条线
            var stayPoint = achartview.mapToPosition(Qt.point(temStayX, temStayY), stayGraph);

            //获取提示窗口出现的位置
            getTipPosFun(stayPoint);

            fourMouseH = stayPoint.y;
            oneMouseW = stayPoint.x;
            stayTipX = temStayX;
            stayTipY = temStayY;


        }
        //****************************************************


    }

    //获取提示窗口出现的位置
    function getTipPosFun(onePoint)
    {
        //进入   最常见的时候都是处于1：左下
       // console.log("onePoint.x==="+onePoint.x,"onePoint.y==="+onePoint.y)
        enterTipLeftMargin = onePoint.x - enterTipW - 5;
        enterTipTopMargin = onePoint.y - enterTipH -40;
//        print("enterTipPosArray--------", onePoint, enterTipLeftMargin, enterTipTopMargin)
        if(enterTipLeftMargin < 20)  //右下的位置
        {
            enterTipLeftMargin = onePoint.x + 5;
        }
        if(onePoint.y - enterTipH <  20) //右下或者左下
        {
            enterTipTopMargin = onePoint.y + 5;
        }

        //***************************
        //退出 最常见的时候都是处于1：左上
        exitTipLeftMargin = onePoint.x - enterTipW - 5;
        exitTipTopMargin = onePoint.y - enterTipH + 40;
        if(exitTipLeftMargin < 20)  //右上的位置
        {
            exitTipLeftMargin = onePoint.x + 5
        }
        if(onePoint.y - enterTipH <  20) //右下或者左下
        {
            exitTipTopMargin = onePoint.y + 5;
        }

        //保持 最常见的时候都是处于1：左上
        stayTipLeftMargin = onePoint.x - enterTipW - 5;
        stayTipTopMargin = onePoint.y - enterTipH - 5;
        if(stayTipLeftMargin < 20)  //右上的位置
        {
//            stayTipLeftMargin = onePoint.x - enterTipW
            stayTipLeftMargin = onePoint.x + 5
        }
        if(onePoint.y - enterTipH <  20) //右下或者左下
        {
            stayTipTopMargin = onePoint.y - 5;
        }
        //***************************



    }

    ChartView {
        id: achartview
        anchors.fill: parent;
        //plotAreaColor: "#3c3f45"
//        legend.visible: false;
        antialiasing: true;
        dropShadowEnabled: true
        backgroundColor: "#444851";
        //backgroundRoundness: 20;
        animationOptions: ChartView.SeriesAnimations;
        //count: 2
        theme: ChartView.ChartThemeQt;//设置主题 也可以用backgroundColor;
        ValueAxis {
            id: axisX;
            min: xdata[0];
            max: xdata[xdata.length - 1];
            tickCount: 5;
            minorTickCount: 5;
            labelFormat: "%.0f";
            labelsColor: "#999999";//坐标轴上的字体颜色
            gridLineColor: "#3c3f45"
            color: "#3c3f45"
            minorGridLineColor: "#3c3f45"
        }

        ValueAxis {
            id: axisY;
            min: 100;
            max: 446;
            tickCount: enterY.length;
            labelFormat: "%.0f";
            labelsColor: "#999999";//坐标轴上的字体颜色
            gridLineColor: "#3c3f45"
            color: "#3c3f45"
        }
        AreaSeries {
            id:enterGraph;
            axisX: axisX;
            axisY: axisY;
            color: "#0ddeff";
            borderColor: "#1699ae";
            opacity: 0.3;
            borderWidth: 3;
            pointLabelsClipping: false
            useOpenGL: false
            upperSeries: LineSeries {
                id: enterData;
            }

            Component.onCompleted: {
                drawEnter();
            }
        }
        AreaSeries {
            id:exitGraph;
            axisX: axisX;
            axisY: axisY;
            color: "green";
            borderColor: "#1699ae";
            opacity: 0.3;
            borderWidth: 3;
            pointLabelsClipping: false
            useOpenGL: false
            upperSeries: LineSeries {
                id: exitData;
            }

            Component.onCompleted: {
                drawExit();
            }
        }
        AreaSeries {
            id:stayGraph;
            axisX: axisX;
            axisY: axisY;
            color: "LightPink";
            borderColor: "#1699ae";
//            opacity: 0.3;
            borderWidth: 3;
            pointLabelsClipping: false
            useOpenGL: false
            upperSeries: LineSeries {
                id: stayData;
            }

            Component.onCompleted: {
                drawStay();
            }
        }

        MouseArea {
            id: chartArea;
            anchors.fill: parent;
           // focus:true;
            hoverEnabled:true;
            Keys.enabled: true;
            Keys.onPressed: {
            }
            onEntered: {
                bShowTip = true;
            }
            onPositionChanged: {
                var enterMin = achartview.mapToValue(Qt.point(mouseX, mouseY), enterGraph);
//                print("min==========", xmin)
                getPositionValue(enterMin.x, enterMin.y);
//                print("xxxxxxxxxxx----yyyyyyyyy------", mouseX, mouseY)

                var exitMin = achartview.mapToValue(Qt.point(mouseX, mouseY), exitGraph);
                getPositionValue(exitMin.x, exitMin.y);
                var stayMin = achartview.mapToValue(Qt.point(mouseX, mouseY), stayGraph);
                getPositionValue(stayMin.x, stayMin.y);


            }
            onExited: {
                bShowTip = false;
            }
            Rectangle{
                id: oneline;//进入
                anchors.top: parent.top;
                anchors.topMargin: oneMouseH;
                anchors.left: parent.left
                anchors.leftMargin: 30;
                anchors.right: parent.right
                anchors.rightMargin: 30;
                height: 1;
                color: "green";
                visible: bShowTip;
            }
            Rectangle{
                id: threeline;//退出
                anchors.top: parent.top;
                anchors.topMargin: threeMouseH;
                anchors.left: parent.left
                anchors.leftMargin: 30;
                anchors.right: parent.right
                anchors.rightMargin: 30;
                height: 1;
                color: "red";
                visible: bShowTip;
            }
            Rectangle{
                id: fourline;//保持
                anchors.top: parent.top;
                anchors.topMargin: fourMouseH;
                anchors.left: parent.left
                anchors.leftMargin: 30;
                anchors.right: parent.right
                anchors.rightMargin: 30;
                height: 1;
                color: "yellow";
                visible: bShowTip;
            }

            Rectangle{
                id: twoline;
                anchors.top: parent.top;
                anchors.topMargin: 30;
                anchors.bottom: parent.bottom
                anchors.bottomMargin: 30;
                anchors.left: parent.left;
                anchors.leftMargin: oneMouseW
                width: 1
                color: "red";
                visible: bShowTip;
            }

            Rectangle{
                id: enterTip;
                anchors.left: parent.left;
                anchors.leftMargin: enterTipLeftMargin;
                anchors.top: parent.top;
                anchors.topMargin: enterTipTopMargin;
                width: enterTipW;
                height: enterTipH;
                color: "green"
                border.color: "#d5d5d5"
                visible: bShowTip;
                //oneLeft + 3 , oneTop + 15
                Text{
                    id: enterEextY;
                    anchors.left: parent.left;
                    anchors.leftMargin: 3;
                    anchors.top: parent.top;
                    anchors.topMargin: 2;
                    text: "y: " + enterTipY
                    color: "#d5d5d5"
                    font.family: "微软雅黑";
                    font.pixelSize: 13;
                }
                Text{
                    id: enterEextX;
                    anchors.left: parent.left;
                    anchors.leftMargin: 3;
                    anchors.top: parent.top;
                    anchors.topMargin: 17;
                    text: "x: " + enterTipX;
                    color: "#d5d5d5"
                    font.family: "微软雅黑";
                    font.pixelSize: 13;
                }
            }
            //******************************
            Rectangle{
                id: exitTip;
                anchors.left: parent.left;
                anchors.leftMargin: exitTipLeftMargin;
                anchors.top: parent.top;
                anchors.topMargin: exitTipTopMargin;
                width: enterTipW;
                height: enterTipH;
                color: "red"
                border.color: "#d5d5d5"
                visible: bShowTip;
                //oneLeft + 3 , oneTop + 15
                Text{
                    id: exitEextY;
                    anchors.left: parent.left;
                    anchors.leftMargin: 3;
                    anchors.top: parent.top;
                    anchors.topMargin: 2;
                    text: "y: " + exitTipY
                    color: "#d5d5d5"
                    font.family: "微软雅黑";
                    font.pixelSize: 13;
                }
                Text{
                    id: exitEextX;
                    anchors.left: parent.left;
                    anchors.leftMargin: 3;
                    anchors.top: parent.top;
                    anchors.topMargin: 17;
                    text: "x: " + exitTipX;
                    color: "#d5d5d5"
                    font.family: "微软雅黑";
                    font.pixelSize: 13;
                }
            }

            Rectangle{
                id: stayTip;
                anchors.left: parent.left;
                anchors.leftMargin: stayTipLeftMargin;
                anchors.top: parent.top;
                anchors.topMargin: stayTipTopMargin;
                width: enterTipW;
                height: enterTipH;
                color: "yellow"
                border.color: "#d5d5d5"
                visible: bShowTip;
                //oneLeft + 3 , oneTop + 15
                Text{
                    id: stayEextY;
                    anchors.left: parent.left;
                    anchors.leftMargin: 3;
                    anchors.top: parent.top;
                    anchors.topMargin: 2;
                    text: "y: " + stayTipY
                    color: "#d5d5d5"
                    font.family: "微软雅黑";
                    font.pixelSize: 13;
                }
                Text{
                    id: stayEextX;
                    anchors.left: parent.left;
                    anchors.leftMargin: 3;
                    anchors.top: parent.top;
                    anchors.topMargin: 17;
                    text: "x: " + stayTipX;
                    color: "#d5d5d5"
                    font.family: "微软雅黑";
                    font.pixelSize: 13;
                }
            }

            //*********************************

        }
    }
}

效果图