Back to Qt.io
Contact Us Blog Download Qt
本页内容

简单的散点图

在 QML 应用程序中使用 Scatter3D。

“简单散点图”演示了如何使用 Scatter3D 和 QML 制作简单的散点图可视化效果。

有关如何与图表交互的说明，请参阅此页面。

有关如何创建自己的新Qt Quick 应用程序的说明，请参阅《Qt Creator 》帮助文档。

绘制三组形状和密度各异的数据点序列的3D散点图

运行示例

您可以通过以下方式运行示例：

应用程序基础

在深入研究 QML 代码之前，请先查看应用程序main.cpp 。

该应用程序在用户界面中实现了“退出”按钮，因此您需要将QQmlEngine::quit() 信号连接到应用程序的QWindow::close() 槽：

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

为了简化部署过程，请将应用程序中所有.qml 文件汇总到一个资源文件（qmlscatter.qrc ）中：

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

这还需要将main.qml 设置为从资源（qrc: ）中读取：

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

当使用 cmake 代替 qmake 时，.qml 文件应添加到CMakeLists.txt 中的一个 QML 模块中：

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

最后，让应用程序以最大化窗口的方式运行：

viewer.showMaximized();

设置图

首先，导入所有需要的 QML 模块：

import QtQuick
import QtQuick.Controls
import QtDataVisualization

然后，创建主Item 并将其命名为mainView ：

Item {
    id: mainView

接着，在主Item 内部添加另一个Item ，并将其命名为dataView 。这将作为容纳 Scatter3D 图表的容器。将其锚定到父元素底部：

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

接下来，添加 Scatter3D 图表本身。将其添加到dataView 内部，并命名为scatterGraph 。使其填满dataView ：

Scatter3D {
    id: scatterGraph
    anchors.fill: parent

现在该图已准备就绪，但尚无数据。它还保留着默认的坐标轴和视觉属性。

接下来，先通过在scatterGraph 中添加以下内容来修改一些视觉属性：

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

已添加自定义主题，更改了阴影效果，并调整了摄像机位置。其他视觉属性均已合适，因此无需更改。

该自定义主题基于预定义主题Theme3D.ThemeQt ，但其中字体已进行修改：

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

然后，开始向图表输入一些数据。

向图表添加数据

在“mainView ”中创建一个Data 项，并将其命名为seriesData ：

Data {
    id: seriesData
}

该“seriesData ”项包含本示例中使用的所有三个数据系列的数据模型。

这是在Data.qml 中存储数据的组件，其主组件为Item 。

在主组件中，将数据本身添加到ListModel 中，并将其命名为dataModel ：

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

为另外两个系列再添加两个此类组件，并将其命名为 `dataModelTwo ` 和 `dataModelThree`。

然后，将数据模型公开以便在main.qml 中使用。具体操作是在主数据组件中将它们定义为别名：

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

现在，您可以在main.qml 中将Data.qml 的数据与scatterGraph 结合使用。首先，添加一个Scatter3DSeries并将其命名为scatterSeries ：

Scatter3DSeries {
    id: scatterSeries

然后，为该系列设置选择标签格式：

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

最后，在ItemModelScatterDataProxy中添加第一个系列的数据。将数据本身设置为代理的itemModel ：

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

以同样的方式添加另外两个系列，但需对某些系列特有的细节稍作修改：

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

接着，稍作修改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"

之后，在mainView 中添加几个用于控制图表的按钮，下图展示了一个示例：

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

接着，修改dataView ，在顶部为按钮腾出空间：

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

大功告成！

示例内容

示例项目 @ code.qt.io

© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. 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.