Personnalisation des vues de graphiques avec QML

Capture d'écran montrant un graphique avec deux séries de données, l'une est un graphique circulaire avec un dégradé bleu, et l'autre est un graphique linéaire avec un point orange.

Note : Ceci fait partie de l'exemple de la galerie Charts with QML.

Nous vous montrons ici comment créer une roue de la fortune en personnalisant une série de camemberts.

Nous commençons par créer le site ChartView et quelques séries.

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
    }
}

Les données de l'application sont générées dans Component.onCompleted du rectangle principal :

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;
}

Les personnalisations suivantes sont effectuées de manière répétée à l'aide d'un minuteur. Pour mettre en évidence l'une des parts de tarte à un moment donné, nous modifions sa propriété exploded :

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

Ensuite, une animation utilisant une série de dispersion avec un seul point de données :

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

Lorsque la roue de la fortune s'est arrêtée, nous faisons clignoter la part active en modifiant ses couleurs.

// 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.