2D-Diagramme in Qt Widgets

2D-Diagramme unterstützen ausschließlich „ Qt Quick “-Anwendungen. Dieses Beispiel zeigt, wie man ein einfaches 2D-Kreisdiagramm in einer „ Qt Widgets “-Anwendung mithilfe von „ QQuickWidget “ anzeigt.

Ausführen des Beispiels

Sie können das Beispiel wie folgt ausführen:

• Qt Creator

  Öffnen Sie den Modus „ Welcome “ und wählen Sie das Beispiel unter „ Examples “ aus. Weitere Informationen finden Sie unter Qt Creator: Tutorial: Erstellen und Ausführen.

• Qt Extension for Visual Studio Code

  Führen Sie den Befehl „ Qt: Open Qt examples “ über „ Command Palette “ aus und wählen Sie das Beispiel aus der Liste aus. Weitere Informationen finden Sie unter Qt Extension for Visual Studio Code: Tutorial: Erstellen und Ausführen.

Hauptansicht

0. Die Klasse „ PieWidget “ implementiert die Hauptansicht der Demo-Anwendung. 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;
   ...

1. Die Klasse „ PieGraph “ dient zur Abwicklung der Logik für das Hinzufügen und Entfernen von Slices und bietet weitere Funktionen.

   m_pieGraph = new PieGraph;
   ...

2. Initialisieren Sie die 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);
   }

Bearbeitung von Diagrammdaten

Die Klasse „ PieGraph “ implementiert in diesem Beispiel die gesamte Logik zur Bearbeitung von Graph-Daten.

0. Deklarieren Sie in der Klasse „ PieGraph “ eine Eigenschaft „ pieSeries “.

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

1. Erstellen Sie Funktionen zum Hinzufügen, Entfernen, Aufschlüsseln von Segmenten und Löschen von Kreisdiagramm-Reihen.

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

2. Instanziieren Sie eine Kreisdiagrammreihe und fügen Sie in Ihrem Konstruktor mehrere Segmente 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);
   ...

3. Die Funktion „ appendSlice “ erstellt eine „ QPieSlice “, legt einige ihrer Eigenschaften fest und fügt sie anschließend der Kreisdiagrammreihe hinzu.

   Beachten Sie, dass selbst wenn Sie die Sichtbarkeit der Beschriftungen auf „ true “ gesetzt haben, dies bei später zur Kreisdiagrammreihe hinzugefügten Segmenten nicht funktioniert. Sie müssen die Sichtbarkeit bei der Erstellung für jedes hinzugefügte Segment 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);

4. Rufen Sie in der Funktion „ removeSlice “ die Methode „ QPieSeries::remove()“ auf.
5. Durchlaufen Sie in der Funktion ` explodeSlices ` alle Segmente und setzen Sie ` QPieSlice::setExploded()` je nach aktuellem Status auf ` true ` oder ` false `.
6. Rufen Sie in der Funktion „ clearSeries “ die Funktion „ QPieSeries::clear()“ auf. Dadurch werden alle Segmente aus Ihrer Kreisdiagrammreihe gelöscht. Beachten Sie, dass diese Funktion die Kreisdiagrammreihe selbst nicht löscht.

Initialisierung der „GraphsView“

Um das „ GraphsView “-Theme anzupassen, erstellen Sie eine benutzerdefinierte „ QGraphsTheme “.

auto theme = new QGraphsTheme(m_quickWidget);
theme->setTheme(QGraphsTheme::Theme::BlueSeries);
theme->setLabelBorderVisible(true);
theme->setLabelBackgroundVisible(true);
theme->setBackgroundColor(Qt::black);

Verwenden Sie „ QQuickWidget::loadFromModule()“, um das „ GraphsView “ zu laden. Initialisieren Sie dessen Eigenschaften „ theme “ und „ seriesList “, indem Sie „ QGraphsTheme “ und „ QPieSeries “ an „ QQuickWidget::setInitialProperties()“ übergeben.

m_quickWidget->setResizeMode(QQuickWidget::SizeRootObjectToView);
m_quickWidget->resize(1280, 720);
m_quickWidget->setInitialProperties({
    {"theme", QVariant::fromValue(theme) },
    {"seriesList", QVariant::fromValue(m_pieGraph->pieSeries()) }
});
m_quickWidget->loadFromModule("QtGraphs", "GraphsView");

Beispielprojekt @ code.qt.io