C

Qt Quick Ultralite charts Example

/****************************************************************************** ** ** Copyright (C) 2020 The Qt Company Ltd. ** Contact: https://www.qt.io/licensing/ ** ** This file is part of the Qt Quick Ultralite module. ** ** $QT_BEGIN_LICENSE:COMM$ ** ** Commercial License Usage ** Licensees holding valid commercial Qt licenses may use this file in ** accordance with the commercial license agreement provided with the ** Software or, alternatively, in accordance with the terms contained in ** a written agreement between you and The Qt Company. For licensing terms ** and conditions see http://www.qt.io/terms-conditions. For further ** information use the contact form at http://www.qt.io/contact-us. ** ** $QT_END_LICENSE$ ** ******************************************************************************/
import QtQuick 2.15 import QtCharts 2.15 Item { id: root property color axisLabelColor: Qt.rgba(0.5, 0.5, 0.5) property color axisLabelTransparent: Qt.rgba(0.5, 0.5, 0.5, 0) property int transitionDuration: 1000 property bool enableBehaviors: true function resetBarValues() { bsv1.value = axisY.min bsv2.value = axisY.min bsv3.value = axisY.min bsv4.value = axisY.min bsv5.value = axisY.min bsv6.value = axisY.min } SequentialAnimation { id: toYear ParallelAnimation { ScriptAction { script: { resetBarValues() axisX.labelsColor = axisLabelTransparent axisY.labelsColor = axisLabelTransparent } } PauseAnimation { duration: transitionDuration } } ScriptAction { script: { enableBehaviors = false bcv1.value = "Jan" bcv2.value = "Feb" bcv3.value = "Mar" bcv4.value = "Apr" bcv5.value = "Mai" bcv6.value = "Jun" axisY.min = 10 axisY.max = 100 resetBarValues() enableBehaviors = true } } ParallelAnimation { ScriptAction { script: { bsv1.value = 70 bsv2.value = 50 bsv3.value = 55 bsv4.value = 57 bsv5.value = 35 bsv6.value = 15 axisX.labelsColor = axisLabelColor axisY.labelsColor = axisLabelColor } } PauseAnimation { duration: transitionDuration } } } SequentialAnimation { id: toMonth ParallelAnimation { ScriptAction { script: { resetBarValues() axisX.labelsColor = axisLabelTransparent axisY.labelsColor = axisLabelTransparent } } PauseAnimation { duration: transitionDuration } } ScriptAction { script: { enableBehaviors = false bcv1.value = "11.05." bcv2.value = "12.05." bcv3.value = "13.05." bcv4.value = "14.05." bcv5.value = "15.05." bcv6.value = "16.05." axisY.min = 1 axisY.max = 4 resetBarValues() enableBehaviors = true } } ParallelAnimation { ScriptAction { script: { bsv1.value = 2.6 bsv2.value = 2.1 bsv3.value = 1.5 bsv4.value = 1.7 bsv5.value = 1.95 bsv6.value = 1.55 axisX.labelsColor = axisLabelColor axisY.labelsColor = axisLabelColor } } PauseAnimation { duration: transitionDuration } } } ChartView { anchors.fill: parent margins.left: 80 margins.right: 50 margins.bottom: 50 margins.top: 50 backgroundColor: "#eeeeee" BarSeries { axisX: BarCategoryAxis { id: axisX gridVisible: false lineVisible: false labelsFont.pixelSize: 12 labelsColor: root.axisLabelColor Behavior on labelsColor { ColorAnimation { duration: transitionDuration } } BarCategoryValue { id: bcv1; value: "11.05." } BarCategoryValue { id: bcv2; value: "12.05." } BarCategoryValue { id: bcv3; value: "13.05." } BarCategoryValue { id: bcv4; value: "14.05." } BarCategoryValue { id: bcv5; value: "15.05." } BarCategoryValue { id: bcv6; value: "16.05." } } axisY: ValueAxis { id: axisY min: 1.0 max: 4.0 tickCount: 4 lineVisible: false labelsFont.pixelSize: 12 labelsColor: root.axisLabelColor labelFormat: "%d kWh" Behavior on labelsColor { ColorAnimation { duration: transitionDuration } } } BarSet { color: "#5555ee" BarSetValue { id: bsv1 value: 2.6 Behavior on value { enabled: enableBehaviors; NumberAnimation { duration: transitionDuration } } } BarSetValue { id: bsv2 value: 2.1 Behavior on value { enabled: enableBehaviors; NumberAnimation { duration: transitionDuration } } } BarSetValue { id: bsv3 value: 1.5 Behavior on value { enabled: enableBehaviors; NumberAnimation { duration: transitionDuration } } } BarSetValue { id: bsv4 value: 1.7 Behavior on value { enabled: enableBehaviors; NumberAnimation { duration: transitionDuration } } } BarSetValue { id: bsv5 value: 1.95 Behavior on value { enabled: enableBehaviors; NumberAnimation { duration: transitionDuration } } } BarSetValue { id: bsv6 value: 1.55 Behavior on value { enabled: enableBehaviors; NumberAnimation { duration: transitionDuration } } } } } } Row { anchors.horizontalCenter: parent.horizontalCenter anchors.top: parent.top anchors.margins: 40 spacing: 20 Text { text: "Month" MouseArea { anchors.fill: parent onClicked: toMonth.start() } } Text { text: "Year" MouseArea { anchors.fill: parent onClicked: toYear.start() } } } }