bitWalk's: QQuickWidget でトレンドチャート〜 PySide6

PySide (Qt for Python) は、Qt（キュート）の Python バインディングで、GUI などを構築するためのクロスプラットフォームなライブラリです。Linux, macOS および Microsoft Windows をサポートしています。配布ライセンスは LGPL で公開されています。

QChart を含む QtCharts モジュールは、Qt 6.10 / PySide6 6.10 以降、公式に非推奨となりました^[1] [2]。

従来 QChart で作成していたプロットを（Matplotlib や PyQtGraph を利用せずに）新しいやり方で作成できたので、前回に引き続き、備忘録的にサンプルを紹介します。

今回は、折れ線グラフです。時間の経過に伴うデータの変化や傾向（トレンド）を表すことを意識して、トレンドチャートと呼んでいます。

下記の環境で動作確認をしています。

	Fedora Linux 44 KDE Plasma Desktop x86_64
	Python	3.14.7
	PySide6	6.11.2
	NumPy	2.5.2

トレンドチャートのサンプル

実行例

まずは、実行例を示します。乱数を生成してつなげてプロットしただけのサンプルです。

qt_quickwidget_trend.py の実行例

Python のコード

ひとつのファイルにまとめたコードを示しました。

import sys

import numpy as np
from PySide6.QtCore import Qt
from PySide6.QtGraphs import (
    QGraphsTheme,
    QLineSeries,
    QValueAxis,
)
from PySide6.QtQuickWidgets import QQuickWidget
from PySide6.QtWidgets import (
    QApplication,
    QMainWindow,
    QStyle,
)


class MyTrend(QQuickWidget):
    def __init__(self):
        super().__init__()
        self.setResizeMode(
            QQuickWidget.ResizeMode.SizeRootObjectToView
        )
        self.setFixedSize(600, 300)

        # --------------------------------
        # Theme
        # --------------------------------
        self.theme = theme = QGraphsTheme()
        grid = theme.grid()
        grid.setMainWidth(1.0)
        grid.setSubWidth(0.5)
        theme.setGrid(grid)

        # --------------------------------
        # Axes
        # --------------------------------
        self.axis_x = axis_x = QValueAxis()
        axis_x.setRange(0, 100)

        self.axis_y = axis_y = QValueAxis()
        axis_y.setRange(0, 1)
        axis_y.setTitleText("Value")

        # --------------------------------
        # Line series
        # --------------------------------
        self.series = series = QLineSeries()
        series.setAxisX(axis_x)
        series.setAxisY(axis_y)

        # 線の太さと色
        series.setWidth(1.0)
        series.setColor(Qt.GlobalColor.green)

        # GraphsView に渡すプロパティ
        self.setInitialProperties({
            "theme": theme,
            "axisX": axis_x,
            "axisY": axis_y,
            "seriesList": [series],
        })

        # QtGraphs の GraphsView をロード
        self.loadFromModule(
            "QtGraphs",
            "GraphsView",
        )

    def append_data(self, x: float, y: float):
        self.series.append(x, y)


class Example(QMainWindow):
    def __init__(self):
        super().__init__()

        icon = self.style().standardIcon(
            QStyle.StandardPixmap.SP_TitleBarMenuButton
        )
        self.setWindowIcon(icon)
        self.setWindowTitle("Trend Chart")

        # --------------------------------
        # QQuickWidget
        # --------------------------------
        trend = MyTrend()
        self.setCentralWidget(trend)

        arr_y = np.random.random(100)
        for i, y in enumerate(arr_y):
            trend.append_data(i, y)


def main():
    app = QApplication(sys.argv)
    win = Example()
    win.show()
    sys.exit(app.exec())


if __name__ == "__main__":
    main()

プログラムの流れ

このプログラムでは、QQuickWidget を継承した MyTrend クラスを作成し、Qt Graphs の QLineSeries を使って折れ線グラフを表示しています。MyTrend の初期化時に表示サイズを 600×300 に固定し、グラフのテーマ、グリッド線、X軸とY軸、そして折れ線グラフ用の系列を順番に設定します。

テーマには QGraphsTheme を使用し、グリッド線についてはメインの線を 1 ピクセル、サブの線を 0.5 ピクセルに設定しています。X軸とY軸には QValueAxis を使用し、X軸を 0 ～ 100、Y軸を 0 ～ 1 の範囲に設定しています。また、Y軸には Valueというタイトルを設定しています。

グラフのデータを保持する QLineSeries を作成し、先ほど作成した X軸と Y軸を割り当てます。折れ線の太さを 1 ピクセル、色を緑色に設定した後、テーマ、軸、系列を GraphsView に渡すための初期プロパティとして設定します。その後、QtGraphs モジュールの GraphsView をロードすることで、グラフが表示される状態になります。

MyTrend には append_data() メソッドを用意しており、X座標と Y座標を受け取って QLineSeries に追加します。これによって、グラフそのものを管理する MyTrend と、そこへデータを供給する側を分離しています。

Example クラスでは MyTrend をメインウィンドウの中央ウィジェットとして配置し、NumPy の random.random() を使って 100個のランダムな値を生成します。生成した値を enumerate() で順番に取り出し、インデックスを X座標、ランダムな値を Y座標として append_data() に渡します。

その結果、0 ～ 99 の X座標に対して 0 ～ 1 の範囲でランダムに生成された 100個のデータが QLineSeries に追加され、Qt Graphs によって折れ線グラフとして描画されます。

最後に main() で QApplication を生成し、メインウィンドウを表示してイベントループを開始します。

トップへ