Graphes 2D dans Qt Widgets

Les graphiques 2D ne prennent en charge que les applications Qt Quick. Cet exemple montre comment afficher un simple graphique circulaire en 2D dans une application Qt Widgets à l'aide d'une application QQuickWidget.

Exécution de l'exemple

Pour exécuter l'exemple à partir de Qt CreatorOuvrez le mode Welcome et sélectionnez l'exemple à partir de Examples. Pour plus d'informations, voir Qt Creator: Tutoriel : Construire et exécuter.

Vue principale

1. La classe PieWidget implémente la vue principale de l'application de démonstration. Dans la classe PieWidget, instanciez les widgets utilisés pour mettre en œuvre la présentation de l'application et les éléments de l'interface utilisateur.

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

2. La classe PieGraph est utilisée pour gérer la logique d'ajout et de suppression des tranches, ainsi que d'autres fonctionnalités.

   m_pieGraph = new PieGraph;
   ...

3. Initialiser les boutons et les ajouter à la présentation.

   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 des données du graphique

La classe PieGraph met en œuvre toute la logique de manipulation des données du graphique dans cet exemple.

1. Dans la classe PieGraph, déclarez une propriété pieSeries.

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

2. Créez des fonctions permettant d'ajouter, de supprimer, d'éclater des tranches et d'effacer des séries de camemberts.

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

3. Instanciez une série de camemberts et ajoutez plusieurs tranches dans votre constructeur.

   ...
   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. La fonction appendSlice crée une tranche QPieSlice, définit certaines de ses propriétés et l'ajoute ensuite à la série de camemberts.

   Remarquez que même si vous avez défini la visibilité des étiquettes sur true, cela ne fonctionne pas sur les tranches ajoutées ultérieurement à la série de camemberts. Vous devez définir la visibilité sur true lors de la création de chaque tranche ajoutée.

   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. Dans la fonction removeSlice, appelez QPieSeries::remove().
6. Dans la fonction explodeSlices, parcourez en boucle toutes les tranches et attribuez à QPieSlice::setExploded() la valeur true ou false en fonction de l'état actuel.
7. Dans la fonction clearSeries, appelez QPieSeries::clear(). Cela supprimera toutes les tranches de votre série de camemberts. Notez que cette fonction ne supprime pas une série de camemberts elle-même.

Initialisation du GraphsView

Pour personnaliser le thème GraphsView, créez un fichier personnalisé QGraphsTheme.

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

Utilisez QQuickWidget::loadFromModule() pour charger GraphsView. Initialisez ses propriétés theme et seriesList en passant QGraphsTheme et QPieSeries à QQuickWidget::setInitialProperties().

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

Exemple de projet @ code.qt.io