Diagramme 2D in Qt Widgets

Graphs 2D unterstützt nur Qt Quick Anwendungen. Dieses Beispiel zeigt, wie man ein einfaches 2D-Tortendiagramm in einer Qt Widgets Anwendung unter Verwendung einer QQuickWidget anzeigt.

Ausführen des Beispiels

Um das Beispiel auszuführen Qt Creatorauszuführen, öffnen Sie den Modus Welcome und wählen Sie das Beispiel aus Examples. Weitere Informationen finden Sie unter Qt Creator: Tutorial: Erstellen und Ausführen.

Hauptansicht

1. Die Klasse PieWidget implementiert die Hauptansicht der Demoanwendung. In der Klasse PieWidget instanziieren Sie die Widgets, die zur Implementierung des Anwendungslayouts und der UI-Elemente verwendet werden.

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

2. Die Klasse PieGraph wird verwendet, um die Logik für das Hinzufügen und Entfernen von Slices zu handhaben, und verfügt über weitere Funktionen.

   m_pieGraph = new PieGraph;
       ...

3. Für QQuickWidget setzen Sie source und resizeMode, und setzen Sie die Eigenschaft context. Mit der Eigenschaft Context können Daten für QML-Komponenten, die von der QML-Engine instanziiert werden, bereitgestellt werden.

   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. Initialisieren Sie Schaltflächen und fügen Sie sie dem Layout hinzu.

   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);
       ...

Manipulation von Graphdaten

Die Klasse PieGraph implementiert die gesamte Logik zur Manipulation von Graphdaten in diesem Beispiel.

1. Deklarieren Sie in der Klasse PieGraph eine Eigenschaft pieSeries.

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

2. Erstellen Sie Funktionen zum Hinzufügen, Entfernen, Explodieren von Slices und Löschen von Tortenreihen.

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

3. Instanziieren Sie eine Tortenreihe und fügen Sie mehrere Scheiben in Ihrem Konstruktor hinzu.

       ...
   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. Die Funktion appendSlice erstellt eine QPieSlice, legt einige ihrer Eigenschaften fest und fügt sie dann an die Kuchenserie an.

   Beachten Sie, dass, auch wenn Sie die Sichtbarkeit der Beschriftungen auf true gesetzt haben, dies nicht für die später zur Kuchenserie hinzugefügten Slices gilt. Sie müssen die Sichtbarkeit bei der Erstellung für jedes hinzugefügte Slices auf true setzen.

   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. Rufen Sie in der Funktion removeSlice QPieSeries::remove () auf.
6. Führen Sie in der Funktion explodeSlices eine Schleife durch alle Slices und setzen Sie QPieSlice::setExploded() auf true oder false, je nach aktuellem Status.
7. Rufen Sie in der Funktion clearSeries QPieSeries::clear () auf. Dadurch werden alle Slices aus Ihrer Tortenreihe gelöscht. Beachten Sie, dass diese Funktion die Tortenreihe selbst nicht löscht.

Deklarieren einer GraphView in Qml

Deklarieren Sie ein GraphsView Element und setzen Sie die seriesList Eigenschaft auf eine in C++ Code erstellte Tortenreihe.

Um das Thema GraphsView anzupassen, legen Sie ein benutzerdefiniertes GraphsTheme fest.

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
    }
}

Beispielprojekt @ code.qt.io