Back to Qt.io
Contact Us Blog Download Qt
このページでは

数式

数式の可視化。

「数学式」では、利用可能なすべてのグラフタイプを用いて、QMLで数学式を可視化する方法について説明します。また、QtQuick3D シーンをグラフに組み込む方法や、ExtendedSceneEnvironment を使用してグラフの外観を調整する方法についても解説します。

光り効果と操作ボタンを備えた数式を表示する3Dサーフェス

QMLアプリケーションの基本機能に関する詳細については、「Simple Scatter Graph」を参照してください。

例の動作

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

設定

すべてのグラフタイプのデータは、共通の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( ) ,

x およびy をパラメータとしてサポートしています。これは、扱われるデータが2つの軸と値から構成されているためです。式では演算子の前後にスペースを入れても構いませんので、以下のどちらの形式でも問題ありません：

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

式は、QMLにインポートされたJavaScriptの式パーサーおよび計算機を使用して解析されます：

import "calculator.js" as Calc

この計算機は、tanguy_k 氏によってTypeScriptで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つとは異なり、暗い配色が強制的に適用されます。最後に、プロット領域の背景、ラベル、およびグリッドの表示を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に含まれるModel、Light、reflection probes 、およびその他のNodeの組み合わせで構成できます。この例では、不透明度マップを持つ矩形のみが追加されています：

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

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