シンプルな散布図

QMLアプリケーションでのScatter3D の使用方法。

「シンプルな散布図」では、Scatter3D とQMLを使用して、シンプルな散布図の可視化を作成する方法を紹介します。

グラフの操作方法については、こちらのページをご覧ください。

独自の新しいQt Quick アプリケーションを作成する方法については、Qt Creator のヘルプを参照してください。

色分けされた球体と視覚化コントロールを備えた3D散布図

例の動作確認

以下の手順でサンプルを実行できます。

Qt Creator
Welcome モードを開き、Examples からこのサンプルを選択してください。詳細については、Qt Creator の「チュートリアル：ビルドと実行」を参照してください。
Qt Extension for Visual Studio Code
Command Palette から `Qt: Open Qt examples ` コマンドを実行し、リストからサンプルを選択します。詳細については、Qt Extension for Visual Studio Code の「チュートリアル: ビルドと実行」を参照してください。

レイアウトの設定

QMLコードに取り掛かる前に、main.cpp がアプリケーションの設定を行います。main.qml ファイルはリソース（qrc: ）から読み込まれます。

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

この `main.qml ` ファイルは、アプリケーションの QML コードの出発点となります。まず、必要なすべての QML モジュールをインポートします：

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtGraphs

次に、グラフのデータを保持するアイテムとなるData アイテムを作成します。

Data {
    id: seriesData
}

次に、グラフの2つの異なるテーマ（Qt GreenテーマとQt Neon Greenテーマ）を定義する2つのGraphsTheme アイテムを作成します。

GraphsTheme {
    id: themeQt
    theme: GraphsTheme.Theme.QtGreen
    labelFont.pointSize: 40
}

GraphsTheme {
    id: themeQtNeonGreen
    theme: GraphsTheme.Theme.QtGreenNeon
    colorScheme: GraphsTheme.ColorScheme.Dark
}

このアプリケーションのレイアウトは、グラフのさまざまな視覚的オプションをオン/オフに切り替える5つのボタンと、もちろんグラフ自体で構成されます。これらを配置する方法はいくつかありますが、その1つとして、4つのボタン、Graph 、および5つ目のボタンをすべて含むGridLayout を、ColumnLayout 内に配置する方法があります。

