效果图:
上一篇文章实现的时候还不知道有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函数内,这边是想让曲线饱满的覆盖在整个坐标内,所以对两个极端做了判断,超出范围就将边界值赋值给它;