このブログは「QtGraphs New Features in 6.10」の抄訳です。
2025年10月に Qt 6.10 がリリースされました。QtGraphs が提供する新機能と改良点を見ていきましょう。
主な新機能と改善点これまで、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"}
}
}
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 グラフに追加の軸を追加することはできませんでした。例えば、同じ GraphsView 内で異なる値を持つ 2 種類のグラフを表示したい場合でも不可能でした。
Qt 6.10 では、複数の水平方向および垂直方向の軸を定義できるサポートが追加されました。
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 では、この問題が解消され、スライスビューを画像として出力できるようになりました。
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);
}
}
...
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 アプリケーションにシームレスに統合するための新しいノードタイプの導入により、複雑なデータの可視化がこれまで以上に柔軟で直感的になりました。
また、より正確なスライス画像のレンダリング、改善されたラベル管理、強化されたユーザーインタラクションオプションなどの改善により、開発者はより動的で情報量の多いユーザーインターフェースを作成できるようになります。