Gráfico de dispersión simple

Simple Scatter Graph muestra cómo realizar una visualización sencilla de un gráfico de dispersión utilizando Scatter3D y QML.

Para obtener instrucciones sobre cómo interactuar con el gráfico, consulte esta página.

Para obtener instrucciones sobre cómo crear una nueva aplicación Qt Quick propia, consulte la ayuda de Qt Creator.

Ejecutar el ejemplo

Para ejecutar el ejemplo desde Qt Creator, abra el modo Welcome y seleccione el ejemplo de Examples. Para más información, consulte Qt Creator: Tutorial: Construir y ejecutar.

Conceptos básicos de la aplicación

Antes de sumergirte en el código QML, echa un vistazo a la aplicación main.cpp.

Esta aplicación implementa un botón 'Salir' en la interfaz de usuario, por lo que querrás conectar la señal QQmlEngine::quit() a la ranura QWindow::close() de la aplicación:

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

Para hacer el despliegue un poco más sencillo, reúne todos los archivos .qml de la aplicación en un archivo de recursos (qmlscatter.qrc):

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

Esto también requiere configurar el main.qml para ser leído desde el recurso (qrc:):

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

Cuando se utiliza cmake en lugar de qmake, los archivos .qml se añaden en un módulo QML en el CMakeLists.txt en su lugar:

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

Por último, haz que la aplicación se ejecute en una ventana maximizada:

viewer.showMaximized();

Configuración del gráfico

Primero, importa todos los módulos QML necesarios:

import QtQuick
import QtQuick.Controls
import QtDataVisualization

Luego, crea el Item principal y llámalo mainView:

Item {
    id: mainView

Después, añade otro Item dentro del principal Item, y llámalo dataView. Este será el elemento que contendrá el gráfico Scatter3D. Anclalo al principal inferior:

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

A continuación, añade el gráfico Scatter3D propiamente dicho. Añádelo dentro del dataView y llámalo scatterGraph. Haz que rellene el dataView:

Scatter3D {
    id: scatterGraph
    anchors.fill: parent

Ahora el gráfico está listo para su uso, pero no tiene datos. También tiene los ejes y propiedades visuales por defecto.

A continuación, modifique primero algunas propiedades visuales añadiendo lo siguiente dentro de scatterGraph:

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

Se ha añadido un tema personalizado, se ha cambiado la calidad de la sombra y se ha ajustado la posición de la cámara. Las otras propiedades visuales están bien, así que no hay necesidad de cambiarlas.

El tema personalizado se basa en un tema predefinido, Theme3D.ThemeQt, pero se cambia la fuente en él:

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

A continuación, comience a alimentar el gráfico con algunos datos.

Añadir datos al gráfico

Cree un elemento Data dentro de mainView y nómbrelo seriesData:

Data {
    id: seriesData
}

El elemento seriesData contiene los modelos de datos para las tres series utilizadas en este ejemplo.

Este es el componente que contiene los datos en Data.qml. Tiene un Item como componente principal.

En el componente principal, añada los propios datos a un ListModel y nómbrelo dataModel:

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

Añada dos más a las otras dos series y nómbrelas dataModelTwo y dataModelThree.

A continuación, exponga los modelos de datos para que puedan utilizarse desde main.qml. Para ello, defínalos como alias en el componente de datos principal:

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

Ahora puede utilizar los datos de Data.qml con scatterGraph en main.qml. En primer lugar, añada un Scatter3DSeries y llámelo scatterSeries:

Scatter3DSeries {
    id: scatterSeries

A continuación, configure el formato de etiqueta de selección para la serie:

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

Y finalmente, añada los datos para la serie uno en un ItemModelScatterDataProxy. Establezca los datos mismos como el itemModel para el proxy:

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

Añade las otras dos series de la misma manera, pero modifica un poco algunos detalles específicos de la serie:

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

Luego, modifica un poco las propiedades de los ejes por defecto en 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"

Después, añade algunos botones a mainView para controlar el gráfico, uno de los cuales se muestra como ejemplo:

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

Luego, modifica dataView para hacer algo de espacio para los botones en la parte superior:

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

¡Y ya está!

Contenido del ejemplo

Proyecto de ejemplo @ code.qt.io