Graphique de dispersion simple

Simple Scatter Graph (graphique de dispersion simple) montre comment visualiser un graphique de dispersion simple à l'aide de Scatter3D et de QML.

Pour savoir comment interagir avec le graphique, voir cette page.

Pour savoir comment créer votre propre application Qt Quick, consultez l'aide Qt Creator.

Exécution de l'exemple

Pour exécuter l'exemple à partir de Qt CreatorOuvrez le mode Welcome et sélectionnez l'exemple à partir de Examples. Pour plus d'informations, voir Qt Creator: Tutorial : Construire et exécuter.

Notions de base sur l'application

Avant de plonger dans le code QML, jetez un coup d'œil à l'application main.cpp.

Cette application met en œuvre un bouton "Quitter" dans l'interface utilisateur, vous souhaitez donc connecter le signal QQmlEngine::quit() au slot QWindow::close() de l'application :

QObject::connect(viewer.engine(), &QQmlEngine::quit, &viewer, &QWindow::close);

Pour simplifier un peu le déploiement, rassemblez tous les fichiers .qml de l'application dans un fichier de ressources (qmlscatter.qrc) :

<RCC>
    <qresource prefix="/">
        <file>qml/qmlscatter/Data.qml</file>
        <file>qml/qmlscatter/main.qml</file>
    </qresource>
</RCC>

Pour ce faire, il faut également configurer le fichier main.qml pour qu'il soit lu à partir de la ressource (qrc:) :

viewer.setSource(QUrl("qrc:/qml/qmlscatter/main.qml"));

Si vous utilisez cmake au lieu de qmake, les fichiers .qml sont ajoutés à un module QML dans le fichier CMakeLists.txt:

qt6_add_qml_module(qmlscatter
    URI Scatter
    VERSION 1.0
    NO_RESOURCE_TARGET_PATH
    QML_FILES
        qml/qmlscatter/Data.qml
        qml/qmlscatter/main.qml
)

Enfin, l'application doit être exécutée dans une fenêtre maximisée :

viewer.showMaximized();

Mise en place du graphique

Tout d'abord, importez tous les modules QML nécessaires :

import QtQuick
import QtQuick.Controls
import QtDataVisualization

Ensuite, créez l'application principale Item et appelez-la mainView:

Item {
    id: mainView

Ensuite, ajoutez un autre Item à l'intérieur du Item principal, et appelez-le dataView. Ce sera l'élément qui contiendra le graphique Scatter3D. Ancrez-le à la partie inférieure du parent :

Item {
    id: dataView
    anchors.bottom: parent.bottom

Ensuite, ajoutez le graphique Scatter3D lui-même. Ajoutez-le à l'intérieur de dataView et nommez-le scatterGraph. Faites en sorte qu'il remplisse le site dataView:

Scatter3D {
    id: scatterGraph
    anchors.fill: parent

Le graphique est maintenant prêt à être utilisé, mais il ne contient aucune donnée. Il possède également les axes et les propriétés visuelles par défaut.

Ensuite, modifiez d'abord certaines propriétés visuelles en ajoutant ce qui suit à l'intérieur de scatterGraph:

theme: themeQt
shadowQuality: AbstractGraph3D.ShadowQualityHigh
scene.activeCamera.cameraPreset: Camera3D.CameraPresetFront

Un thème personnalisé a été ajouté, la qualité de l'ombre a été modifiée et la position de la caméra a été ajustée. Les autres propriétés visuelles sont correctes, il n'est donc pas nécessaire de les modifier.

Le thème personnalisé est basé sur un thème prédéfini, Theme3D.ThemeQt, mais la police de caractères est modifiée :

Theme3D {
    id: themeQt
    type: Theme3D.ThemeQt
    font.pointSize: 40
}

Commencez ensuite à alimenter le graphique en données.

Ajout de données au graphique

Créez un élément Data à l'intérieur de l'élément mainView et nommez-le seriesData:

Data {
    id: seriesData
}

L'élément seriesData contient les modèles de données pour les trois séries utilisées dans cet exemple.

Il s'agit du composant qui contient les données de Data.qml et dont le composant principal est Item.

Dans le composant principal, ajoutez les données elles-mêmes à un ListModel et nommez-le dataModel:

ListModel {
    id: dataModel
    ListElement{ xPos: -10.0; yPos: 5.0; zPos: -5.0 }
    ...

Ajoutez-en deux autres aux deux autres séries et nommez-les dataModelTwo et dataModelThree.

Ensuite, exposez les modèles de données pour qu'ils soient utilisables à partir de main.qml. Pour ce faire, définissez-les en tant qu'alias dans le composant de données principal :

property alias model: dataModel
property alias modelTwo: dataModelTwo
property alias modelThree: dataModelThree

Vous pouvez maintenant utiliser les données de Data.qml avec scatterGraph dans main.qml. Tout d'abord, ajoutez un Scatter3DSeries et appelez-le scatterSeries:

Scatter3DSeries {
    id: scatterSeries

Ensuite, définissez le format de l'étiquette de sélection pour la série :

itemLabelFormat: "Series 1: X:@xLabel Y:@yLabel Z:@zLabel"

Enfin, ajoutez les données de la première série dans un ItemModelScatterDataProxy. Définissez les données elles-mêmes comme itemModel pour le proxy :

ItemModelScatterDataProxy {
    itemModel: seriesData.model
    xPosRole: "xPos"
    yPosRole: "yPos"
    zPosRole: "zPos"
}

Ajoutez les deux autres séries de la même manière, mais modifiez légèrement certains détails spécifiques à la série :

Scatter3DSeries {
    id: scatterSeriesTwo
    itemLabelFormat: "Series 2: X:@xLabel Y:@yLabel Z:@zLabel"
    itemSize: 0.05
    mesh: Abstract3DSeries.MeshCube
    ...

Ensuite, modifiez un peu les propriétés des axes par défaut dans scatterGraph:

axisX.segmentCount: 3
axisX.subSegmentCount: 2
axisX.labelFormat: "%.2f"
axisZ.segmentCount: 2
axisZ.subSegmentCount: 2
axisZ.labelFormat: "%.2f"
axisY.segmentCount: 2
axisY.subSegmentCount: 2
axisY.labelFormat: "%.2f"

Ensuite, ajoutez quelques boutons à mainView pour contrôler le graphique, dont l'un est présenté à titre d'exemple :

Button {
    id: shadowToggle
    width: mainView.buttonWidth // Calculated elsewhere based on screen orientation
    anchors.left: parent.left
    anchors.top: parent.top
    anchors.margins: 5
    text: scatterGraph.shadowsSupported ? "Hide Shadows" : "Shadows not supported"
    enabled: scatterGraph.shadowsSupported
    onClicked: {
        if (scatterGraph.shadowQuality === AbstractGraph3D.ShadowQualityNone) {
            scatterGraph.shadowQuality = AbstractGraph3D.ShadowQualityHigh;
            text = "Hide Shadows";
        } else {
            scatterGraph.shadowQuality = AbstractGraph3D.ShadowQualityNone;
            text = "Show Shadows";
        }
    }
}

Ensuite, modifiez dataView pour faire de la place aux boutons en haut :

Item {
    id: dataView
    anchors.bottom: parent.bottom
    width: parent.width
    // Adjust the space based on screen orientation:
    // If we're in portrait mode, we have 3 rows of buttons, otherwise they are all in one row.
    height: parent.height - (mainView.portraitMode ? shadowToggle.implicitHeight * 3 + 25
                                                   : shadowToggle.implicitHeight + 10)
    ...

Et le tour est joué !

Contenu de l'exemple

Exemple de projet @ code.qt.io