13--Qt的chartView的x和y轴触发

标签（空格分隔）： Qt

使用chartView实现触发x轴y轴显示相应的坐标信息

demo

import QtQuick 2.9
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 ydata: [300,220,115,445,112,446,100,341,220,118,148, 200];
    property real oneMouseH: 0;
    property real oneMouseW: 0;
    property real xtip: 0; //浮动显示的x，y提示值
    property real ytip: 0; //浮动显示的x，y提示值
    property var realTimeArray: new Array;
    property bool bShowTip: false;
    property int tipRectW: 150;
    property int tipRectH: 36;
    property int tipRectLeftMargin: 5;
    property int tipRectTopMargin: 5;

    function updateChart()
    {
        axisY.max = Math.max.apply(null, ydata);
        axisY.min = Math.min.apply(null, ydata);
        for (var i = 0; i < 11; i++)
        {
            line.append(xdata[i],ydata[i]);
        }
    }

    //
    function getPositionValue(pointX, pointY)
    {
        var tempx, tempy;
        if(xdata.length > 0)
        {
            tempx = xdata[0];
            tempy = ydata[0];

            ytip = ydata[0];
            xtip = ydata[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 - tempx))
                {   //var j = i-1;
                    tempx = xdata[i];
                    tempy = ydata[i];
                    //print("yOrdinate===========", yOrdinate, i, realTimeArray[i])
                }
            }
            //利用当前的值映射出坐标，然后画出两条线
            var mapPoint = achartview.mapToPosition(Qt.point(tempx, tempy), testArea);

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

            oneMouseH = mapPoint.y;
            oneMouseW = mapPoint.x;
            xtip = tempx;
            ytip = tempy;
        }
    }

    function getTipPosFun(onePoint)
    {
        //最常见的时候都是处于1：左上
        tipRectLeftMargin = onePoint.x - tipRectW - 5;
        tipRectTopMargin = onePoint.y - tipRectH - 5;
        print("tipRectPosArray--------", onePoint, tipRectLeftMargin, tipRectTopMargin)
        if(tipRectLeftMargin < 20)  //右上的位置
        {
            tipRectLeftMargin = onePoint.x + 5
        }
        if(onePoint.y - tipRectH <  20) //右下或者左下
        {
            tipRectTopMargin = onePoint.y + 5;
        }

    }

    ChartView {
        id: achartview
        anchors.fill: parent;

        //plotAreaColor: "#3c3f45"
        legend.visible: false
        legend.alignment: Qt.AlignBottom
        antialiasing: true;
        dropShadowEnabled: true
        backgroundColor: "#444851"
        //backgroundRoundness: 20
        animationOptions: ChartView.SeriesAnimations
        //count: 2
        theme: ChartView.ChartThemeQt;//设置主题 也可以用backgroundColor;

//        DateTimeAxis {
//            id: axisX;
//            format: "HH:mm"; //"yyyy MMM dd";HH:mm mm:ss
//            tickCount: 12;
//            //            min : Date.fromLocaleString(Qt.locale(), "2018-05-09 8:00:00", "yyyy-MM-dd hh:mm:ss");
//            //            max : Date.fromLocaleString(Qt.locale(), "2018-09-17 20:00:00", "yyyy-MM-dd hh:mm:ss");
//            min: new Date(new Date() - 11*24*60*60*1000);
//            max: new Date();

//        }
        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: ydata.length;
            labelFormat: "%.0f";
            labelsColor: "#999999";//坐标轴上的字体颜色
            gridLineColor: "#3c3f45"
            color: "#3c3f45"
        }
        AreaSeries {
            id:testArea;
            axisX: axisX;
            axisY: axisY;
            color: "#0ddeff";
            borderColor: "#1699ae";
            opacity: 0.3;
            borderWidth: 3;
            pointLabelsClipping: false
            useOpenGL: false
            upperSeries: LineSeries {
                id: line;
            }

            Component.onCompleted: {
                updateChart();
            }
        }

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

            }
            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: "red";
                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: tipRect;
                anchors.left: parent.left;
                anchors.leftMargin: tipRectLeftMargin;
                anchors.top: parent.top;
                anchors.topMargin: tipRectTopMargin;
                width: tipRectW;
                height: tipRectH;
                color: "#1690f5"
                border.color: "#d5d5d5"
                visible: bShowTip;
                //oneLeft + 3 , oneTop + 15
                Text{
                    id: ytext;
                    anchors.left: parent.left;
                    anchors.leftMargin: 3;
                    anchors.top: parent.top;
                    anchors.topMargin: 2;
                    text: "y: " + ytip
                    color: "#d5d5d5"
                    font.family: "微软雅黑";
                    font.pixelSize: 13;
                }
                Text{
                    id: xtext;
                    anchors.left: parent.left;
                    anchors.leftMargin: 3;
                    anchors.top: parent.top;
                    anchors.topMargin: 17;
                    text: "x: " + xtip;
                    color: "#d5d5d5"
                    font.family: "微软雅黑";
                    font.pixelSize: 13;
                }
            }
        }
    }
}

x和y轴触发