Qml Customizations▲

Image non disponible

This example shows a wheel of fortune by customizing a pie series.

Running the Example▲

To run the example from Qt Creator, open the Welcome mode and select the example from Examples. For more information, visit Building and Running an Example.

Customizing Chart Views▲

First we create the ChartView and a couple of series.

 
Sélectionnez
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
    }
}

The application data is generated in Component.onCompleted of the main rectangle:

 
Sélectionnez
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;
}

The following customizations are done repeatedly with a timer. To highlight one of the pie slices at time we modify its exploded property:

 
Sélectionnez
wheelOfFortune.at(index).exploded = false;
__activeIndex++;
index = __activeIndex % wheelOfFortune.count;
wheelOfFortune.at(index).exploded = true;

Then an animation using a scatter series with one data point: