##// END OF EJS Templates
Fixed QML Custom Legend layout
Tero Ahola -
r2310:765dbd69651c
parent child
Show More
@@ -35,13 +35,14 ChartView {
35 id: lineSeries
35 id: lineSeries
36
36
37 axisX: ValueAxis {
37 axisX: ValueAxis {
38 min: 2005
38 min: 2006
39 max: 2011
39 max: 2012
40 labelFormat: "%.0f"
40 labelFormat: "%.0f"
41 tickCount: 7
41 tickCount: 7
42 }
42 }
43 axisY: ValueAxis {
43 axisY: ValueAxis {
44 id: axisY
44 id: axisY
45 titleText: "EUR"
45 min: 0
46 min: 0
46 max: 40000
47 max: 40000
47 niceNumbersEnabled: true
48 niceNumbersEnabled: true
@@ -23,7 +23,7 import QtCommercial.Chart 1.2
23
23
24 ChartView {
24 ChartView {
25 id: chartView
25 id: chartView
26 title: "Government Finance Taxes in Finland"
26 title: "Government Taxes"
27 legend.visible: false
27 legend.visible: false
28 signal entered(string seriesName)
28 signal entered(string seriesName)
29 signal exited(string seriesName)
29 signal exited(string seriesName)
@@ -32,14 +32,15 ChartView {
32
32
33 ValueAxis {
33 ValueAxis {
34 id: axisX
34 id: axisX
35 min: 2005
35 min: 2006
36 max: 2011
36 max: 2012
37 tickCount: 7
37 tickCount: 7
38 labelFormat: "%.0f"
38 labelFormat: "%.0f"
39 }
39 }
40
40
41 ValueAxis {
41 ValueAxis {
42 id: axisY
42 id: axisY
43 titleText: "EUR"
43 min: 0
44 min: 0
44 max: 90000
45 max: 90000
45 tickCount: 10
46 tickCount: 10
@@ -54,22 +55,22 ChartView {
54 borderWidth: 0
55 borderWidth: 0
55 upperSeries: LineSeries {
56 upperSeries: LineSeries {
56 id: stateUpper
57 id: stateUpper
57 XYPoint { x: 2005; y: 35771 }
58 XYPoint { x: 2006; y: 33119 }
58 XYPoint { x: 2006; y: 36822 }
59 XYPoint { x: 2007; y: 37941 }
59 XYPoint { x: 2007; y: 39220 }
60 XYPoint { x: 2008; y: 40122 }
60 XYPoint { x: 2008; y: 39624 }
61 XYPoint { x: 2009; y: 38991 }
61 XYPoint { x: 2009; y: 34061 }
62 XYPoint { x: 2010; y: 34055 }
62 XYPoint { x: 2010; y: 34680 }
63 XYPoint { x: 2011; y: 34555 }
63 XYPoint { x: 2011; y: 39180 }
64 XYPoint { x: 2012; y: 38991 }
64 }
65 }
65 lowerSeries: LineSeries {
66 lowerSeries: LineSeries {
66 XYPoint { x: 2005; y: 0 }
67 XYPoint { x: 2006; y: 0 }
67 XYPoint { x: 2006; y: 0 }
68 XYPoint { x: 2007; y: 0 }
68 XYPoint { x: 2007; y: 0 }
69 XYPoint { x: 2008; y: 0 }
69 XYPoint { x: 2008; y: 0 }
70 XYPoint { x: 2009; y: 0 }
70 XYPoint { x: 2009; y: 0 }
71 XYPoint { x: 2010; y: 0 }
71 XYPoint { x: 2010; y: 0 }
72 XYPoint { x: 2011; y: 0 }
72 XYPoint { x: 2011; y: 0 }
73 XYPoint { x: 2012; y: 0 }
73 }
74 }
74 }
75 }
75
76
@@ -82,13 +83,13 ChartView {
82 borderWidth: 0
83 borderWidth: 0
83 upperSeries: LineSeries {
84 upperSeries: LineSeries {
84 id: municipalUpper
85 id: municipalUpper
85 XYPoint { x: 2005; y: 35771 + 14330 }
86 XYPoint { x: 2006; y: 33119 + 13443 }
86 XYPoint { x: 2006; y: 36822 + 15299 }
87 XYPoint { x: 2007; y: 37941 + 15311 }
87 XYPoint { x: 2007; y: 39220 + 16482 }
88 XYPoint { x: 2008; y: 40122 + 16552 }
88 XYPoint { x: 2008; y: 39624 + 17502 }
89 XYPoint { x: 2009; y: 38991 + 17904 }
89 XYPoint { x: 2009; y: 34061 + 17595 }
90 XYPoint { x: 2010; y: 34055 + 17599 }
90 XYPoint { x: 2010; y: 34680 + 18535 }
91 XYPoint { x: 2011; y: 34555 + 19002 }
91 XYPoint { x: 2011; y: 39180 + 19166 }
92 XYPoint { x: 2012; y: 38991 + 19177 }
92 }
93 }
93 lowerSeries: stateUpper
94 lowerSeries: stateUpper
94 }
95 }
@@ -96,39 +97,20 ChartView {
96
97
97 AnimatedAreaSeries {
98 AnimatedAreaSeries {
98 id: socialSeries
99 id: socialSeries
99 name: "social sec. funds"
100 name: "social sec."
100 axisX: axisX
101 axisX: axisX
101 axisY: axisY
102 axisY: axisY
102 borderWidth: 0
103 borderWidth: 0
103 upperSeries: LineSeries {
104 upperSeries: LineSeries {
104 id: socialUpper
105 id: socialUpper
105 XYPoint { x: 2005; y: 35771 + 14330 + 18865 }
106 XYPoint { x: 2006; y: 33119 + 13443 + 18855 }
106 XYPoint { x: 2006; y: 36822 + 15299 + 20258 }
107 XYPoint { x: 2007; y: 37941 + 15311 + 20238 }
107 XYPoint { x: 2007; y: 39220 + 16482 + 21367 }
108 XYPoint { x: 2008; y: 40122 + 16552 + 21347 }
108 XYPoint { x: 2008; y: 39624 + 17502 + 22316 }
109 XYPoint { x: 2009; y: 38991 + 17904 + 22376 }
109 XYPoint { x: 2009; y: 34061 + 17595 + 22026 }
110 XYPoint { x: 2010; y: 34055 + 17599 + 22076 }
110 XYPoint { x: 2010; y: 34680 + 18535 + 22601 }
111 XYPoint { x: 2011; y: 34555 + 19002 + 22631 }
111 XYPoint { x: 2011; y: 39180 + 19166 + 23696 }
112 XYPoint { x: 2012; y: 38991 + 19177 + 23686 }
112 }
113 }
113 lowerSeries: municipalUpper
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 Rectangle {
24 Rectangle {
25 id: legend
25 id: legend
26 radius: 8
26 color: "lightgray"
27 color: "lightblue"
28 property int seriesCount: 0
27 property int seriesCount: 0
29 property variant seriesNames: []
28 property variant seriesNames: []
30 property variant seriesColors: []
29 property variant seriesColors: []
@@ -44,6 +43,18 Rectangle {
44 seriesCount++;
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 //![2]
58 //![2]
48 Component {
59 Component {
49 id: legendDelegate
60 id: legendDelegate
@@ -53,12 +64,12 Rectangle {
53 //![2]
64 //![2]
54 property string name: seriesNames[index]
65 property string name: seriesNames[index]
55 property color markerColor: seriesColors[index]
66 property color markerColor: seriesColors[index]
56 color: "transparent"
67 gradient: buttonGradient
57 border.color: seriesColors[index]
68 border.color: "#A0A0A0"
58 border.width: 2
69 border.width: 1
59 radius: 4
70 radius: 4
60 height: 20
71 height: 20
61 width: row.width + row.anchors.leftMargin * 2
72 width: 100
62
73
63 Row {
74 Row {
64 id: row
75 id: row
@@ -70,31 +81,38 Rectangle {
70 id: marker
81 id: marker
71 anchors.verticalCenter: parent.verticalCenter
82 anchors.verticalCenter: parent.verticalCenter
72 color: markerColor
83 color: markerColor
84 opacity: 0.3
73 radius: 4
85 radius: 4
74 width: 12
86 width: 12
75 height: 12
87 height: 10
76 }
88 }
77 Text {
89 Text {
78 id: label
90 id: label
79 anchors.verticalCenter: parent.verticalCenter
91 anchors.verticalCenter: parent.verticalCenter
92 anchors.verticalCenterOffset: -1
80 text: name
93 text: name
81 }
94 }
82 }
95 }
83
96
84 //![3]
97 //![3]
85 MouseArea {
98 MouseArea {
99 id: mouseArea
86 anchors.fill: parent
100 anchors.fill: parent
87 hoverEnabled: true
101 hoverEnabled: true
88 onEntered: {
102 onEntered: {
89 rect.color = "white";
103 rect.gradient = buttonGradientHovered;
90 legend.entered(label.text);
104 legend.entered(label.text);
91 }
105 }
92 onExited: {
106 onExited: {
93 rect.color = "transparent";
107 rect.gradient = buttonGradient;
94 legend.exited(label.text);
108 legend.exited(label.text);
109 marker.opacity = 0.3;
110 marker.height = 10;
95 }
111 }
96 onClicked: {
112 onClicked: {
97 legend.selected(label.text);
113 legend.selected(label.text);
114 marker.opacity = 1.0;
115 marker.height = 12;
98 }
116 }
99 }
117 }
100 //![3]
118 //![3]
@@ -105,7 +123,7 Rectangle {
105 Row {
123 Row {
106 id: legendRow
124 id: legendRow
107 anchors.centerIn: parent
125 anchors.centerIn: parent
108 spacing: 4
126 spacing: 6
109
127
110 Repeater {
128 Repeater {
111 id: legendRepeater
129 id: legendRepeater
@@ -41,8 +41,8 Rectangle {
41
41
42 CustomLegend {
42 CustomLegend {
43 id: customLegend
43 id: customLegend
44 width: 360
44 width: parent.width
45 height: 30
45 height: 35
46 anchors.horizontalCenter: parent.horizontalCenter
46 anchors.horizontalCenter: parent.horizontalCenter
47 onEntered: chartViewSelector.highlightSeries(seriesName);
47 onEntered: chartViewSelector.highlightSeries(seriesName);
48 onExited: chartViewSelector.highlightSeries("");
48 onExited: chartViewSelector.highlightSeries("");
General Comments 0
You need to be logged in to leave comments. Login now