二维图形Qt Widgets

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

运行示例

运行示例 Qt Creator，打开Welcome 模式，然后从Examples 中选择示例。有关详细信息，请参阅Qt Creator: 教程：构建并运行。

主视图

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

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

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

   m_pieGraph = new PieGraph;
   ...

3. 初始化按钮并将其添加到布局中。

   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 类实现了本示例中操作图形数据的所有逻辑。

1. 在PieGraph 类中，声明pieSeries 属性。

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

2. 创建用于添加、删除、爆炸切片和清除饼系列的函数。

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

3. 在构造函数中实例化一个饼系列并添加几个切片。

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

5. 在removeSlice 函数中，调用QPieSeries::remove()。
6. 在explodeSlices 函数中，循环浏览所有切片，并根据当前状态将QPieSlice::setExploded() 设置为true 或false 。
7. 在clearSeries 函数中，调用QPieSeries::clear() 。这将删除饼系列中的所有切片。请注意，此函数不会删除饼系列本身。

初始化图形视图

要自定义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