##// END OF EJS Templates
Fixed QML Custom Legend layout
Tero Ahola -
r2310:765dbd69651c
parent child
Show More
@@ -35,13 +35,14 ChartView {
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
@@ -23,7 +23,7 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)
@@ -32,14 +32,15 ChartView {
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
@@ -54,22 +55,22 ChartView {
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
@@ -82,13 +83,13 ChartView {
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 }
@@ -96,39 +97,20 ChartView {
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 }
@@ -23,8 +23,7 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: []
@@ -44,6 +43,18 Rectangle {
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
@@ -53,12 +64,12 Rectangle {
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
@@ -70,31 +81,38 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]
@@ -105,7 +123,7 Rectangle {
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
@@ -41,8 +41,8 Rectangle {
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("");
General Comments 0
You need to be logged in to leave comments. Login now