Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. QtCharts - PolarChartView: How to reverse an axis?
Forum Updated to NodeBB v4.3 + New Features

QtCharts - PolarChartView: How to reverse an axis?

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
1 Posts 1 Posters 393 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • P Offline
    P Offline
    pga4711
    wrote on last edited by pga4711
    #1

    Hello,

    I am trying to reverse an axis in a PolarChartView. Especially the angular axis are very important. I have this example code here for a demostration

    import QtQuick 2.12
    import QtQuick.Window 2.12
    import QtQuick.Controls 2.5
    import QtCharts 2.3
    import QtQuick.Layouts 1.12
    
    Window {
        visible: true
        width: 800
        height: 400
    
        RowLayout {
            anchors.fill: parent
    
            ListModel {
                id: mdl
                ListElement { a: 47;  r: 10 }
                ListElement { a: 80;  r: 6  }
                ListElement { a: 110; r: 5  }
                ListElement { a: 139; r: 4  }
                ListElement { a: 155; r: 3  }
                ListElement { a: 170; r: 0  }
            }
    
            ChartView {
                Layout.fillHeight: true
                Layout.fillWidth: true
                legend.visible: false
                Layout.column: 0
                Layout.row: 0
    
                ValueAxis {
                    id: axisX
                    min: 0
                    max: 10
                    reverse: reverse_Switch2.checked
                    visible: true
                    onReverseChanged: console.log("axisX.reverse: " + reverse)
                }
    
                ValueAxis {
                    id: axisY
                    visible: true
                    min: 0
                    max: 360
                    reverse: reverse_Switch1.checked
                    onReverseChanged: console.log("axisY.reverse: " + axisY.reverse)
                }
    
                LineSeries {
                    id: lineSeries
                    axisX: axisX
                    axisY: axisY
                    visible: true
                }
    
                Component.onCompleted: {
                    for (var i = 0; i < mdl.count ; i++) lineSeries.append(mdl.get(i).r, mdl.get(i).a)
                }
            }
    
            PolarChartView {
                Layout.fillHeight: true
                Layout.fillWidth: true
                legend.visible: false
                Layout.column: 1
                Layout.row: 0
    
                ValueAxis {
                    id: axisAngular
                    min: 0
                    max: 360
                    reverse: reverse_Switch2.checked  //This is important to work, but it do not work. :<
                    tickCount: 9
                    onReverseChanged: console.log("axisAngular.reverse: " + reverse)
                }
    
                ValueAxis {
                    id: axisRadial
                    min: 0
                    max: 10
                    reverse: reverse_Switch1.checked
                    tickCount: 6
                    onReverseChanged: console.log("axisRadial.reverse: " + reverse)
                }
    
                SplineSeries {
                    id: splineSeries
                    axisAngular: axisAngular
                    axisRadial: axisRadial
                    pointsVisible: true
                }
    
                Component.onCompleted: {
                    for (var i = 0; i < mdl.count ; i++) splineSeries.append(mdl.get(i).a, mdl.get(i).r)
                }
            }
    
            ColumnLayout {
                Switch { id: reverse_Switch1 }
    
                Switch { id: reverse_Switch2 }
            }
        }
    }
    

    Here is a GIF of how this example behaves. So to the left we have an ordinary ChartView where we can reverse the different axis. To the left we have this PolarChartView where we also trying to reverse the axis. But flipping this reverse property in the ValueAxis does not create the desired effect :/

    0_1553697767853_TryingtoReverseRadialAxis.gif

    I used a raster-editing program to show you the desired effect.
    0_1553697788293_PolarChartViewReverseCheat.png

    How to actually reverse the axis in the PolarChartView? Someone who know? Maybe there is a bug? How to think here? :)

    1 Reply Last reply
    0

    • Login

    • Login or register to search.
    • First post
      Last post
    0
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Get Qt Extensions
    • Unsolved