chartarea缩放_ChartView与LineSeries搭配实现曲线局部缩放功能

Rectangle {

id: view_rect

anchors.fill: parent//anchors.topMargin: 40

ChartView {

id: view

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

legend.visible:falseantialiasing:trueproperty point hoveredPoint: Qt.point(0, 0)

propertybool hovered: falseValueAxis {

id: axisX

min:0max:50tickCount:5}

ValueAxis {

id: axisY

min:-0.5max:1.5}

LineSeries {

id: series1

axisX: axisX

axisY: axisY

onHovered: {//view.hoveredPoint = point//view.hovered = state

}

}

MouseArea {

anchors.fill: parent

hoverEnabled:trueonPositionChanged: {var point = Qt.point( 0, 0)

point.x=mouse.x

point.y=mouse.yvar hoveredPoint =view.mapToValue( point, series1 )if( hoveredPoint.x >= 0 && hoveredPoint.x <= 50) {

view.hovered= trueview.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());

}

}

}