Graphiques 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 2D dans une application « Qt Widgets » à l'aide d'un QQuickWidget.

Exécution de l'exemple

Vous pouvez exécuter l’exemple à partir de :

• Qt Creator

  Ouvrez le mode « Welcome » et sélectionnez l’exemple dans « Examples ». Pour plus d’informations, consultez Qt Creator: Tutoriel : Compiler et exécuter.

• Qt Extension for Visual Studio Code

  Exécutez la commande « Qt: Open Qt examples » à partir de Command Palette, puis sélectionnez l’exemple dans la liste. Pour plus d’informations, consultez Qt Extension for Visual Studio Code: Tutoriel : Compiler et exécuter.

Vue principale

0. La classe ` PieWidget ` implémente la vue principale de l’application de démonstration. Dans la classe ` PieWidget `, instanciez les widgets utilisés pour implémenter la mise en page 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;
   ...

1. La classe ` PieGraph ` est utilisée pour gérer la logique d’ajout et de suppression de tranches, et offre d’autres fonctionnalités.

   m_pieGraph = new PieGraph;
   ...

2. Initialisez les boutons et ajoutez-les à la mise en page.

   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 Graph

La classe ` PieGraph ` implémente toute la logique de manipulation des données du graphe dans cet exemple.

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

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

1. Créez des fonctions permettant d'ajouter, de supprimer, de décomposer des tranches et d'effacer des séries de graphiques circulaires.

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

2. Instanciez une série de diagrammes circulaires et ajoutez-y plusieurs parts 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);
   ...

3. La fonction ` appendSlice ` crée une ` QPieSlice`, définit certaines de ses propriétés, puis l'ajoute à la série de diagrammes circulaires.

   Notez que même si vous avez défini la visibilité des étiquettes sur « true », cela ne s'applique pas aux parts ajoutées ultérieurement à la série de diagrammes circulaires. Vous devez définir la visibilité sur « true » lors de la création de chaque part 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);

4. Dans la fonction « removeSlice », appelez « QPieSeries::remove() ».
5. Dans la fonction ` explodeSlices `, parcourez toutes les parts et définissez ` QPieSlice::setExploded()` sur ` true ` ou ` false ` en fonction de l'état actuel.
6. Dans la fonction ` clearSeries `, appelez ` QPieSeries::clear()`. Cela supprimera toutes les parts de votre série de diagrammes circulaires. Notez que cette fonction ne supprime pas la série de diagrammes circulaires elle-même.

Initialisation de la vue GraphsView

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

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 l’ GraphsView. Initialisez ses propriétés theme et seriesList en transmettant les paramètres QGraphsTheme et QPieSeries à la fonction 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