From 765dbd69651cf429b0c34aea38382abca27195f5 2012-11-28 11:02:37 From: Tero Ahola Date: 2012-11-28 11:02:37 Subject: [PATCH] Fixed QML Custom Legend layout --- diff --git a/demos/qmlcustomlegend/qml/qmlcustomlegend/ChartViewHighlighted.qml b/demos/qmlcustomlegend/qml/qmlcustomlegend/ChartViewHighlighted.qml index 8d981ef..fc0595c 100755 --- a/demos/qmlcustomlegend/qml/qmlcustomlegend/ChartViewHighlighted.qml +++ b/demos/qmlcustomlegend/qml/qmlcustomlegend/ChartViewHighlighted.qml @@ -35,13 +35,14 @@ ChartView { id: lineSeries axisX: ValueAxis { - min: 2005 - max: 2011 + min: 2006 + max: 2012 labelFormat: "%.0f" tickCount: 7 } axisY: ValueAxis { id: axisY + titleText: "EUR" min: 0 max: 40000 niceNumbersEnabled: true diff --git a/demos/qmlcustomlegend/qml/qmlcustomlegend/ChartViewStacked.qml b/demos/qmlcustomlegend/qml/qmlcustomlegend/ChartViewStacked.qml index 70bec65..4c4bd75 100755 --- a/demos/qmlcustomlegend/qml/qmlcustomlegend/ChartViewStacked.qml +++ b/demos/qmlcustomlegend/qml/qmlcustomlegend/ChartViewStacked.qml @@ -23,7 +23,7 @@ import QtCommercial.Chart 1.2 ChartView { id: chartView - title: "Government Finance Taxes in Finland" + title: "Government Taxes" legend.visible: false signal entered(string seriesName) signal exited(string seriesName) @@ -32,14 +32,15 @@ ChartView { ValueAxis { id: axisX - min: 2005 - max: 2011 + min: 2006 + max: 2012 tickCount: 7 labelFormat: "%.0f" } ValueAxis { id: axisY + titleText: "EUR" min: 0 max: 90000 tickCount: 10 @@ -54,22 +55,22 @@ ChartView { borderWidth: 0 upperSeries: LineSeries { id: stateUpper - XYPoint { x: 2005; y: 35771 } - XYPoint { x: 2006; y: 36822 } - XYPoint { x: 2007; y: 39220 } - XYPoint { x: 2008; y: 39624 } - XYPoint { x: 2009; y: 34061 } - XYPoint { x: 2010; y: 34680 } - XYPoint { x: 2011; y: 39180 } + XYPoint { x: 2006; y: 33119 } + XYPoint { x: 2007; y: 37941 } + XYPoint { x: 2008; y: 40122 } + XYPoint { x: 2009; y: 38991 } + XYPoint { x: 2010; y: 34055 } + XYPoint { x: 2011; y: 34555 } + XYPoint { x: 2012; y: 38991 } } lowerSeries: LineSeries { - XYPoint { x: 2005; y: 0 } XYPoint { x: 2006; y: 0 } XYPoint { x: 2007; y: 0 } XYPoint { x: 2008; y: 0 } XYPoint { x: 2009; y: 0 } XYPoint { x: 2010; y: 0 } XYPoint { x: 2011; y: 0 } + XYPoint { x: 2012; y: 0 } } } @@ -82,13 +83,13 @@ ChartView { borderWidth: 0 upperSeries: LineSeries { id: municipalUpper - XYPoint { x: 2005; y: 35771 + 14330 } - XYPoint { x: 2006; y: 36822 + 15299 } - XYPoint { x: 2007; y: 39220 + 16482 } - XYPoint { x: 2008; y: 39624 + 17502 } - XYPoint { x: 2009; y: 34061 + 17595 } - XYPoint { x: 2010; y: 34680 + 18535 } - XYPoint { x: 2011; y: 39180 + 19166 } + XYPoint { x: 2006; y: 33119 + 13443 } + XYPoint { x: 2007; y: 37941 + 15311 } + XYPoint { x: 2008; y: 40122 + 16552 } + XYPoint { x: 2009; y: 38991 + 17904 } + XYPoint { x: 2010; y: 34055 + 17599 } + XYPoint { x: 2011; y: 34555 + 19002 } + XYPoint { x: 2012; y: 38991 + 19177 } } lowerSeries: stateUpper } @@ -96,39 +97,20 @@ ChartView { AnimatedAreaSeries { id: socialSeries - name: "social sec. funds" + name: "social sec." axisX: axisX axisY: axisY borderWidth: 0 upperSeries: LineSeries { id: socialUpper - XYPoint { x: 2005; y: 35771 + 14330 + 18865 } - XYPoint { x: 2006; y: 36822 + 15299 + 20258 } - XYPoint { x: 2007; y: 39220 + 16482 + 21367 } - XYPoint { x: 2008; y: 39624 + 17502 + 22316 } - XYPoint { x: 2009; y: 34061 + 17595 + 22026 } - XYPoint { x: 2010; y: 34680 + 18535 + 22601 } - XYPoint { x: 2011; y: 39180 + 19166 + 23696 } + XYPoint { x: 2006; y: 33119 + 13443 + 18855 } + XYPoint { x: 2007; y: 37941 + 15311 + 20238 } + XYPoint { x: 2008; y: 40122 + 16552 + 21347 } + XYPoint { x: 2009; y: 38991 + 17904 + 22376 } + XYPoint { x: 2010; y: 34055 + 17599 + 22076 } + XYPoint { x: 2011; y: 34555 + 19002 + 22631 } + XYPoint { x: 2012; y: 38991 + 19177 + 23686 } } lowerSeries: municipalUpper } - - AnimatedAreaSeries { - id: euSeries - name: "EU" - axisX: axisX - axisY: axisY - borderWidth: 0 - upperSeries: LineSeries { - id: euUpper - XYPoint { x: 2005; y: 35771 + 14330 + 18865 + 154 } - XYPoint { x: 2006; y: 36822 + 15299 + 20258 + 176 } - XYPoint { x: 2007; y: 39220 + 16482 + 21367 + 200 } - XYPoint { x: 2008; y: 39624 + 17502 + 22316 + 206 } - XYPoint { x: 2009; y: 34061 + 17595 + 22026 + 153 } - XYPoint { x: 2010; y: 34680 + 18535 + 22601 + 152 } - XYPoint { x: 2011; y: 39180 + 19166 + 23696 + 190 } - } - lowerSeries: socialUpper - } } diff --git a/demos/qmlcustomlegend/qml/qmlcustomlegend/CustomLegend.qml b/demos/qmlcustomlegend/qml/qmlcustomlegend/CustomLegend.qml index 243253b..744b70c 100755 --- a/demos/qmlcustomlegend/qml/qmlcustomlegend/CustomLegend.qml +++ b/demos/qmlcustomlegend/qml/qmlcustomlegend/CustomLegend.qml @@ -23,8 +23,7 @@ import QtCommercial.Chart 1.1 Rectangle { id: legend - radius: 8 - color: "lightblue" + color: "lightgray" property int seriesCount: 0 property variant seriesNames: [] property variant seriesColors: [] @@ -44,6 +43,18 @@ Rectangle { seriesCount++; } + Gradient { + id: buttonGradient + GradientStop { position: 0.0; color: "#F0F0F0" } + GradientStop { position: 1.0; color: "#A0A0A0" } + } + + Gradient { + id: buttonGradientHovered + GradientStop { position: 0.0; color: "#FFFFFF" } + GradientStop { position: 1.0; color: "#B0B0B0" } + } + //![2] Component { id: legendDelegate @@ -53,12 +64,12 @@ Rectangle { //![2] property string name: seriesNames[index] property color markerColor: seriesColors[index] - color: "transparent" - border.color: seriesColors[index] - border.width: 2 + gradient: buttonGradient + border.color: "#A0A0A0" + border.width: 1 radius: 4 height: 20 - width: row.width + row.anchors.leftMargin * 2 + width: 100 Row { id: row @@ -70,31 +81,38 @@ Rectangle { id: marker anchors.verticalCenter: parent.verticalCenter color: markerColor + opacity: 0.3 radius: 4 width: 12 - height: 12 + height: 10 } Text { id: label anchors.verticalCenter: parent.verticalCenter + anchors.verticalCenterOffset: -1 text: name } } //![3] MouseArea { + id: mouseArea anchors.fill: parent hoverEnabled: true onEntered: { - rect.color = "white"; + rect.gradient = buttonGradientHovered; legend.entered(label.text); } onExited: { - rect.color = "transparent"; + rect.gradient = buttonGradient; legend.exited(label.text); + marker.opacity = 0.3; + marker.height = 10; } onClicked: { legend.selected(label.text); + marker.opacity = 1.0; + marker.height = 12; } } //![3] @@ -105,7 +123,7 @@ Rectangle { Row { id: legendRow anchors.centerIn: parent - spacing: 4 + spacing: 6 Repeater { id: legendRepeater diff --git a/demos/qmlcustomlegend/qml/qmlcustomlegend/main.qml b/demos/qmlcustomlegend/qml/qmlcustomlegend/main.qml index bfb26ab..e6bab33 100755 --- a/demos/qmlcustomlegend/qml/qmlcustomlegend/main.qml +++ b/demos/qmlcustomlegend/qml/qmlcustomlegend/main.qml @@ -41,8 +41,8 @@ Rectangle { CustomLegend { id: customLegend - width: 360 - height: 30 + width: parent.width + height: 35 anchors.horizontalCenter: parent.horizontalCenter onEntered: chartViewSelector.highlightSeries(seriesName); onExited: chartViewSelector.highlightSeries("");