Gráficos 2D en Qt Widgets

Graphs 2D sólo es compatible con aplicaciones Qt Quick. Este ejemplo muestra cómo mostrar un simple gráfico de tarta 2D en una aplicación Qt Widgets utilizando un QQuickWidget.

Ejecución del ejemplo

Para ejecutar el ejemplo desde Qt Creator, abra el modo Welcome y seleccione el ejemplo de Examples. Para más información, consulte Qt Creator: Tutorial: Construir y ejecutar.

Vista principal

1. La clase PieWidget implementa la vista principal de la aplicación demo. En la clase PieWidget, instancie los widgets utilizados para implementar el diseño de la aplicación y los elementos de la interfaz de usuario.

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

2. La clase PieGraph se utiliza para manejar la lógica para añadir y eliminar slices, y tiene otras funcionalidades.

   m_pieGraph = new PieGraph;
   ...

3. Inicializa los botones y añádelos al layout.

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

Manipulación de datos gráficos

La clase PieGraph implementa toda la lógica para manipular los datos de Graph en este ejemplo.

1. En la clase PieGraph, declara una propiedad pieSeries.

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

2. Cree funciones para agregar, quitar, explotar rebanadas y borrar series circulares.

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

3. Instanciar una serie de tarta y añadir varias rebanadas en su constructor.

   ...
   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 función appendSlice crea un QPieSlice, establece algunas de sus propiedades y luego lo añade a la serie de tarta.

   Observe que aunque haya establecido la visibilidad de las etiquetas a true, esto no funciona en las rebanadas añadidas posteriormente a la serie de tarta. Es necesario establecer la visibilidad a true en la creación de cada rebanada añadida.

   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. En la función removeSlice, llame a QPieSeries::remove().
6. En la función explodeSlices, recorra todas las porciones y establezca QPieSlice::setExploded() en true o false dependiendo del estado actual.
7. En la función clearSeries, llame a QPieSeries::clear(). Esto borrará todas las porciones de la serie. Tenga en cuenta que esta función no borra las series de tarta.

Inicialización de GraphsView

Para personalizar el tema GraphsView, cree un tema personalizado QGraphsTheme.

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

Utilice QQuickWidget::loadFromModule() para cargar GraphsView. Inicialice sus propiedades theme y seriesList pasando QGraphsTheme y QPieSeries a 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");

Proyecto de ejemplo @ code.qt.io