Graphique de nuage de points simple

La section «Graphique de dispersion simple » explique comment créer un graphique de dispersion simple à l'aide de Scatter3D et de QML.

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

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

Exécution de l'exemple

Vous pouvez exécuter l'exemple à partir de :

• Qt Creator

  Ouvrez le mode « Welcome » et sélectionnez l’exemple dans « Examples ». Pour plus d’informations, consultez Qt Creator: Tutoriel : Compiler et exécuter.

• Qt Extension for Visual Studio Code

  Exécutez la commande « Qt: Open Qt examples » à partir de Command Palette, puis sélectionnez l’exemple dans la liste. Pour plus d’informations, consultez Qt Extension for Visual Studio Code: Tutoriel : Compiler et exécuter.

Notions de base sur l’application

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

Cette application intègre un bouton « Quitter » dans l’interface utilisateur ; vous devez 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, regroupez tous les fichiers d'.qml s 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>

Cela nécessite également de configurer la lecture de ` main.qml ` à partir de la ressource (qrc:) :

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

Lorsque vous utilisez cmake à la place de qmake, les fichiers d'.qml s sont ajoutés dans un module QML au sein du 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, faites en sorte que l'application s'exécute dans une fenêtre agrandie :

viewer.showMaximized();

Configuration du graphe

Commencez par importer tous les modules QML nécessaires :

import QtQuick
import QtQuick.Controls
import QtDataVisualization

Créez ensuite l’ Item principale et nommez-la mainView:

Item {
    id: mainView

Ajoutez ensuite un autre « Item » à l’intérieur de l’« Item » principal, et nommez-le « dataView ». Ce sera l’élément qui contiendra le graphique Scatter3D. Ancrez-le au bas de son parent :

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

Ajoutez ensuite le graphique Scatter3D lui-même. Placez-le à l’intérieur de l’ dataView et nommez-le scatterGraph. Faites en sorte qu’il occupe tout l’espace de dataView:

Scatter3D {
    id: scatterGraph
    anchors.fill: parent

Le graphique est désormais prêt à l’emploi, mais ne contient aucune donnée. Il présente également les axes et les propriétés visuelles par défaut.

Modifiez ensuite certaines propriétés visuelles en ajoutant d’abord 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é des ombres a été modifiée et la position de la caméra a été ajustée. Les autres propriétés visuelles conviennent, 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 qui y figure a été modifiée :

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

Commencez ensuite à alimenter le graphique avec des données.

Ajout de données au graphique

Créez un élément « Data » dans l’ 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 dans « Data.qml ». Il comporte un « Item » comme composant principal.

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 ».

Exposez ensuite les modèles de données afin qu’ils soient utilisables depuis « main.qml ». Pour ce faire, définissez-les comme alias dans le composant de données principal :

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

Vous pouvez désormais utiliser les données de Data.qml avec scatterGraph dans main.qml. Commencez par ajouter une série Scatter3DSeries et nommez-la scatterSeries:

Scatter3DSeries {
    id: scatterSeries

Ensuite, configurez le format des étiquettes de sélection pour la série :

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

Enfin, ajoutez les données de la série 1 dans un ItemModelScatterDataProxy. Définissez les données elles-mêmes comme source d’ itemModel s 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 à chaque série :

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

Modifiez ensuite légèrement les propriétés des axes par défaut dans l’ 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"

Ajoutez ensuite quelques boutons à l’ mainView pour contrôler le graphique ; l’un d’entre eux est illustré à 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";
        }
    }
}

Modifiez ensuite l’ 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 voilà, c’est terminé !

Exemple de contenu

Exemple de projet sur code.qt.io