Back to Qt.io
Contact Us Blog Download Qt

数式

数式を視覚化する

Mathematical Equationsでは、QML で数式を可視化する方法を、利用可能なすべてのグラフタイプを使って説明しています。また、QtQuick3D シーンをグラフに統合する方法や、ExtendedSceneEnvironment を使ってグラフの見通しを調整する方法についても説明しています。

QMLアプリケーションの基本的な機能については、「簡単な散布図」を参照してください。

例を実行する

から例を実行するには Qt Creatorからサンプルを実行するには、Welcome モードを開き、Examples からサンプルを選択します。詳細については、Building and Running an Exampleを参照してください。

設定

すべてのグラフ・タイプのデータは、共通のListModel に保存できる：

ListModel {
    id: dataModel
}

モデルは、グラフ・シリーズのグラフ・タイプごとに設定します：

Surface3DSeries {
    id: surfaceSeries
    itemLabelFormat: "(@xLabel, @zLabel): @yLabel"

    ItemModelSurfaceDataProxy {
        itemModel: dataModel
        columnRole: "xPos"
        yPosRole: "yPos"
        rowRole: "zPos"
    }
}
...
Bar3DSeries {
    id: barSeries
    itemLabelFormat: "@colLabel, @rowLabel: @valueLabel"

    ItemModelBarDataProxy {
        itemModel: dataModel
        columnRole: "xPos"
        valueRole: "yPos"
        rowRole: "zPos"
    }
}
...
Scatter3DSeries {
    id: scatterSeries
    itemLabelFormat: "(@xLabel, @zLabel): @yLabel"
    mesh: Abstract3DSeries.Mesh.Point

    ItemModelScatterDataProxy {
        itemModel: dataModel
        xPosRole: "xPos"
        yPosRole: "yPos"
        zPosRole: "zPos"
    }
}

役割を設定することで、モデルのデータを対応する軸に自動的にマッピングすることができます。

方程式の解析

方程式は、以下の演算子や数学関数、およびそれらの関数を使用するために必要な文字を使用して、テキストフィールドに入力することができます：

演算子関数文字数
+ - * / % ^sin cos tan log exp sqrt( ) ,

扱われるデータには2つの軸と値があるため、パラメータとしてx とy がサポートされています。式は演算子の周りに空白があってもよいので、以下のどちらのスタイルでも問題ありません：

  • x^2+y^2
  • x ^ 2 + y ^ 2

方程式はJavaScriptの方程式パーサーと計算機を使って解析され、QMLにインポートされます：

import "calculator.js" as Calc

この計算機はTypeScriptで tanguy_k 、Stack Overflowに投稿されたもので、QMLから使えるようにJavaScriptに変換されている。

方程式のパラメータは、方程式が変更されたり、列や行の数が更新されたりするたびに埋められます。

行と列のループ：

for (i = xValues.first.value; i <= xValues.second.value; ++i) {
    for (j = zValues.first.value; j <= zValues.second.value; ++j)
        addDataPoint(i, j)
}

x 、y ：

function addDataPoint(i, j) {
    var filledEquation = equation.text.replace("x", i)
    filledEquation = filledEquation.replace("y", j)
    ...

方程式はJavaScriptの電卓に渡され、結果を得ます。そして、定義されたロールに挿入することで、データモデルに追加されます：

try {
    var result = Calc.calculate(filledEquation)
    dataModel.append({"xPos": i, "yPos": result, "zPos": j})
}

式に間違いや未知の演算子や数学関数がある場合、電卓によって投げられたエラーはキャッチされ、エラーダイアログが表示されます：

MessageDialog {
    id : messageDialog
    title: qsTr("Error")
    text: qsTr("Undefined behavior")
    ...

電卓からのエラーメッセージの表示：

catch(msg) {
    messageDialog.informativeText = msg.toString()
    messageDialog.open()
}

グラフ

3つのグラフタイプすべてに同じデータモデルが使用されます。しかし、グラフの設定にはいくつかの違いがあります。

表面

サーフェスグラフは、特に変更せずにデータを表示するために使用されます。各行、各列に計算結果とともに方程式がレンダリングされます。

唯一の変更は、軸のセグメント数を設定することである：

axisX.segmentCount: 10
axisZ.segmentCount: 10
axisY.segmentCount: 10

値の高低を強調するために、テーマに対して範囲グラデーションが設定される：

theme : GraphsTheme {
    id: surfaceTheme
    colorStyle: GraphsTheme.ColorStyle.RangeGradient
    baseGradients: [ gradient1 ]
    plotAreaBackgroundVisible: false
}

グラデーション自体は、他のテーマで使用できるように別の場所で定義されます。

棒グラフ

棒グラフにも範囲グラデーションが使われる。このグラデーションは、グラフをそれほど回転させずに値を見やすくするために、わずかな透明度を利用しています。透明度をコントロールするスライダーが追加されました。

散布図

散布図では、QtQuick3D の統合に備えてテーマをもう少し調整します。

まず、他の2つとは異なるグラデーションを使用します。次に、システム環境設定を使用する他の2つとは異なり、暗い配色が強制されます。最後に、プロットエリアの背景、ラベル、グリッドはvisibilityをfalseに設定することで非表示になります。

散布図は多数のデータ点を表示するのに適しており、そのため各「行」と「列」に3つのデータ点が追加される。散布図には行と列の概念がないため、このようなことができる：

for (var i = xValues.first.value; i <= xValues.second.value; i += 0.333) {
    for (var j = zValues.first.value; j <= zValues.second.value; j += 0.333)
        addDataPoint(i, j)
}

散布図には他の2つのグラフよりも多くのデータポイントがあるため、mesh type ：

mesh: Abstract3DSeries.Mesh.Point

QtQuick3Dシーンの統合

QtQuick3D 、QMLにインポートする必要があります：

import QtQuick3D

QtQuick3D シーンは、importScene プロパティを使用してグラフにインポートできます。シーンは、ルートNode に含まれるModels、Lights、reflection probes 、およびその他のNodes の組み合わせにすることができます。この例では、不透明マップを持つ矩形のみが追加されています：

importScene: Node {
    Model {
        scale: Qt.vector3d(0.1, 0.1, 0.1)
        source: "#Rectangle"
        y: -2
        eulerRotation.x: -90
        materials: [
            PrincipledMaterial {
                baseColor: "#373F26"
                opacityMap: Texture {
                    source: "qrc:/images/opacitymap.png"
                }
            }
        ]
    }
}

QtQuick3D を使って見通しを変える

ExtendedSceneEnvironment を見つけるには、次のインポートが必要です：

import QtQuick3D.Helpers

グラフのデフォルトのシーン環境をオーバーライドするには、ExtendedSceneEnvironment でenvironment プロパティを追加します。この場合、backgroundMode 、clearColor 、tonemapMode が設定されます。さらに、glow が有効になります。グローのようなポストプロセッシングエフェクトを追加するには、トーンマップモードをTonemapModeNone に設定する必要があります。

environment: ExtendedSceneEnvironment {
    backgroundMode: ExtendedSceneEnvironment.Color
    clearColor: scatterTheme.backgroundColor
    tonemapMode: ExtendedSceneEnvironment.TonemapModeNone
    glowEnabled: true
    ...

グローを強くするには、関連する他のプロパティをいくつか設定する。

サンプル・プロジェクト @ code.qt.io

© 2025 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.