Customizing Chart Views with QML

注意： This is part of the Charts with QML Gallery 范例。

Here we show you how to create a wheel of fortune by customizing a pie series.

First we create the ChartView and a couple of series.

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:

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:

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

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

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

When the wheel of fortune has stopped, we make the active slice blink by modifying its colors.

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