Einfaches Streudiagramm

„Einfaches Streudiagramm“ zeigt, wie man mit Scatter3D und QML eine einfache Streudiagramm-Visualisierung erstellt.

Anleitungen zur Interaktion mit dem Diagramm finden Sie auf dieser Seite.

Anleitungen zum Erstellen einer eigenen neuen „ Qt Quick “-Anwendung finden Sie in der Hilfe zu „ Qt Creator “.

Ausführen des Beispiels

Sie können das Beispiel wie folgt ausführen:

• Qt Creator

  Öffnen Sie den „ Welcome “-Modus und wählen Sie das Beispiel unter „ Examples “ aus. Weitere Informationen finden Sie unter „Qt Creator “: Tutorial: Erstellen und Ausführen.

• Qt Extension for Visual Studio Code

  Führen Sie den Befehl „ Qt: Open Qt examples “ über „ Command Palette “ aus und wählen Sie das Beispiel aus der Liste aus. Weitere Informationen finden Sie unter Qt Extension for Visual Studio Code: Tutorial: Erstellen und Ausführen.

Grundlagen der Anwendung

Bevor Sie sich mit dem QML-Code befassen, werfen Sie einen Blick auf die Anwendung „ main.cpp “.

Diese Anwendung implementiert eine Schaltfläche „Quit“ in der Benutzeroberfläche. Daher sollten Sie das Signal „ QQmlEngine::quit()“ mit dem Slot „ QWindow::close()“ der Anwendung verbinden:

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

Um die Bereitstellung etwas zu vereinfachen, fassen Sie alle „ .qml “-Dateien der Anwendung in einer Ressourcendatei zusammen (qmlscatter.qrc):

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

Dazu muss außerdem festgelegt werden, dass die ` main.qml `-Dateien aus der Ressource (qrc:) gelesen werden:

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

Wenn Sie cmake anstelle von qmake verwenden, werden die „ .qml “-Dateien stattdessen in ein QML-Modul in der Datei „ CMakeLists.txt “ eingefügt:

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

Stellen Sie schließlich sicher, dass die Anwendung in einem maximierten Fenster ausgeführt wird:

viewer.showMaximized();

Einrichten des Graphen

Importieren Sie zunächst alle benötigten QML-Module:

import QtQuick
import QtQuick.Controls
import QtDataVisualization

Erstellen Sie anschließend die Hauptdatei „ Item “ und nennen Sie sie „ mainView “:

Item {
    id: mainView

Fügen Sie anschließend ein weiteres „ Item “ innerhalb des Haupt-„ Item “ hinzu und nennen Sie es „ dataView “. Dies ist das Element, das das Scatter3D-Diagramm enthalten wird. Verankern Sie es am unteren Rand des übergeordneten Elements:

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

Fügen Sie als Nächstes das Scatter3D-Diagramm selbst hinzu. Fügen Sie es innerhalb des „ dataView “ ein und benennen Sie es „ scatterGraph “. Stellen Sie sicher, dass es das „ dataView “ ausfüllt:

Scatter3D {
    id: scatterGraph
    anchors.fill: parent

Nun ist das Diagramm einsatzbereit, enthält jedoch noch keine Daten. Es weist zudem die Standardachsen und visuellen Eigenschaften auf.

Ändern Sie als Nächstes zunächst einige visuelle Eigenschaften, indem Sie Folgendes in „ scatterGraph “ einfügen:

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

Es wurde ein benutzerdefiniertes Design hinzugefügt, die Schattenqualität geändert und die Kameraposition angepasst. Die anderen visuellen Eigenschaften sind in Ordnung, daher müssen sie nicht geändert werden.

Das benutzerdefinierte Design basiert auf einem vordefinierten Design, „ Theme3D.ThemeQt “, jedoch wurde die darin verwendete Schriftart geändert:

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

Führen Sie anschließend Daten in das Diagramm ein.

Daten zum Diagramm hinzufügen

Erstellen Sie innerhalb des „ mainView “ ein „ Data “-Element und nennen Sie es „ seriesData “:

Data {
    id: seriesData
}

Das „ seriesData “-Element enthält die Datenmodelle für alle drei in diesem Beispiel verwendeten Reihen.

Dies ist die Komponente, die die Daten in „ Data.qml “ enthält. Sie hat eine „ Item “ als Hauptkomponente.

Fügen Sie in der Hauptkomponente die Daten selbst zu einem „ ListModel “ hinzu und nennen Sie ihn „ dataModel “:

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

Fügen Sie zwei weitere davon zu den anderen beiden Reihen hinzu und benennen Sie sie „ dataModelTwo “ und „ dataModelThree “.

Stellen Sie anschließend die Datenmodelle so bereit, dass sie über „ main.qml “ genutzt werden können. Definieren Sie sie dazu als Aliase in der Hauptdatenkomponente:

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

Nun können Sie die Daten aus „ Data.qml “ zusammen mit „ scatterGraph “ in „ main.qml “ verwenden. Fügen Sie zunächst eine „Scatter3DSeries“ hinzu und nennen Sie sie „ scatterSeries “:

Scatter3DSeries {
    id: scatterSeries

Richten Sie anschließend das Format der Auswahllabels für die Serie ein:

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

Und fügen Sie schließlich die Daten für die erste Reihe in einem „ItemModelScatterDataProxy“ hinzu. Legen Sie die Daten selbst als „ itemModel “ für den Proxy fest:

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

Fügen Sie die beiden anderen Reihen auf dieselbe Weise hinzu, passen Sie jedoch einige reihenspezifische Details leicht an:

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

Passen Sie anschließend die Eigenschaften der Standardachsen in „ scatterGraph “ leicht an:

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"

Fügen Sie anschließend dem „ mainView “ einige Schaltflächen zur Steuerung des Diagramms hinzu; eine davon ist als Beispiel dargestellt:

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";
        }
    }
}

Passen Sie anschließend „ dataView “ an, um oben etwas Platz für die Schaltflächen zu schaffen:

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

Und schon sind Sie fertig!

Inhalt des Beispiels

Beispielprojekt @ code.qt.io