Anpassen von Diagrammansichten mit QML

Screenshot, der ein Diagramm mit zwei Datenreihen zeigt: Eine davon ist ein Kreisdiagramm mit einem blauen Farbverlauf, die andere ein Liniendiagramm mit einem orangefarbenen Punkt

Hinweis: Dies ist Teil des Beispiels „Diagramme mit QML“ in der Galerie.

Hier zeigen wir Ihnen, wie Sie durch Anpassen einer Kreisdiagrammreihe ein Glücksrad erstellen können.

Zunächst erstellen wir die „ChartView“ und einige Serien.

ChartView {
    id: chartView
    anchors.fill: parent
    title: "Wheel of Fortune"
    legend.visible: false
    antialiasing: true

    PieSeries {
        id: wheelOfFortune
        horizontalPosition: 0.3
    }

    SplineSeries {
        id: splineSeries
    }

    ScatterSeries {
        id: scatterSeries
    }
}

Die Anwendungsdaten werden in „Component.onCompleted“ des Hauptrechtecks generiert:

Component.onCompleted: {
    __intervalCoefficient = Math.random() + 0.25;

    for (var i = 0; i < 20; i++)
        wheelOfFortune.append("", 1);

    var interval = 1;
    for (var j = 0; interval < 800; j++) {
        interval = __intervalCoefficient * j * j;
        splineSeries.append(j, interval);
    }
    chartView.axisX(scatterSeries).max = j;
    chartView.axisY(scatterSeries).max = 1000;
}

Die folgenden Anpassungen werden mithilfe eines Timers wiederholt durchgeführt. Um jeweils eines der Tortenstücke hervorzuheben, ändern wir dessen „exploded“-Eigenschaft:

wheelOfFortune.at(index).exploded = false;
root.__activeIndex++;
index = root.__activeIndex % wheelOfFortune.count;
wheelOfFortune.at(index).exploded = true;

Anschließend folgt eine Animation unter Verwendung einer Streudiagramm-Reihe mit einem Datenpunkt:

scatterSeries.clear();
scatterSeries.append(root.__activeIndex, interval);
scatterSeries.color = Qt.tint(scatterSeries.color, "#05FF0000");
scatterSeries.markerSize += 0.5;

Wenn das Glücksrad zum Stillstand gekommen ist, lassen wir das aktive Segment blinken, indem wir dessen Farben ändern.

// Switch the colors of the slice and the border
wheelOfFortune.at(index).borderWidth = 2;
switchColor = wheelOfFortune.at(index).borderColor;
wheelOfFortune.at(index).borderColor = wheelOfFortune.at(index).color;
wheelOfFortune.at(index).color = switchColor;

© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.