如何在qml中缩放图表视图并点击散点？

Question

我希望能够放大和缩小图表。为此，我可以使用 MouseArea。但是使用它时我无法再单击分散点。我该如何处理这个问题？

是否可以在不使用 MouseArea 的情况下进行缩放？

import QtQuick 2.12
import QtQuick.Window 2.12
import QtCharts 2.3

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    ChartView {
        id: chart
        anchors.fill: parent
        antialiasing: true
        legend.visible: false

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

        ValueAxis {
            id: axisY
            min: 0
            max: 10
        }

        ScatterSeries {
            id: scatterSeries
            name: "Scatter Data"
            axisX: axisX
            axisY: axisY
            Component.onCompleted: {
                scatterSeries.append(1, 1);
                scatterSeries.append(2, 2);
                scatterSeries.append(3, 3);
                scatterSeries.append(4, 4);
                scatterSeries.append(5, 5);
            }
            onClicked: {
                console.log("Clicked point:", point.x, point.y)
            }
        }

        MouseArea {
            id: mouseArea
            anchors.fill: parent
            drag.target: chart
            onWheel: wheelEvent => {
                const factor = wheelEvent.angleDelta.y > 0 ? 1.2 : 0.8;
                chart.zoom(factor);
            }
        }
    }
}

Answer 1

使用 WheelHandler 而不是

MouseArea

：

            /*
            MouseArea {
                id: mouseArea
                anchors.fill: parent
                drag.target: chart
                onWheel: wheelEvent => {
                    const factor = wheelEvent.angleDelta.y > 0 ? 1.2 : 0.8;
                    chart.zoom(factor);
                }
            }
            */

            WheelHandler {
                id: wheelHandler
                onWheel: wheelEvent => {
                    const factor = wheelEvent.angleDelta.y > 0 ? 1.2 : 0.8;
                    chart.zoom(factor);
                }
            }