Артем
Артем

Reputation: 1

The QChart in Qt 5.15 freezes when zooming out to a very small scale

The QChart in Qt 5.15 freezes when zooming out to a very small scale. As you continue to zoom in on the QChart in Qt 5.15, the application progressively slows down, resulting in significant lag and delays. The chart becomes less responsive with each zoom level increase, causing a noticeable drop in performance. This issue is particularly evident when handling large datasets or when the zoom level reaches a high magnification, where the rendering and interaction with the chart start to feel sluggish and unresponsive.

`import QtQuick 2.15
import QtQuick.Window 2.15
import QtQml 2.12
import QtCharts 2.3

Window {
    id: itemChart
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    property alias chartView: chartView
    ListModel { id: stackZoomModel;  }

    property real initialDistanceMin: -2
    property real initialDistanceMax: 1000
    property real initialAltitudeMin: 0
    property real initialAltitudeMax: 800

    function appendZoomLevelStack () {
        stackZoomModel.append({"xmin" : distanceAxis.min, "xmax" : distanceAxis.max,
                                  "ymin":altitudeAxis.min,"ymax":altitudeAxis.max})


    }
    property real valueDistanceMin: -2
    property real valueDistanceMax: 1000
    property real valueAltitudeMin: 0
    property real valueAltitudeMax: 800
    Rectangle {
        anchors.fill: parent
        color : "black"
        ChartView {
            id:chartView
            opacity: 0.90
            margins.top: 0
            margins.bottom: 0
            margins.right: 0
            margins.left: 0
            // backgroundColor: themeParameters.colorChartViewBackground
            backgroundColor:  chartView.themeChart ? themeParameters.colorChartViewBackground  : "black"
            width: parent.width - 35
            height: parent.height
            anchors.right: parent.right
            legend.visible: false
            antialiasing: false
            dropShadowEnabled: false




            ValueAxis {
                id: distanceAxis
                titleText: "<font 4='white'>Distance</font>"
                min:-2
                max: initialDistanceMax  
                // tickCount:  chartView.themeChart ? 6 : 2   
                tickCount:   6      
                minorTickCount: 1  
                gridVisible: false
                minorGridVisible: true
                // color: chartView.themeChart ? "white"  : chartView.areaLineColor
                color: "white"
                gridLineColor:  "white"
                labelsColor:   "white"
                labelFormat: "%.0f " // "%.0f km" 
                // titleVisible: true
                titleVisible: false
            }

            ValueAxis {
                id: altitudeAxis
                // titleText: "Altitude"
                titleText: "<font color='white'>Altitude</font>"
                min: 0
                max: initialAltitudeMax 
                tickCount:  5   
                minorTickCount: 1  
                gridVisible: false
                minorGridVisible: true
                color: "white"
                gridLineColor:  "white"
                labelsColor:   "white"
                labelFormat: "%.0f" // "%.0f km" якщо потрібно повернути розмірність
                titleVisible: false

            }

            LineSeries {
                id:series
                axisX: distanceAxis
                axisY: altitudeAxis
                color: "lightblue"
                style: Qt.DashLine
                // visible: false
                pointsVisible: true
            }
            LineSeries {
                id:seriesMaxLtitude
                axisX: distanceAxis
                axisY: altitudeAxis
                color : "red"
                style:    Qt.DotLine
                XYPoint { x: -99999; y: 700}
                XYPoint { x: +99999; y: 700 }
                opacity: 1
                width: chartView.themeChart ? 1 :  2
            }
            Rectangle {
                id: selectionRect
                color: "transparent"
                border.color: "white"
                visible: false
                z: 5
                radius: 5
                border.width: 2
                opacity: 0.6

                Rectangle {
                    id: selectionRectangleBorder
                    color: "white"
                    opacity: 0.2
                    z: 5
                    anchors.fill: parent
                    radius: 5
                }
            }
            MouseArea {
                id:  mouseAreaDrag
                anchors.fill: parent
                acceptedButtons: Qt.LeftButton | Qt.RightButton
                hoverEnabled: true
                cursorShape:  getCursorShape()
                property point pressPoint
                property real startPointX: 0
                property real startX: 0
                property real finishX: 0

                property real startY: 0
                property real finishY: 0

                property real dragStartX: 0
                property real dragStartY: 0

                function getCursorShape () {

                    if (mouseAreaDrag.enabled )  {
                        if (mouseAreaDrag.dragActive)  return Qt.ClosedHandCursor
                        else {return Qt.OpenHandCursor}
                    }

                }
                property bool draggingX: false
                property bool draggingY: false

                property bool dragActive : false

                onPressed: {
                    if (mouse.button == Qt.LeftButton) {
                        dragStartX = mouse.x
                        startX = distanceAxis.min
                        finishX = distanceAxis.max


                        dragStartY = mouse.y
                        startY = altitudeAxis.min
                        finishY = altitudeAxis.max


                        draggingX = false
                        draggingY = false

                        dragActive = true
                    }
                }

                onReleased:  {
                    dragActive = false
                }

                onPositionChanged: { // перетягування без меж
                    if (mouse.buttons & Qt.LeftButton) {
                        // if (!draggingX && !draggingY) {
                            // Визначаємо напрямок перетягування
                            if (Math.abs(mouse.x - dragStartX) > Math.abs(mouse.y - dragStartY)) {
                                draggingX = true
                            } else {
                                draggingY = true
                            }
                        // }

                        // if (draggingX) {
                            var deltaX = (mouse.x - dragStartX) * (distanceAxis.max - distanceAxis.min) / parent.width
                            distanceAxis.min = startX - deltaX
                            distanceAxis.max = finishX - deltaX
                        // }

                        // if (draggingY) {
                            var deltaY = (mouse.y - dragStartY) * (altitudeAxis.max - altitudeAxis.min) / parent.height
                            altitudeAxis.min = startY + deltaY
                            altitudeAxis.max = finishY + deltaY
                        // }
                    }
                }

                onWheel: { // перетягування по двом осям
                    var zoomFactor = wheel.angleDelta.y > 0 ? 0.9 : 1.1
                    var mouseX = wheel.x / parent.width
                    var mouseY = wheel.y / parent.height

                    var rangeX = (distanceAxis.max - distanceAxis.min) * zoomFactor
                    var rangeY = (altitudeAxis.max - altitudeAxis.min) * zoomFactor

                    var newMinX = distanceAxis.min + (distanceAxis.max - distanceAxis.min) * mouseX * (1 - zoomFactor)
                    var newMaxX = newMinX + rangeX
                    var newMinY = altitudeAxis.min + (altitudeAxis.max - altitudeAxis.min) * mouseY * (1 - zoomFactor)
                    var newMaxY = newMinY + rangeY


                    distanceAxis.min = newMinX
                    distanceAxis.max = newMaxX
                    altitudeAxis.min = newMinY
                    altitudeAxis.max = newMaxY


                }

                // onWheel: {
                //     if (wheel.angleDelta.y > 0) {
                //         chartView.zoomIn();
                //     } else {
                //         chartView.zoomOut();
                //     }
                // }
            }
        }
    }
}

tried using built-in solutions

        // onWheel: {
                // if (wheel.angleDelta.y > 0) {
                // chartView.zoomIn();
                // } else {
                // chartView.zoomOut();
                // }
                // }`

but nothing helped`

Upvotes: 0

Views: 28

Answers (0)

Related Questions