Animate PieSlice/PieSeries from old to new value
Solved
QML and Qt Quick
-
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 needi 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.15GridLayout {
id: omsDetail
property int omsImageSize: 70
property variant model
columnSpacing: 70
rowSpacing: 4
columns: 2
Layout.alignment: Qt.AlignHCenterRepeater { 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" } } } } }
}