<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>main.qml Example File | Qt Data Visualization 5.12.2</title> <link rel="stylesheet" type="text/css" href="style/offline-simple.css" /> <script type="text/javascript"> document.getElementsByTagName("link").item(0).setAttribute("href", "style/offline.css"); // loading style sheet breaks anchors that were jumped to before // so force jumping to anchor again setTimeout(function() { var anchor = location.hash; // need to jump to different anchor first (e.g. none) location.hash = "#"; setTimeout(function() { location.hash = anchor; }, 0); }, 0); </script> </head> <body> <div class="header" id="qtdocheader"> <div class="main"> <div class="main-rounded"> <div class="navigationbar"> <table><tr> <td >Qt 5.12</td><td ><a href="qtdatavisualization-index.html">Qt Data Visualization</a></td><td ><a href="qtdatavisualization-qmllegend-example.html">Qt Quick 2 Legend Example</a></td><td >main.qml Example File</td></tr></table><table class="buildversion"><tr> <td id="buildversion" width="100%" align="right"><a href="qtdatavisualization-index.html">Qt Data Visualization | Commercial or GPLv3</a></td> </tr></table> </div> </div> <div class="content"> <div class="line"> <div class="content mainContent"> <div class="sidebar"><div class="sidebar-content" id="sidebar-content"></div></div> <h1 class="title">main.qml Example File</h1> <span class="subtitle">qmllegend/qml/qmllegend/main.qml</span> <!-- $$$qmllegend/qml/qmllegend/main.qml-description --> <div class="descr"> <a name="details"></a> <pre class="qml"> /**************************************************************************** ** ** Copyright (C) 2016 The Qt Company Ltd. ** Contact: https://www.qt.io/licensing/ ** ** This file is part of the Qt Data Visualization module of the Qt Toolkit. ** ** $QT_BEGIN_LICENSE:GPL$ ** Commercial License Usage ** Licensees holding valid commercial Qt licenses may use this file in ** accordance with the commercial license agreement provided with the ** Software or, alternatively, in accordance with the terms contained in ** a written agreement between you and The Qt Company. For licensing terms ** and conditions see https://www.qt.io/terms-conditions. For further ** information use the contact form at https://www.qt.io/contact-us. ** ** GNU General Public License Usage ** Alternatively, this file may be used under the terms of the GNU ** General Public License version 3 or (at your option) any later version ** approved by the KDE Free Qt Foundation. The licenses are as published by ** the Free Software Foundation and appearing in the file LICENSE.GPL3 ** included in the packaging of this file. Please review the following ** information to ensure the GNU General Public License requirements will ** be met: https://www.gnu.org/licenses/gpl-3.0.html. ** ** $QT_END_LICENSE$ ** ****************************************************************************/ import QtQuick 2.1 import QtQuick.Controls 1.0 import QtQuick.Layouts 1.0 import QtDataVisualization 1.0 import "." Rectangle { id: mainView width: 800 height: 600 property int buttonLayoutHeight: 180; Data { id: graphData } Theme3D { id: firstTheme type: Theme3D.ThemeQt } Theme3D { id: secondTheme type: Theme3D.ThemeEbony } Item { id: dataView anchors.fill: parent Bars3D { id: barGraph anchors.fill: parent selectionMode: AbstractGraph3D.SelectionItemAndRow scene.activeCamera.cameraPreset: Camera3D.CameraPresetIsometricLeftHigh theme: firstTheme valueAxis.labelFormat: "%d\u00B0C" Bar3DSeries { id: station1 name: "Station 1" itemLabelFormat: "Temperature at @seriesName for @colLabel, @rowLabel: @valueLabel" ItemModelBarDataProxy { itemModel: graphData.model rowRole: "year" columnRole: "month" valueRole: "s1" } } Bar3DSeries { id: station2 name: "Station 2" itemLabelFormat: "Temperature at @seriesName for @colLabel, @rowLabel: @valueLabel" ItemModelBarDataProxy { itemModel: graphData.model rowRole: "year" columnRole: "month" valueRole: "s2" } } Bar3DSeries { id: station3 name: "Station 3" itemLabelFormat: "Temperature at @seriesName for @colLabel, @rowLabel: @valueLabel" ItemModelBarDataProxy { itemModel: graphData.model rowRole: "year" columnRole: "month" valueRole: "s2" } } } } Rectangle { property int legendLocation: 3 // Make the height and width fractional of main view height and width. // Reverse the relation if screen is in portrait - this makes legend look the same // if the orientation is rotated. property int fractionalHeight: mainView.width > mainView.height ? mainView.height / 5 : mainView.width / 5 property int fractionalWidth: mainView.width > mainView.height ? mainView.width / 5 : mainView.height / 5 id: legendPanel width: fractionalWidth > 150 ? fractionalWidth : 150 // Adjust legendpanel height to avoid gaps between layouted items. height: fractionalHeight > 99 ? fractionalHeight - fractionalHeight % 3 : 99 border.color: barGraph.theme.labelTextColor border.width: 3 color: "#00000000" // Transparent ColumnLayout { anchors.fill: parent anchors.margins: parent.border.width spacing: 0 clip: true LegendItem { Layout.fillWidth: true Layout.fillHeight: true series: station1 theme: barGraph.theme } LegendItem { Layout.fillWidth: true Layout.fillHeight: true series: station2 theme: barGraph.theme } LegendItem { Layout.fillWidth: true Layout.fillHeight: true series: station3 theme: barGraph.theme } } states: [ State { name: "topleft" when: legendPanel.legendLocation === 1 AnchorChanges { target: legendPanel anchors.top: buttonLayout.bottom anchors.bottom: undefined anchors.left: dataView.left anchors.right: undefined } }, State { name: "topright" when: legendPanel.legendLocation === 2 AnchorChanges { target: legendPanel anchors.top: buttonLayout.bottom anchors.bottom: undefined anchors.left: undefined anchors.right: dataView.right } }, State { name: "bottomleft" when: legendPanel.legendLocation === 3 AnchorChanges { target: legendPanel anchors.top: undefined anchors.bottom: dataView.bottom anchors.left: dataView.left anchors.right: undefined } }, State { name: "bottomright" when: legendPanel.legendLocation === 4 AnchorChanges { target: legendPanel anchors.top: undefined anchors.bottom: dataView.bottom anchors.left: undefined anchors.right: dataView.right } } ] } RowLayout { id: buttonLayout Layout.minimumHeight: themeToggle.height width: parent.width anchors.left: parent.left spacing: 0 NewButton { id: themeToggle Layout.fillHeight: true Layout.fillWidth: true text: "Change Theme" onClicked: { if (barGraph.theme === firstTheme) { barGraph.theme = secondTheme } else { barGraph.theme = firstTheme } } } NewButton { id: repositionLegend Layout.fillHeight: true Layout.fillWidth: true text: "Reposition Legend" onClicked: { if (legendPanel.legendLocation === 4) { legendPanel.legendLocation = 1 } else { legendPanel.legendLocation++ } } } NewButton { id: exitButton Layout.fillHeight: true Layout.fillWidth: true text: "Quit" onClicked: Qt.quit(0); } } } </pre> </div> <!-- @@@qmllegend/qml/qmllegend/main.qml --> </div> </div> </div> </div> </div> <div class="footer"> <p> <acronym title="Copyright">©</acronym> 2019 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners.<br/> The documentation provided herein is licensed under the terms of the <a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation License version 1.3</a> as published by the Free Software Foundation.<br/> Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners. </p> </div> </body> </html>