のグラフ2DQt Widgets

Graphs 2D は、Qt Quick アプリケーションのみをサポートします。この例では、QQuickWidget を使用して、Qt Widgets アプリケーションにシンプルな 2D 円グラフを表示する方法を示します。

例の実行

から例を実行するには Qt Creatorからサンプルを実行するには、Welcome モードを開き、Examples からサンプルを選択します。詳細については、Qt Creator: チュートリアル を参照してください：ビルドと実行。

メイン・ビュー

1. PieWidget クラスは、デモ・アプリケーションのメイン・ビューを実装します。PieWidget クラスで、アプリケーション・レイアウトと UI 要素の実装に使用するウィジェットをインスタンス化します。

   m_quickWidget = new QQuickWidget;
   m_widget = new QWidget;
   m_vLayout = new QVBoxLayout(m_widget);
   m_hLayout = new QHBoxLayout;
       ...

2. PieGraph クラスは、スライスの追加と削除のロジックを処理するために使用され、その他の機能を持ちます。

   m_pieGraph = new PieGraph;
       ...

3. QQuickWidget には、source とresizeMode を設定し、context プロパティを設定します。Context プロパティは QML エンジンによってインスタンス化された QML コンポーネントにデータを公開するためのものです。

   QQmlContext *context = m_quickWidget->engine()->rootContext();
   context->setContextProperty("pieGraph", m_pieGraph);
   m_quickWidget->setSource(QUrl("qrc:/qml/quickwidgetgraphs/main.qml"));
   m_quickWidget->setResizeMode(QQuickWidget::SizeRootObjectToView);

4. ボタンを初期化し、レイアウトに追加します。

   void PieWidget::initializeButtons()
   {
   QPushButton *addButton = new QPushButton("Add Slice");
   QPushButton *removeButton = new QPushButton("Remove Slice");
   QPushButton *explodeButton = new QPushButton("Explode All");
   QPushButton *clearButton = new QPushButton("Clear Series");
   
   m_hLayout->addWidget(addButton);
   m_hLayout->addWidget(removeButton);
   m_hLayout->addWidget(explodeButton);
   m_hLayout->addWidget(clearButton);
   
   QObject::connect(addButton, &QPushButton::clicked, m_pieGraph, &PieGraph::onAddSlice);
   QObject::connect(removeButton, &QPushButton::clicked, m_pieGraph, &PieGraph::onRemoveSlice);
   QObject::connect(explodeButton, &QPushButton::clicked, m_pieGraph, &PieGraph::onExplode);
   QObject::connect(clearButton, &QPushButton::clicked, m_pieGraph, &PieGraph::onClearSeries);
       ...

グラフデータの操作

この例では、PieGraph クラスが、Graph データを操作するためのすべてのロジックを実装しています。

1. PieGraph クラスで、pieSeries プロパティを宣言します。

       ...
   Q_PROPERTY(QPieSeries *pieSeries READ pieSeries WRITE setPieSeries NOTIFY pieSeriesChanged FINAL)
       ...

2. パイ・シリーズの追加、削除、スライスの展開、およびクリアのための関数を作成します。

       ...
   void appendSlice();
   void removeSlice();
   void explodeSlices();
   void clearSeries();
   void fillSliceInfo();
   public Q_SLOTS:
   void onAddSlice();
   void onRemoveSlice();
   void onExplode();
   void onClearSeries();
       ...

3. パイ系列をインスタンス化し、コンストラクタで複数のスライスを追加します。

       ...
   m_pieSeries = new QPieSeries;
   
   fillSliceInfo();
   
   for (int i = 1; i < 5; ++i) {
       QPieSlice *slice = new QPieSlice;
       slice->setValue(m_sliceInfo.value.at(QRandomGenerator::global()->bounded(0, 6)));
       slice->setLabel(m_sliceInfo.label.at(QRandomGenerator::global()->bounded(0, 6)));
       slice->setLabelColor(m_sliceInfo.color.at(QRandomGenerator::global()->bounded(0, 6)));
       m_pieSeries->append(slice);
   }
   m_pieSeries->setLabelsVisible(true);
       ...

4. appendSlice 関数は、QPieSlice を作成し、そのプロパティをいくつか設定し、パイシリーズに追加します。

   ラベルの visibility をtrue に設定しても、パイシリーズに後から追加されたスライスでは機能しないことに注意してください。追加されたスライスごとに、作成時に visibility をtrue に設定する必要があります。

   QPieSlice *slice = new QPieSlice;
   slice->setValue(m_sliceInfo.value.at(QRandomGenerator::global()->bounded(0, 6)));
   slice->setLabel(m_sliceInfo.label.at(QRandomGenerator::global()->bounded(0, 6)));
   slice->setLabelColor(m_sliceInfo.color.at(QRandomGenerator::global()->bounded(0, 6)));
   slice->setLabelVisible(true);
   m_pieSeries->append(slice);

5. removeSlice 関数で、QPieSeries::remove() を呼び出します。
6. explodeSlices 関数で、すべてのスライスをループし、現在の状態に応じてQPieSlice::setExploded() をtrue またはfalse に設定します。
7. clearSeries 関数で、QPieSeries::clear （）を呼び出す。これでパイシリーズからすべてのスライスが削除されます。この関数は円グラフシリーズそのものを削除するわけではないことに注意してください。

QmlでGraphViewを宣言する

GraphsView 要素を宣言し、seriesList プロパティを C++ コードで作成した円シリーズに設定します。

GraphsView テーマをカスタマイズするには、カスタムGraphsTheme を設定する。

Item {
    id: mainView
    width: 1280
    height: 720

    GraphsView {
        id: graphsView
        anchors.fill: parent

        theme: GraphsTheme {
            id: graphsTheme
            theme: GraphsTheme.Theme.BlueSeries
            labelBorderVisible: true
            labelBackgroundVisible: true
            backgroundColor: "black"
        }
        seriesList: pieGraph.pieSeries
    }
}

プロジェクト例 @ code.qt.io