效果圖：

上一篇文章實現的時候還不知道有QtChart這個模塊......好好看了下資料就想做個例子實現一下這功能，比較了下代碼量...恩，直接看代碼：

    Rectangle {        id: view_rect        anchors.fill: parent//        anchors.topMargin: 40        ChartView {            id: view            title: "Two Series, Common Axes"            anchors.fill: parent            legend.visible: false            antialiasing: true            PRoperty point hoveredPoint: Qt.point( 0, 0 )            property bool hovered: false            ValueAxis {                id: axisX                min: 0                max: 50                tickCount: 5            }            ValueAxis {                id: axisY                min: -0.5                max: 1.5            }            LineSeries {                id: series1                axisX: axisX                axisY: axisY                onHovered: {//                    view.hoveredPoint = point//                    view.hovered = state                }            }            MouseArea {                anchors.fill: parent                hoverEnabled: true                onPositionChanged: {                    var point = Qt.point( 0, 0 )                    point.x = mouse.x                    point.y = mouse.y                    var hoveredPoint = view.mapToValue( point, series1 )                    if( hoveredPoint.x >= 0 && hoveredPoint.x <= 50 ) {                        view.hovered = true                        view.hoveredPoint = hoveredPoint                    } else {                        view.hovered = false                    }                }                onWheel: {                    if( view.hovered ) {                        if( wheel.angleDelta.y > 0 ) {                            if( axisX.max - axisX.min <= 2 ) {                                return                            }                            view.zoomIn( view.hoveredPoint )                        } else {                            view.zoomOut( view.hoveredPoint )                            if( axisX.min <= 0 ) {                                axisX.min = 0                            }                            if( axisX.max >= 50 ) {                                axisX.max = 50                            }                        }                    }                }            }            function zoomIn( hoveredPoint ) {                if( hoveredPoint.x - axisX.min <= 1 ) {                    return                }                var scale = parseFloat( ( hoveredPoint.x - axisX.min ) / ( axisX.max - axisX.min ) )                axisX.min++                axisX.max = ( hoveredPoint.x - axisX.min ) / scale + axisX.min            }            function zoomOut( hoveredPoint ) {                var scale = parseFloat( ( hoveredPoint.x - axisX.min ) / ( axisX.max - axisX.min ) )                axisX.min--                axisX.max = ( hoveredPoint.x - axisX.min ) / scale + axisX.min            }        }        // Add data dynamically to the series        Component.onCompleted: {            for (var i = 0; i <= 50; i++) {                series1.append(i, Math.random());            }        }    }
實現該功能最關鍵在于獲取鼠標位置對應的坐標值，ChartView提供一個方法mapToValue，指明一個point與series，就可獲得這個point對應series的坐標值。現在通過一個覆蓋整個ChartView的MouseArea獲取mouse，轉換成point，當鼠標在坐標軸內移動時，就可記錄到hoveredPoint內。放大功能我寫在zoomIn函數內，這里每次放大的值只是將最小值+1，可自己調整。注意一點的是hoverPoint.x是不能小于axisX.min的，所以我在放大前做了判斷；縮小功能我寫在zoomOut函數內，這邊是想讓曲線飽滿的覆蓋在整個坐標內，所以對兩個極端做了判斷，超出范圍就將邊界值賦值給它；