ColumnLayout {
    id: mainLayout
    anchors.fill: parent
    anchors.margins: margin
    spacing: spacing

このGridLayout はレスポンシブに対応しています。つまり、使用される列の数はアプリケーションウィンドウの幅に応じて変化します。これは、columns プロパティに三項演算子を割り当てることで実現されており、ウィンドウの幅に応じて1、2、または4のいずれかに評価されます。

GridLayout {
    Layout.fillWidth: true
    rowSpacing: spacing
    columnSpacing: spacing

    columns: mainView.width < mainView.buttonMinWidth * 2 + mainView.spacing + mainView.margin * 2 // width of 2 buttons
             ? 1
             : (mainView.width < mainView.buttonMinWidth * 4 + mainView.spacing * 3 + mainView.margin * 2 // width of 4 buttons
                ? 2
                : 4)

このGridLayout では、4つのRoundButtonがインスタンス化されています。1つは影の表示/非表示を切り替えるため、1つはメッシュのスムージング用、1つはカメラ位置用、そして最後に、グラフの背景を変更するためのものです。すべてのボタンは同じ構造に従っています。すべてのボタンに対してこの構造を再定義する代わりに、カスタムコンポーネントを作成することができます。

component CustomButton : RoundButton {
    id: buttonRoot

CustomButtom はRoundButton 型を継承していますが、いくつかの追加機能があります。Layout.minimumWidth 、Layout.FillWidth 、radius 、background といったプロパティが設定されています。これらはボタンのスタイルやレイアウトを定義します。

property alias source: iconImage.source

Layout.minimumWidth: buttonMinWidth
Layout.fillWidth: true

radius: mainView.radius

background: Rectangle {
    radius: mainView.radius
    color: "white"
    border.color: "black"
}

一方、contentItem はボタンのコンテンツを定義しており、この場合はアイコンとテキストを含むRow 型です。アイコンはImage 型を使用してインポートされ、source プロパティで設定されます。テキストはLabel 型を使用して作成され、text プロパティで設定されます。これらの2つのプロパティに対して、カスタムコンポーネントの先頭に2つのエイリアスが作成されており、これによりCustomButton のインスタンスが作成された際にこれらのプロパティを設定できるようになります。

contentItem: Row {
    id: content
    Image {
        id: iconImage
    }
    Label {
        text: buttonRoot.text
        horizontalAlignment: Text.AlignLeft
        anchors.verticalCenter: parent.verticalCenter
    }
}

GridLayout 内では、4つのCustomButtonが作成されます。設定が必要なプロパティは3つあり、アイコン画像とテキスト用の2つのエイリアス、およびシグナルonClicked です。

CustomButton {
    id: shadowButton
    text: graph.shadowQuality === Graphs3D.ShadowQuality.None ?
              qsTr("Show Shadows") : qsTr("Hide Shadows")
    source: graph.shadowQuality === Graphs3D.ShadowQuality.None ?
                "qrc:/images/shadow.svg" : "qrc:/images/shadow_hide.svg"
    onClicked: {
        graph.shadowQuality = graph.shadowQuality === Graphs3D.ShadowQuality.None ?
                    Graphs3D.ShadowQuality.High :
                    Graphs3D.ShadowQuality.None
    }
}

たとえば、シャドウボタンでは、onClicked の「sign」プロパティを設定して、シャドウのオン/オフを切り替えるようにします。

グラフの設定

レイアウトの次はGraph です。これは独自のQMLファイルGraph.qml で定義されており、次のようにインスタンス化されます：

Graph {
    id: graph
    Layout.fillWidth: true
    Layout.fillHeight: true
}

Graph.qml 内の実装を見ると、グラフはScatter3D 型であり、Item 型の中にネストされています。

Scatter3D {
    id: 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"

データの設定

このグラフは、Data.qml に記載されたデータを表す 3 つのデータセットを表示しています。データセットはListModel 型として保存され

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

ListModel {
    id: dataModelTwo
    ListElement{ xPos: 2.25 ; yPos: 1.36 ; zPos: -1.3 }
    ...
    ListElement{ xPos: -3.4 ; yPos: 0.6 ; zPos: 0.9 }
}

ListModel {
    id: dataModelThree
    ListElement{ xPos: 8.0; yPos: -2.0; zPos: 4.0 }
    ...
    ListElement{ xPos: 5.66 ; yPos: -4.98 ; zPos: 3.72 }
}

として保存されており、property aliases を通じて他のファイルから利用されています。

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

これらのエイリアスを使用する前に、ItemModelScatterDataProxy 項目を含むScatter3DSeries タイプを作成します。

Scatter3DSeries {
    id: scatterSeries
    itemLabelFormat: "Series 1: X:@xLabel Y:@yLabel Z:@zLabel"

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

このデータプロキシは、そのitemModel プロパティを使用して、Data.qml 内のデータセットを参照します。上記のエイリアスには、main.qml およびseriesData でインスタンス化されたData 型のid を通じてアクセスします。

itemModel: seriesData.model

残りの 2 つのデータセットについても、この手順を繰り返します。

Scatter3DSeries {
    id: scatterSeriesTwo
    ...
ItemModelScatterDataProxy {
    itemModel: seriesData.modelTwo
    ...
    }
}
Scatter3DSeries {
    id: scatterSeriesThree
    ...
ItemModelScatterDataProxy {
    itemModel: seriesData.modelThree
    ...
    }
}

よし、散布図が3つのデータセットを指すようになりました。

あとは、残りのボタンである「theme button 」を「ColumnLayout 」に追加するだけです。このボタンの唯一の違いは、レイアウトの左側に配置されている点です。これは、Layout.alignment プロパティをQt.AlignLeft に、Layout.fillWidth をfalse に定義することで設定されます。

CustomButton {
    id: themeButton
    Layout.alignment: Qt.AlignLeft
    Layout.fillWidth: false

サンプルコンテンツ

サンプルプロジェクト @ 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.