在基于小部件的应用程序中使用Qt Widgets

Graphs 2D仅支持Qt Quick 应用程序。本示例演示了如何在Qt Widgets 应用程序中，使用QQuickWidget 显示一个简单的2D饼图。

运行示例

您可以通过以下方式运行该示例：

• Qt Creator

  打开Welcome 模式，并从Examples 中选择该示例。有关更多信息，请参阅Qt Creator ：教程：构建和运行。

• Qt Extension for Visual Studio Code

  在Command Palette 中运行Qt: Open Qt examples 命令，并从列表中选择该示例。有关更多信息，请参阅Qt Extension for Visual Studio Code ：教程：构建和运行。

主视图

0. PieWidget 类实现了演示应用程序的主视图。在PieWidget 类中，实例化用于实现应用程序布局和UI元素的控件。

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

1. PieGraph 类用于处理切片添加和移除的逻辑，并具备其他功能。

   m_pieGraph = new PieGraph;
   ...

2. 初始化按钮并将它们添加到布局中。

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

操作图数据

PieGraph 类实现了本示例中所有用于操作 Graph 数据的逻辑。

0. 在PieGraph 类中，声明一个pieSeries 属性。

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

1. 编写用于添加、删除、展开扇区以及清除饼图系列的功能函数。

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

2. 在构造函数中实例化一个饼图系列，并添加几个扇区。

   ...
   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. appendSlice 函数会创建一个QPieSlice ，设置其部分属性，然后将其追加到饼图系列中。

   请注意，即使您已将标签的可见性设置为true ，此设置对后续添加到饼图系列中的扇区并不生效。您需要为每个添加的扇区在创建时将其可见性设置为true 。

   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. 在 `removeSlice ` 函数中，调用 `QPieSeries::remove()`。
5. 在explodeSlices 函数中，遍历所有扇区，并根据当前状态将QPieSlice::setExploded() 设置为true 或false 。
6. 在clearSeries 函数中，调用QPieSeries::clear()。这将删除饼图系列中的所有扇区。请注意，此函数不会删除饼图系列本身。

初始化 GraphsView

要自定义GraphsView 主题，请创建一个自定义的QGraphsTheme 。

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

使用QQuickWidget::loadFromModule() 加载GraphsView 。通过将QGraphsTheme 和QPieSeries 传递给QQuickWidget::setInitialProperties()，初始化其theme 和seriesList 属性。

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

示例项目 @ code.qt.io