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

©2024 The Qt Company Ltd. 本書に含まれるドキュメントの著作権は、それぞれの所有者に帰属します。 本書で提供されるドキュメントは、Free Software Foundation が発行したGNU Free Documentation License version 1.3に基づいてライセンスされています。 Qtおよびそれぞれのロゴは、フィンランドおよびその他の国におけるThe Qt Company Ltd.の 商標です。その他すべての商標は、それぞれの所有者に帰属します。