|
|
1 | 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 | */ | |
| @@ -1,92 +1,101 | |||
|
|
1 | 1 | /**************************************************************************** |
|
|
2 | 2 | ** |
|
|
3 | 3 | ** Copyright (C) 2012 Digia Plc |
|
|
4 | 4 | ** All rights reserved. |
|
|
5 | 5 | ** For any questions to Digia, please use contact form at http://qt.digia.com |
|
|
6 | 6 | ** |
|
|
7 | 7 | ** This file is part of the Qt Commercial Charts Add-on. |
|
|
8 | 8 | ** |
|
|
9 | 9 | ** $QT_BEGIN_LICENSE$ |
|
|
10 | 10 | ** Licensees holding valid Qt Commercial licenses may use this file in |
|
|
11 | 11 | ** accordance with the Qt Commercial License Agreement provided with the |
|
|
12 | 12 | ** Software or, alternatively, in accordance with the terms contained in |
|
|
13 | 13 | ** a written agreement between you and Digia. |
|
|
14 | 14 | ** |
|
|
15 | 15 | ** If you have questions regarding the use of this file, please use |
|
|
16 | 16 | ** contact form at http://qt.digia.com |
|
|
17 | 17 | ** $QT_END_LICENSE$ |
|
|
18 | 18 | ** |
|
|
19 | 19 | ****************************************************************************/ |
|
|
20 | 20 | |
|
|
21 | 21 | import QtQuick 1.0 |
|
|
22 | 22 | import QtCommercial.Chart 1.0 |
|
|
23 | 23 | |
|
|
24 | 24 | Rectangle { |
|
|
25 | 25 | width: parent.width |
|
|
26 | 26 | height: parent.height |
|
|
27 | 27 | property int __activeIndex: 1 |
|
|
28 | 28 | property real __intervalCoefficient: 0 |
|
|
29 | 29 | |
|
|
30 | 30 | |
|
|
31 | //![1] | |
|
|
31 | 32 | ChartView { |
|
|
32 | 33 | id: chartView |
|
|
33 | 34 | anchors.fill: parent |
|
|
34 | 35 | title: "Wheel of fortune" |
|
|
35 | 36 | legend.visible: false |
|
|
36 | 37 | |
|
|
37 | 38 | PieSeries { |
|
|
38 | 39 | id: wheelOfFortune |
|
|
39 | 40 | } |
|
|
40 | 41 | |
|
|
41 | 42 | SplineSeries { |
|
|
42 | 43 | id: splineSeries |
|
|
43 | 44 | } |
|
|
44 | 45 | |
|
|
45 | 46 | ScatterSeries { |
|
|
46 | 47 | id: scatterSeries |
|
|
47 | 48 | } |
|
|
48 | 49 | } |
|
|
50 | //![1] | |
|
|
49 | 51 | |
|
|
50 | ||
|
|
52 | //![2] | |
|
|
51 | 53 | Component.onCompleted: { |
|
|
52 | 54 | __intervalCoefficient = Math.random() + 0.1; |
|
|
53 | 55 | |
|
|
54 | 56 | for (var i = 0; i < 20; i++) |
|
|
55 | 57 | wheelOfFortune.append("", 1); |
|
|
56 | 58 | |
|
|
57 | 59 | var interval = 1; |
|
|
58 | 60 | for (var j = 0; interval < 800; j++) { |
|
|
59 | 61 | interval = __intervalCoefficient * j * j; |
|
|
60 | 62 | splineSeries.append(j, interval); |
|
|
61 | 63 | } |
|
|
62 | 64 | chartView.axisX.max = j; |
|
|
63 | 65 | chartView.axisY.max = 1000; |
|
|
64 | 66 | } |
|
|
67 | //![2] | |
|
|
65 | 68 | |
|
|
66 | 69 | Timer { |
|
|
67 | 70 | triggeredOnStart: true |
|
|
68 | 71 | running: true |
|
|
69 | 72 | repeat: true |
|
|
70 | 73 | interval: 100 |
|
|
71 | 74 | onTriggered: { |
|
|
72 | 75 | var index = __activeIndex % wheelOfFortune.count; |
|
|
73 | 76 | if (interval < 700) { |
|
|
74 | scatterSeries.clear(); | |
|
|
77 | //![3] | |
|
|
75 | 78 | wheelOfFortune.at(index).exploded = false; |
|
|
76 | 79 | __activeIndex++; |
|
|
77 | 80 | index = __activeIndex % wheelOfFortune.count; |
|
|
78 | 81 | wheelOfFortune.at(index).exploded = true; |
|
|
82 | //![3] | |
|
|
79 | 83 | interval = splineSeries.at(__activeIndex).y; |
|
|
84 | //![4] | |
|
|
85 | scatterSeries.clear(); | |
|
|
80 | 86 | scatterSeries.append(__activeIndex, interval); |
|
|
81 | 87 | scatterSeries.color = Qt.tint(scatterSeries.color, "#05FF0000"); |
|
|
82 | 88 | scatterSeries.markerSize += 0.5; |
|
|
89 | //![4] | |
|
|
83 | 90 | } else { |
|
|
91 | //![5] | |
|
|
84 | 92 | // Switch the colors of the slice and the border |
|
|
85 | 93 | wheelOfFortune.at(index).borderWidth = 2; |
|
|
86 | 94 | var borderColor = wheelOfFortune.at(index).borderColor; |
|
|
87 | 95 | wheelOfFortune.at(index).borderColor = wheelOfFortune.at(index).color; |
|
|
88 | 96 | wheelOfFortune.at(index).color = borderColor; |
|
|
97 | //![5] | |
|
|
89 | 98 | } |
|
|
90 | 99 | } |
|
|
91 | 100 | } |
|
|
92 | 101 | } |
| @@ -1,28 +1,29 | |||
|
|
1 | 1 | /*! |
|
|
2 | 2 | \page demos.html |
|
|
3 | 3 | \title Demos |
|
|
4 | 4 | \keyword Demos |
|
|
5 | 5 | |
|
|
6 | 6 | \raw HTML |
|
|
7 | 7 | <table cellpadding="2" cellspacing="1" border="0" width="100%" class="indextable"> |
|
|
8 | 8 | <tr> |
|
|
9 | 9 | <th class="titleheader" width="33%"> |
|
|
10 | 10 | List of demos |
|
|
11 | 11 | </th> |
|
|
12 | 12 | </tr> |
|
|
13 | 13 | <tr> |
|
|
14 | 14 | <td valign="top"> |
|
|
15 | 15 | <ul> |
|
|
16 | 16 | <li><a href="demos-chartthemes.html">Chart themes</a></li> |
|
|
17 | 17 | <li><a href="demos-piechartcustomization.html">Pie chart customization</a></li> |
|
|
18 | 18 | <li><a href="demos-dynamicspline.html">Dynamic spline chart</a></li> |
|
|
19 | 19 | <li><a href="demos-qmlchart.html">Qml Basic Charts</a></li> |
|
|
20 | <li><a href="demos-qmlcustomizations.html">Qml Customizations</a></li> | |
|
|
20 | 21 | <li><a href="demos-qmlweather.html">Qml Weather</a></li> |
|
|
21 | 22 | <li><a href="demos-qmlf1legends.html">Qml F1 Legends</a></li> |
|
|
22 | 23 | <li><a href="demos-qmlcustommodel.html">Qml Custom Model</a></li> |
|
|
23 | 24 | </ul> |
|
|
24 | 25 | </td> |
|
|
25 | 26 | </tr> |
|
|
26 | 27 | </table> |
|
|
27 | 28 | \endraw |
|
|
28 | 29 | */ |
General Comments 0
You need to be logged in to leave comments.
Login now