Subnavigation

QtGraphs 6.10 の新機能

12月 01, 2025 by Qt Group 日本オフィス | Comments

このブログは「QtGraphs New Features in 6.10 」の抄訳です。

2025年10月に Qt 6.10 がリリースされました。QtGraphs が提供する新機能と改良点を見ていきましょう。

主な新機能と改善点

塗りつぶしサーフェス（Filled Surfaces）

これまで、3D サーフェスグラフでは薄い表面レイヤーのみを表示できました。
Qt 6.10 では、3D サーフェスの下にある領域を塗りつぶす機能が追加され、サーフェスがベースからトップレイヤーまでしっかりと満たされたように描画できるようになりました。
参照: https://doc.qt.io/qt-6/qsurface3dseries.html#DrawFlag-enum
この塗りつぶしはグラデーションにも対応しており、従来のサーフェス描画と同様の表現が可能です。

塗りつぶしサーフェスを使うには、有効にしたいシリーズに対してフラグを設定するだけで済みます。

Surface3DSeries {
    id: oceanSurface
    drawMode: Surface3DSeries.DrawSurface | Surface3DSeries.DrawFilledSurface
    shading: Surface3DSeries.Shading.Smooth
    colorStyle: GraphsTheme.ColorStyle.RangeGradient
    baseGradient: Gradient {
        GradientStop {position: 0.0; color: "#ff000033"}
        GradientStop {position: 1.0; color: "#6600ffff"}
    }
}

QtQuick3D アプリケーションへのグラフ挿入サポートの強化

Qt 6.9 では、View3D の importScene プロパティを使用して、QtQuick3D アプリケーションに 3D グラフを挿入する簡単な方法を導入しました。Qt 6.10 では、これをさらに発展させ、Bars3DNode, Scatter3DNode, Surface3DNode を導入しました:
参照：https://doc.qt.io/qt-6/qml-qtgraphs-bars3dnode.html
importScene の代わりにこれらを使用することで、Light や Model などの他の QtQuick3D の Node と同様に、View3D に直接ノードを追加することが可能になります。

これを使用するのはとても簡単で、次のコードスニペットを見れば分かります：

View3D {
    ...
    Scatter3DNode {
        id: satellites
        theme: GraphsTheme { id: graphTheme... }
        Scatter3DSeries { id: scatterseries... }
    }

    Model {
        id: earth
        source: "meshes/sphere_mesh.mesh"
        materials: [
            earthMaterial
        ]
    }
    ...
}

2Dでのマルチ軸サポート

これまで、2D グラフに追加の軸を追加することはできませんでした。例えば、同じ GraphsView 内で異なる値を持つ 2 種類のグラフを表示したい場合でも不可能でした。
Qt 6.10 では、複数の水平方向および垂直方向の軸を定義できるサポートが追加されました。

multi-axis

GraphsView {
    ...
    axisX: BarCategoryAxis {
        id: xAxis
        categories: ["Mon", "Tue", "Wen", "Thu", "Fri", "Sat", "Sun"]
    }

    axisY: ValueAxis {
        id: yAxis
        max: 120
    }

    BarSeries {
        id: percipitationSeries
        ...
        BarSet {
            label : "Percipitation"
            values : [40, 23, 22, 65, 80, 60, 50]
            color: "#001166"
        }
    }

    LineSeries {
        id: temperatureSeries
        ...
        axisY: ValueAxis {
            id: axisY2
            max: 30
            alignment: Qt.AlignRight
        }
        axisX: ValueAxis {
            id: xAxis2
            max: 7
            tickInterval: 1
        }
        ...
    }
}

スライスを画像としてレンダリング

グラフそのものを画像としてレンダリングする機能は既に存在していましたが、これまでサーフェスグラフやバーグラフのスライスビューを画像としてレンダリングする機能が不足していました。
Qt 6.10 では、この問題が解消され、スライスビューを画像として出力できるようになりました。

render-slice-to-image

C++ では、シグナルに接続することで画像を直接取得できます：

