Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Animate PieSlice/PieSeries from old to new value



  • Hello it is possible to animate a PieSeries for exemple when change from 20% to 80% the animation move from 20% to 80%?

    transitions: are available in ChartView then i try this code but that not work can you help me?

    import QtQuick 2.15
    import QtQuick.Controls 2.5
    import QtCharts 2.15
    import QtQuick.Layouts 1.15
    
    GridLayout {
        id: omsDetail
        property int omsImageSize: 70
        property variant model
        columnSpacing: 70
        rowSpacing: 4
        columns: 2
        Layout.alignment: Qt.AlignHCenter
        
        Repeater {
            model: parent.model
            RowLayout {
                
                Layout.preferredWidth: omsDetail.omsImageSize
                Layout.preferredHeight: omsDetail.omsImageSize
                Image {
                    id: imOms2
                    Layout.alignment: Qt.AlignRight
                    Layout.preferredWidth: omsDetail.omsImageSize
                    Layout.preferredHeight: omsDetail.omsImageSize
                    source: "qrc:/oms/picture/oms"+model.omsNumber+".png"
                }
                
                ChartView {
                    height: omsDetail.omsImageSize
                    width: omsDetail.omsImageSize
                    plotArea: Qt.rect(0, 0, width, height)
                    id: pieOms2
                    plotAreaColor: "#00000000"
                    backgroundColor: "#00000000"
                    titleColor: "#00000000"
                    Layout.alignment: Qt.AlignLeft
                    Layout.preferredWidth: omsDetail.omsImageSize
                    Layout.preferredHeight: omsDetail.omsImageSize
                    legend.visible: false
                    
                    property double ok: model.okCleaning 
                    property double bad: model.badCleaning
                    transitions: [
                        Transition {
                            NumberAnimation { property: "ok"; duration: 2000 } //animation here
                        },
                        Transition {
                            NumberAnimation { property: "bad"; duration: 2000 } //and here
                        }
                    ]
                    
                    PieSeries {
                        size: 0.98
                        PieSlice {
                            id:pieOk
                            value: pieOms2.ok //for this value
                            color: "#00FF00"
                            
                        }
                        
                        PieSlice {
                            value: pieOms2.bad //and this value
                            color: "#ff8800"
                        }
                    }
                }
            }
        }
    }
    
    
    


  • hello
    i post solutions if other need

    i have fix size of the repeater else anim restart from 0

    import QtQuick 2.15
    import QtQuick.Controls 2.5
    import QtCharts 2.15
    import QtQuick.Layouts 1.15

    GridLayout {
    id: omsDetail
    property int omsImageSize: 70
    property variant model
    columnSpacing: 70
    rowSpacing: 4
    columns: 2
    Layout.alignment: Qt.AlignHCenter

    Repeater {
        model: 6
        RowLayout {
    
            Layout.preferredWidth: omsDetail.omsImageSize
            Layout.preferredHeight: omsDetail.omsImageSize
            Image {
                id: imOms2
                Layout.alignment: Qt.AlignRight
                Layout.preferredWidth: omsDetail.omsImageSize
                Layout.preferredHeight: omsDetail.omsImageSize
                source: "qrc:/oms/picture/oms"+model.omsNumber+".png"
            }
    
            ChartView {
                height: omsDetail.omsImageSize
                width: omsDetail.omsImageSize
                plotArea: Qt.rect(0, 0, width, height)
                id: pieOms2
                plotAreaColor: "#00000000"
                backgroundColor: "#00000000"
                titleColor: "#00000000"
                Layout.alignment: Qt.AlignLeft
                Layout.preferredWidth: omsDetail.omsImageSize
                Layout.preferredHeight: omsDetail.omsImageSize
                legend.visible: false
    
                property double nextOk: omsDetail.model[index].okCleaning
                property double nextBad: omsDetail.model[index].badCleaning
    
                onNextOkChanged:PropertyAnimation { target: pieOms2; property: "ok"; to: pieOms2.nextOk; easing.type:Easing.InOutQuad; easing.amplitude: 2.0; duration: 300 }
                onNextBadChanged:PropertyAnimation { target: pieOms2; property: "bad"; to: pieOms2.nextBad; easing.type:Easing.InOutQuad; easing.amplitude: 2.0; duration: 300 }
    
                property double ok: 0
                property double bad: 1
    
                PieSeries {
                    size: 0.98
                    PieSlice {
                        id:pieOk
                        value: pieOms2.ok
                        color: "#00FF00"
    
                    }
    
                    PieSlice {
                        value: pieOms2.bad
                        color: "#ff8800"
                    }
                }
            }
        }
    }
    

    }


Log in to reply