| 1 | NO CONTENT: new file 100644, binary diff hidden |
|
NO CONTENT: new file 100644, binary diff hidden |
| @@ -0,0 +1,26 | |||||
|
|
1 | /*! | |||
|
|
2 | \example demos/qmlcustomizations | |||
|
|
3 | \title Qml Customizations | |||
|
|
4 | \subtitle | |||
|
|
5 | ||||
|
|
6 | \image demos_qmlcustomizations.png | |||
|
|
7 | ||||
|
|
8 | This application shows you how to customize different visual properties of a ChartView and series. It shows | |||
|
|
9 | a wheel of fortune by customizing a pie series. | |||
|
|
10 | ||||
|
|
11 | First we create ChartView and a couple of series. | |||
|
|
12 | \snippet ../demos/qmlcustomizations/qml/qmlcustomizations/main.qml 1 | |||
|
|
13 | ||||
|
|
14 | The application data is generated in Component.onCompleted of the main rectangle: | |||
|
|
15 | \snippet ../demos/qmlcustomizations/qml/qmlcustomizations/main.qml 2 | |||
|
|
16 | ||||
|
|
17 | The following customizations are done repeatedly with a timer. To highlight one of the pie slices at time | |||
|
|
18 | we modify it's exploded property: | |||
|
|
19 | \snippet ../demos/qmlcustomizations/qml/qmlcustomizations/main.qml 3 | |||
|
|
20 | ||||
|
|
21 | Then an animation using a scatter series with one data point: | |||
|
|
22 | \snippet ../demos/qmlcustomizations/qml/qmlcustomizations/main.qml 4 | |||
|
|
23 | ||||
|
|
24 | When the wheel of fortune has stopped, we make the active slice blink by modifying it's colors. | |||
|
|
25 | \snippet ../demos/qmlcustomizations/qml/qmlcustomizations/main.qml 5 | |||
|
|
26 | */ | |||
| @@ -28,6 +28,7 Rectangle { | |||||
| 28 | property real __intervalCoefficient: 0 |
|
28 | property real __intervalCoefficient: 0 | |
| 29 |
|
29 | |||
| 30 |
|
30 | |||
|
|
31 | //![1] | |||
| 31 | ChartView { |
|
32 | ChartView { | |
| 32 | id: chartView |
|
33 | id: chartView | |
| 33 | anchors.fill: parent |
|
34 | anchors.fill: parent | |
| @@ -46,8 +47,9 Rectangle { | |||||
| 46 | id: scatterSeries |
|
47 | id: scatterSeries | |
| 47 | } |
|
48 | } | |
| 48 | } |
|
49 | } | |
|
|
50 | //![1] | |||
| 49 |
|
51 | |||
| 50 |
|
52 | //![2] | ||
| 51 | Component.onCompleted: { |
|
53 | Component.onCompleted: { | |
| 52 | __intervalCoefficient = Math.random() + 0.1; |
|
54 | __intervalCoefficient = Math.random() + 0.1; | |
| 53 |
|
55 | |||
| @@ -62,6 +64,7 Rectangle { | |||||
| 62 | chartView.axisX.max = j; |
|
64 | chartView.axisX.max = j; | |
| 63 | chartView.axisY.max = 1000; |
|
65 | chartView.axisY.max = 1000; | |
| 64 | } |
|
66 | } | |
|
|
67 | //![2] | |||
| 65 |
|
68 | |||
| 66 | Timer { |
|
69 | Timer { | |
| 67 | triggeredOnStart: true |
|
70 | triggeredOnStart: true | |
| @@ -71,21 +74,27 Rectangle { | |||||
| 71 | onTriggered: { |
|
74 | onTriggered: { | |
| 72 | var index = __activeIndex % wheelOfFortune.count; |
|
75 | var index = __activeIndex % wheelOfFortune.count; | |
| 73 | if (interval < 700) { |
|
76 | if (interval < 700) { | |
| 74 | scatterSeries.clear(); |
|
77 | //![3] | |
| 75 | wheelOfFortune.at(index).exploded = false; |
|
78 | wheelOfFortune.at(index).exploded = false; | |
| 76 | __activeIndex++; |
|
79 | __activeIndex++; | |
| 77 | index = __activeIndex % wheelOfFortune.count; |
|
80 | index = __activeIndex % wheelOfFortune.count; | |
| 78 | wheelOfFortune.at(index).exploded = true; |
|
81 | wheelOfFortune.at(index).exploded = true; | |
|
|
82 | //![3] | |||
| 79 | interval = splineSeries.at(__activeIndex).y; |
|
83 | interval = splineSeries.at(__activeIndex).y; | |
|
|
84 | //![4] | |||
|
|
85 | scatterSeries.clear(); | |||
| 80 | scatterSeries.append(__activeIndex, interval); |
|
86 | scatterSeries.append(__activeIndex, interval); | |
| 81 | scatterSeries.color = Qt.tint(scatterSeries.color, "#05FF0000"); |
|
87 | scatterSeries.color = Qt.tint(scatterSeries.color, "#05FF0000"); | |
| 82 | scatterSeries.markerSize += 0.5; |
|
88 | scatterSeries.markerSize += 0.5; | |
|
|
89 | //![4] | |||
| 83 | } else { |
|
90 | } else { | |
|
|
91 | //![5] | |||
| 84 | // Switch the colors of the slice and the border |
|
92 | // Switch the colors of the slice and the border | |
| 85 | wheelOfFortune.at(index).borderWidth = 2; |
|
93 | wheelOfFortune.at(index).borderWidth = 2; | |
| 86 | var borderColor = wheelOfFortune.at(index).borderColor; |
|
94 | var borderColor = wheelOfFortune.at(index).borderColor; | |
| 87 | wheelOfFortune.at(index).borderColor = wheelOfFortune.at(index).color; |
|
95 | wheelOfFortune.at(index).borderColor = wheelOfFortune.at(index).color; | |
| 88 | wheelOfFortune.at(index).color = borderColor; |
|
96 | wheelOfFortune.at(index).color = borderColor; | |
|
|
97 | //![5] | |||
| 89 | } |
|
98 | } | |
| 90 | } |
|
99 | } | |
| 91 | } |
|
100 | } | |
| @@ -17,6 +17,7 | |||||
| 17 | <li><a href="demos-piechartcustomization.html">Pie chart customization</a></li> |
|
17 | <li><a href="demos-piechartcustomization.html">Pie chart customization</a></li> | |
| 18 | <li><a href="demos-dynamicspline.html">Dynamic spline chart</a></li> |
|
18 | <li><a href="demos-dynamicspline.html">Dynamic spline chart</a></li> | |
| 19 | <li><a href="demos-qmlchart.html">Qml Basic Charts</a></li> |
|
19 | <li><a href="demos-qmlchart.html">Qml Basic Charts</a></li> | |
|
|
20 | <li><a href="demos-qmlcustomizations.html">Qml Customizations</a></li> | |||
| 20 | <li><a href="demos-qmlweather.html">Qml Weather</a></li> |
|
21 | <li><a href="demos-qmlweather.html">Qml Weather</a></li> | |
| 21 | <li><a href="demos-qmlf1legends.html">Qml F1 Legends</a></li> |
|
22 | <li><a href="demos-qmlf1legends.html">Qml F1 Legends</a></li> | |
| 22 | <li><a href="demos-qmlcustommodel.html">Qml Custom Model</a></li> |
|
23 | <li><a href="demos-qmlcustommodel.html">Qml Custom Model</a></li> | |
General Comments 0
You need to be logged in to leave comments.
Login now