void BarGraph::renderSliceToImage()
{
    int index = m_lineSelectText->text().isEmpty() ? -1
               : m_lineSelectText->text().toInt();
    QtGraphs3D::SliceCaptureType sliceType = m_rowRadioButton->isChecked()
                                            ? QtGraphs3D::SliceCaptureType::RowImage
                                            : QtGraphs3D::SliceCaptureType::ColumnImage;

    connect(m_modifier, &BarGraphModifier::sliceImageChanged, this,
            [this](const QImage &image) {
        m_sliceResultLabel->setPixmap(QPixmap::fromImage(image));
    });
    m_modifier->renderSliceToImage(sliceType, index);
}

void BarGraphModifier::renderSliceToImage(QtGraphs3D::SliceCaptureType sliceType,
                                          int requestedIndex)
{
    m_graph->renderSliceToImage(requestedIndex, sliceType);
}

QML では、シグナルから返される項目を Image として直接使用したり、Image の source にする方法がないため、画像を使用するには保存する必要があります。
下のスニペットでは、画像を保存するファイルを選択するために FileDialog を追加しています：

...
id: controls
property url selectedFile: fileDialog.selectedFile

FileDialog {
    id: fileDialog
    currentFolder: StandardPaths.standardLocations(StandardPaths.PicturesLocation)[0]
    fileMode: FileDialog.SaveFile
    selectedFile: controls.selectedFile
    onAccepted: {
        controls.selectedFile = selectedFile
    }
}

Button {
    text: "Slice To Image"
    onClicked: {
        var rowCol = rowRadio.checked ? Graphs3D.SliceCaptureType.RowImage
                                      : Graphs3D.SliceCaptureType.ColumnImage
        var index = textField.text
        barGraph.graph.renderSliceToImage(index, rowCol, controls.selectedFile);
    }
}

...

小さな改善点

テキストの省略表示（Text Eliding）

2D の軸ラベルではテキストの省略表示（eliding）がサポートされておらず、ラベルが長い場合に重なって読めなくなることがありました。今回、この問題を解消するためにサポートが追加されました。

小さな円グラフスライスのラベル表示制御

円グラフのスライスが小さい場合、ラベルが重なって読みにくく、あるいは読めなくなることがあります。これに対応するため、一定サイズ以下のラベルを非表示にする機能が追加されました。また、この非表示ロジックは必要に応じて調整できます。

ホバー検出サポート

2D グラフで、シリーズがホバーされているかどうかを検出できるようになりました。これにより、たとえば特定のシリーズをハイライトしたり、ホバーされているシリーズに応じて描画順序を変更したり（これも Qt 6.10 の新機能として後述）、といったことが簡単に行えるようになります。

プロット領域のクリッピングサポート

アイテムが一部プロット領域の外側にはみ出す場合に、プロット領域をクリップしないようにするオプションが追加されました：
https://doc.qt.io/qt-6/ja/qml-qtgraphs-graphsview.html#clipPlotArea-prop

データポイント座標のクエリ

LineSeries で、レンダー座標に基づいてデータポイントの座標を取得できるようになりました：
https://doc.qt.io/qt-6/ja/qlineseries.html#dataPointCoordinatesAt

MouseArea {
    anchors.fill: graphView
    onClicked: {
        queriedPoint = lineSeries.dataPointCoordinatesAt(mouse.x - graphView.plotArea.x,
                                                         mouse.y - graphView.plotArea.y)
    }
}

描画順序のカスタマイズ

同一の GraphsView 内での 2D グラフの描画順序をカスタマイズできるようになりました。
次のビデオクリップでは、現在ホバーされているグラフが前面に表示されるように描画順が調整されています。

カテゴリ別ロギング

最後に、カテゴリ別ロギングのサポートを追加しました。これにより、関心のある領域のログメッセージだけを受け取ることが、必要に応じてより簡単になります。

まとめ

Qt 6.10 のリリースは、QtGraphs に大きな進歩をもたらし、機能性と開発者エクスペリエンスの両方を強化しています。塗りつぶしサーフェス描画、2D グラフのマルチ軸サポート、QtQuick3D アプリケーションにシームレスに統合するための新しいノードタイプの導入により、複雑なデータの可視化がこれまで以上に柔軟で直感的になりました。

また、より正確なスライス画像のレンダリング、改善されたラベル管理、強化されたユーザーインタラクションオプションなどの改善により、開発者はより動的で情報量の多いユーザーインターフェースを作成できるようになります。

Blog Topics:

Graphs

Comments