##// END OF EJS Templates
Fixed QML Custom Legend layout
Tero Ahola -
r2310:765dbd69651c
parent child
Show More
@@ -1,75 +1,76
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.2
23 23
24 24 //![1]
25 25 ChartView {
26 26 id: chartViewHighlighted
27 27 title: ""
28 28 property variant selectedSeries
29 29 signal clicked
30 30 legend.visible: false
31 31 margins.top: 10
32 32 margins.bottom: 0
33 33
34 34 LineSeries {
35 35 id: lineSeries
36 36
37 37 axisX: ValueAxis {
38 min: 2005
39 max: 2011
38 min: 2006
39 max: 2012
40 40 labelFormat: "%.0f"
41 41 tickCount: 7
42 42 }
43 43 axisY: ValueAxis {
44 44 id: axisY
45 titleText: "EUR"
45 46 min: 0
46 47 max: 40000
47 48 niceNumbersEnabled: true
48 49 labelFormat: "%.0f"
49 50 tickCount: 5
50 51 }
51 52 }
52 53 //![1]
53 54
54 55 MouseArea {
55 56 anchors.fill: parent
56 57 onClicked: {
57 58 chartViewHighlighted.clicked();
58 59 }
59 60 }
60 61
61 62 onSelectedSeriesChanged: {
62 63 lineSeries.clear();
63 64 lineSeries.color = selectedSeries.color;
64 65 var maxVal = 0.0;
65 66 for (var i = 0; i < selectedSeries.upperSeries.count; i++ ) {
66 67 var y = selectedSeries.upperSeries.at(i).y - selectedSeries.lowerSeries.at(i).y;
67 68 lineSeries.append(selectedSeries.upperSeries.at(i).x, y);
68 69 if (maxVal < y)
69 70 maxVal = y;
70 71 }
71 72 chartViewHighlighted.title = selectedSeries.name;
72 73 axisY.max = maxVal;
73 74 }
74 75 }
75 76
@@ -1,134 +1,116
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.2
23 23
24 24 ChartView {
25 25 id: chartView
26 title: "Government Finance Taxes in Finland"
26 title: "Government Taxes"
27 27 legend.visible: false
28 28 signal entered(string seriesName)
29 29 signal exited(string seriesName)
30 30 margins.top: 10
31 31 margins.bottom: 0
32 32
33 33 ValueAxis {
34 34 id: axisX
35 min: 2005
36 max: 2011
35 min: 2006
36 max: 2012
37 37 tickCount: 7
38 38 labelFormat: "%.0f"
39 39 }
40 40
41 41 ValueAxis {
42 42 id: axisY
43 titleText: "EUR"
43 44 min: 0
44 45 max: 90000
45 46 tickCount: 10
46 47 labelFormat: "%.0f"
47 48 }
48 49
49 50 AnimatedAreaSeries {
50 51 id: stateSeries
51 52 name: "state"
52 53 axisX: axisX
53 54 axisY: axisY
54 55 borderWidth: 0
55 56 upperSeries: LineSeries {
56 57 id: stateUpper
57 XYPoint { x: 2005; y: 35771 }
58 XYPoint { x: 2006; y: 36822 }
59 XYPoint { x: 2007; y: 39220 }
60 XYPoint { x: 2008; y: 39624 }
61 XYPoint { x: 2009; y: 34061 }
62 XYPoint { x: 2010; y: 34680 }
63 XYPoint { x: 2011; y: 39180 }
58 XYPoint { x: 2006; y: 33119 }
59 XYPoint { x: 2007; y: 37941 }
60 XYPoint { x: 2008; y: 40122 }
61 XYPoint { x: 2009; y: 38991 }
62 XYPoint { x: 2010; y: 34055 }
63 XYPoint { x: 2011; y: 34555 }
64 XYPoint { x: 2012; y: 38991 }
64 65 }
65 66 lowerSeries: LineSeries {
66 XYPoint { x: 2005; y: 0 }
67 67 XYPoint { x: 2006; y: 0 }
68 68 XYPoint { x: 2007; y: 0 }
69 69 XYPoint { x: 2008; y: 0 }
70 70 XYPoint { x: 2009; y: 0 }
71 71 XYPoint { x: 2010; y: 0 }
72 72 XYPoint { x: 2011; y: 0 }
73 XYPoint { x: 2012; y: 0 }
73 74 }
74 75 }
75 76
76 77 //![1]
77 78 AnimatedAreaSeries {
78 79 id: municipalSeries
79 80 name: "municipal"
80 81 axisX: axisX
81 82 axisY: axisY
82 83 borderWidth: 0
83 84 upperSeries: LineSeries {
84 85 id: municipalUpper
85 XYPoint { x: 2005; y: 35771 + 14330 }
86 XYPoint { x: 2006; y: 36822 + 15299 }
87 XYPoint { x: 2007; y: 39220 + 16482 }
88 XYPoint { x: 2008; y: 39624 + 17502 }
89 XYPoint { x: 2009; y: 34061 + 17595 }
90 XYPoint { x: 2010; y: 34680 + 18535 }
91 XYPoint { x: 2011; y: 39180 + 19166 }
86 XYPoint { x: 2006; y: 33119 + 13443 }
87 XYPoint { x: 2007; y: 37941 + 15311 }
88 XYPoint { x: 2008; y: 40122 + 16552 }
89 XYPoint { x: 2009; y: 38991 + 17904 }
90 XYPoint { x: 2010; y: 34055 + 17599 }
91 XYPoint { x: 2011; y: 34555 + 19002 }
92 XYPoint { x: 2012; y: 38991 + 19177 }
92 93 }
93 94 lowerSeries: stateUpper
94 95 }
95 96 //![1]
96 97
97 98 AnimatedAreaSeries {
98 99 id: socialSeries
99 name: "social sec. funds"
100 name: "social sec."
100 101 axisX: axisX
101 102 axisY: axisY
102 103 borderWidth: 0
103 104 upperSeries: LineSeries {
104 105 id: socialUpper
105 XYPoint { x: 2005; y: 35771 + 14330 + 18865 }
106 XYPoint { x: 2006; y: 36822 + 15299 + 20258 }
107 XYPoint { x: 2007; y: 39220 + 16482 + 21367 }
108 XYPoint { x: 2008; y: 39624 + 17502 + 22316 }
109 XYPoint { x: 2009; y: 34061 + 17595 + 22026 }
110 XYPoint { x: 2010; y: 34680 + 18535 + 22601 }
111 XYPoint { x: 2011; y: 39180 + 19166 + 23696 }
106 XYPoint { x: 2006; y: 33119 + 13443 + 18855 }
107 XYPoint { x: 2007; y: 37941 + 15311 + 20238 }
108 XYPoint { x: 2008; y: 40122 + 16552 + 21347 }
109 XYPoint { x: 2009; y: 38991 + 17904 + 22376 }
110 XYPoint { x: 2010; y: 34055 + 17599 + 22076 }
111 XYPoint { x: 2011; y: 34555 + 19002 + 22631 }
112 XYPoint { x: 2012; y: 38991 + 19177 + 23686 }
112 113 }
113 114 lowerSeries: municipalUpper
114 115 }
115
116 AnimatedAreaSeries {
117 id: euSeries
118 name: "EU"
119 axisX: axisX
120 axisY: axisY
121 borderWidth: 0
122 upperSeries: LineSeries {
123 id: euUpper
124 XYPoint { x: 2005; y: 35771 + 14330 + 18865 + 154 }
125 XYPoint { x: 2006; y: 36822 + 15299 + 20258 + 176 }
126 XYPoint { x: 2007; y: 39220 + 16482 + 21367 + 200 }
127 XYPoint { x: 2008; y: 39624 + 17502 + 22316 + 206 }
128 XYPoint { x: 2009; y: 34061 + 17595 + 22026 + 153 }
129 XYPoint { x: 2010; y: 34680 + 18535 + 22601 + 152 }
130 XYPoint { x: 2011; y: 39180 + 19166 + 23696 + 190 }
131 }
132 lowerSeries: socialUpper
133 }
134 116 }
@@ -1,117 +1,135
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.1
23 23
24 24 Rectangle {
25 25 id: legend
26 radius: 8
27 color: "lightblue"
26 color: "lightgray"
28 27 property int seriesCount: 0
29 28 property variant seriesNames: []
30 29 property variant seriesColors: []
31 30 signal entered(string seriesName)
32 31 signal exited(string seriesName)
33 32 signal selected(string seriesName)
34 33
35 34 function addSeries(seriesName, color) {
36 35 var names = seriesNames;
37 36 names[seriesCount] = seriesName;
38 37 seriesNames = names;
39 38
40 39 var colors = seriesColors;
41 40 colors[seriesCount] = color;
42 41 seriesColors = colors;
43 42
44 43 seriesCount++;
45 44 }
46 45
46 Gradient {
47 id: buttonGradient
48 GradientStop { position: 0.0; color: "#F0F0F0" }
49 GradientStop { position: 1.0; color: "#A0A0A0" }
50 }
51
52 Gradient {
53 id: buttonGradientHovered
54 GradientStop { position: 0.0; color: "#FFFFFF" }
55 GradientStop { position: 1.0; color: "#B0B0B0" }
56 }
57
47 58 //![2]
48 59 Component {
49 60 id: legendDelegate
50 61 Rectangle {
51 62 id: rect
52 63 // ...
53 64 //![2]
54 65 property string name: seriesNames[index]
55 66 property color markerColor: seriesColors[index]
56 color: "transparent"
57 border.color: seriesColors[index]
58 border.width: 2
67 gradient: buttonGradient
68 border.color: "#A0A0A0"
69 border.width: 1
59 70 radius: 4
60 71 height: 20
61 width: row.width + row.anchors.leftMargin * 2
72 width: 100
62 73
63 74 Row {
64 75 id: row
65 76 spacing: 5
66 77 anchors.verticalCenter: parent.verticalCenter
67 78 anchors.left: parent.left
68 79 anchors.leftMargin: 5
69 80 Rectangle {
70 81 id: marker
71 82 anchors.verticalCenter: parent.verticalCenter
72 83 color: markerColor
84 opacity: 0.3
73 85 radius: 4
74 86 width: 12
75 height: 12
87 height: 10
76 88 }
77 89 Text {
78 90 id: label
79 91 anchors.verticalCenter: parent.verticalCenter
92 anchors.verticalCenterOffset: -1
80 93 text: name
81 94 }
82 95 }
83 96
84 97 //![3]
85 98 MouseArea {
99 id: mouseArea
86 100 anchors.fill: parent
87 101 hoverEnabled: true
88 102 onEntered: {
89 rect.color = "white";
103 rect.gradient = buttonGradientHovered;
90 104 legend.entered(label.text);
91 105 }
92 106 onExited: {
93 rect.color = "transparent";
107 rect.gradient = buttonGradient;
94 108 legend.exited(label.text);
109 marker.opacity = 0.3;
110 marker.height = 10;
95 111 }
96 112 onClicked: {
97 113 legend.selected(label.text);
114 marker.opacity = 1.0;
115 marker.height = 12;
98 116 }
99 117 }
100 118 //![3]
101 119 }
102 120 }
103 121
104 122 //![1]
105 123 Row {
106 124 id: legendRow
107 125 anchors.centerIn: parent
108 spacing: 4
126 spacing: 6
109 127
110 128 Repeater {
111 129 id: legendRepeater
112 130 model: seriesCount
113 131 delegate: legendDelegate
114 132 }
115 133 }
116 134 //![1]
117 135 }
@@ -1,66 +1,66
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.1
23 23
24 24 Rectangle {
25 25 id: main
26 26 width: parent.width
27 27 height: parent.height
28 28
29 29 Column {
30 30 id: column
31 31 anchors.fill: parent
32 32 anchors.bottomMargin: 10
33 33 spacing: 0
34 34
35 35 ChartViewSelector {
36 36 id: chartViewSelector
37 37 width: parent.width
38 38 height: parent.height - customLegend.height - anchors.bottomMargin
39 39 onSeriesAdded: customLegend.addSeries(seriesName, seriesColor);
40 40 }
41 41
42 42 CustomLegend {
43 43 id: customLegend
44 width: 360
45 height: 30
44 width: parent.width
45 height: 35
46 46 anchors.horizontalCenter: parent.horizontalCenter
47 47 onEntered: chartViewSelector.highlightSeries(seriesName);
48 48 onExited: chartViewSelector.highlightSeries("");
49 49 onSelected: chartViewSelector.selectSeries(seriesName);
50 50 }
51 51 }
52 52
53 53 states: State {
54 54 name: "highlighted"
55 55 PropertyChanges {
56 56 target: chartViewHighlighted
57 57 width: column.width
58 58 height: (column.height - column.anchors.margins * 2 - customLegend.height)
59 59 }
60 60 PropertyChanges {
61 61 target: chartViewStacked
62 62 width: 1
63 63 height: 1
64 64 }
65 65 }
66 66 }
General Comments 0
You need to be logged in to leave comments. Login now