Requesting support for Chartview Drag & drop with cross hair
-
HI I have requirement Chart view drag drop should work with cross hair. i have made sample code and it is working for drag drop but i am facing some issue with the cross hair is not plotting plot area. please support below is my code
If any solution kindly modify in below code which will help more.
///////////////////////////////////////////////////////////////////////////////
import QtQuick 2.15
import QtQuick.Window 2.15
import QtCharts 2.3
import QtQuick.Controls 2.15
import QtQuick.Controls.Styles 1.4
import QtQuick.Layouts 1.3
import QtGraphicalEffects 1.0
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
property int xAxis: 0
/*!
Holds y co-ordinate on mouse hover
*/
property int yAxis: 0
ColumnLayout {
RowLayout {
Button {
text: "zoomIn"
height: 30
onClicked: {
chartview.zoomIn()
}
}
Button {
text: "zoomOut"
height: 30
onClicked: {
chartview.zoomOut()
}
}
}
}ChartView { id: chartview anchors.topMargin: 50 property var selectedPoint: undefined anchors.fill: parent antialiasing: true dropShadowEnabled: true property real toleranceX: 0.5 property real toleranceY: 0.5 ValueAxis { id: axisX min: 0 max: 5 titleText: "Current(A)" labelsFont:Qt.font({pointSize: 12}) } ValueAxis { id: axisY min: -5 max: 5 tickInterval: 1 titleText: "Time(S)" labelsFont:Qt.font({pointSize: 12}) } LineSeries { id: series1 axisX: axisX axisY: axisY pointsVisible: true width: 3 color:"#007b3e" } MouseArea { anchors.fill: parent id: mousearea1 hoverEnabled: true x: chartview.plotArea.x y: chartview.plotArea.y width: chartview.plotArea.width height: chartview.plotArea.height property bool movable: true property real coordX property real coordY property real labelX property real labelY onPressed: { var cp = chartview.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) <= chartview.toleranceX && Math.abs(cp.y - p.y) <= chartview.toleranceY) { console.log("chartview.selectedPoint :" << chartview.selectedPoint) chartview.selectedPoint = p; break; } } } onPositionChanged: { var point = Qt.point(mouse.x, mouse.y); var cpoint = chartview.mapToValue(point); xAxis = cpoint.x yAxis = cpoint.y if(chartview.selectedPoint != undefined) { var p = Qt.point(mouse.x, mouse.y); var cp = chartview.mapToValue(p); if(cp.x >= axisX.min && cp.x <= axisX.max && cp.y >= axisY.min && cp.y <= axisY.max) { series1.replace(chartview.selectedPoint.x, chartview.selectedPoint.y, cp.x, cp.y); chartview.selectedPoint = cp; } } if (movable === true) { var p = Qt.point(mouseX + chartview.plotArea.x, mouseY + chartview.plotArea.y); var cp = chartview.mapToValue(p, series1); coordX = cp.x.toFixed(3) coordY = cp.y.toFixed(3) labelX = mouseX labelY = mouseY } } onEntered: { mouseLabel.visible = true horizontalLine.visible = true verticalLine.visible = true } onExited: { mouseLabel.visible = movable ? false : true horizontalLine.visible = movable ? false : true verticalLine.visible = movable ? false : true } Label { id: mouseLabel visible: false x: mousearea1.labelX + 1 y: mousearea1.labelY + 1 text: " x: " + mousearea1.coordX + "\n y: " + mousearea1.coordY } Rectangle { id: horizontalLine visible: false x: 0 y: mousearea1.labelY - 1 height: 2 width: chartview.plotArea.width color: "#007B3E" } Rectangle { id: verticalLine visible: false x: mousearea1.labelX - 1 y: 0 height: chartview.plotArea.height width: 2 color: "#007B3E" } onReleased: { chartview.selectedPoint = undefined; } } } // Add data to the series Component.onCompleted: { for (var i = 0; i <= 5; i++) { series1.append(i, Math.random()); } }
}