在QML中拖动QtCharts上的一个点

5

我正在尝试在qtcharts上拖动LineSeries上的一个点。这是我的代码:

import QtQuick 2.0
import QtCharts 2.0

Item {
    anchors.fill: parent

    ChartView {
        title: "Two Series, Common Axes"
        anchors.fill: parent

        ValueAxis {
            id: axisX
            min: 0
            max: 10
            tickCount: 5
        }

        ValueAxis {
            id: axisY
            min: -0.5
            max: 1.5
        }

        LineSeries {
            id: series1
            axisX: axisX
            axisY: axisY
            onPressed: console.log("Pressed: " + point.x + ", " + point.y);   
            onReleased: console.log("Released: " + point.x + ", " + point.y);
        }


    }
    // Add data dynamically to the series
    Component.onCompleted: {
        for (var i = 0; i <= 10; i++) {
            series1.append(i, Math.random());
        }
    }
}

当我按下Lineserie上的一个点时,我可以在控制台中看到我按下和释放的点的x、y值。但是两个值都相同,所以我无法看到释放的位置。我想拖动一个点到另一个位置,这样如果我按下一个点,它会跟随鼠标/触摸屏指针移动,直到我在图表上释放。有人能帮忙一下从哪里开始并使用哪些属性吗?


线条的一部分是连接系列中属于点的线条,如果按下这些点会发生什么?它们应该移动吗?移动这些点意味着在曲线上创建新的点。 - eyllanesc
是的,它们应该移动,正如你所说,这将导致在图表中创建新的点。 - PHA
1个回答

5

很不幸,ChartViewLineSeries都没有MouseMove事件,因此很难跟踪拖动事件。我有一个解决方法,使用MouseArea放置在图表上方。也许这是一个愚蠢的解决方法,但至少它能够工作。我已经将其应用到您的示例中:

ChartView {
    id: chart
    property var selectedPoint: undefined
    title: "Two Series, Common Axes"
    anchors.fill: parent
    antialiasing: true
    property real toleranceX: 0.05
    property real toleranceY: 0.05

    ValueAxis {
        id: axisX
        min: 0
        max: 10
        tickCount: 5
    }

    ValueAxis {
        id: axisY
        min: -0.5
        max: 1.5
    }

    LineSeries {
        id: series1
        axisX: axisX
        axisY: axisY
        pointsVisible: true            
    }

    MouseArea {
        anchors.fill: parent
        onPressed:
        {
            var cp = chart.mapToValue(Qt.point(mouse.x,mouse.y));
            for(var i = 0;i < series1.count;i ++)
            {
                var p = series1.at(i);
                if(Math.abs(cp.x - p.x) <= chart.toleranceX && Math.abs(cp.y - p.y) <= chart.toleranceY)
                {
                    chart.selectedPoint = p;
                    break;
                }
            }
        }
        onPositionChanged: {
            if(chart.selectedPoint != undefined) {
                var p = Qt.point(mouse.x, mouse.y);
                var cp = chart.mapToValue(p);
                if(cp.x >= axisX.min && cp.x <= axisX.max && cp.y >= axisY.min && cp.y <= axisY.max) {
                    series1.replace(chart.selectedPoint.x, chart.selectedPoint.y, cp.x, cp.y);
                    chart.selectedPoint = cp;
                }
            }
        }

        onReleased: {
            chart.selectedPoint = undefined;
        }
    }

}
// Add data dynamically to the series
Component.onCompleted: {
    for (var i = 0; i <= 10; i++) {            
        series1.append(i, Math.random());
    }
} 

非常感谢您提供一个可行的答案。在我的情况下,我应该将toleranceX增加到0.5才能够捕捉到图表上的点。然而,这段代码还有两个小问题。首先,我可以将点拖出轴X和轴Y,也就是图表上的网格线。另一个问题是,由于我有两个LineSeries,series1和series2,有时两个图形上的两个点太靠近了,当我试图拖动它们中的一个时,它们会粘在一起,没有办法摆脱它们。您有什么建议来解决这些问题吗? - PHA
我已经更新了示例,以解决将点移出场的问题。至于选择系列,我不知道,也许你可以通过键修改或其他方式选择必要的系列。 - folibis

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接