在基于 Widget 的应用程序中使用 2D 图形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. 对于QQuickWidget ，设置source 和resizeMode ，并设置context 属性。Context 属性允许向 QML 引擎实例化的 QML 组件公开数据。

   QQmlContext *context = m_quickWidget->engine()->rootContext();
   context->setContextProperty("pieGraph", m_pieGraph);
   m_quickWidget->setSource(QUrl("qrc:/qml/quickwidgetgraphs/main.qml"));
   m_quickWidget->setResizeMode(QQuickWidget::SizeRootObjectToView);
4. 初始化按钮并将它们添加到布局中。

   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. 创建用于添加、删除、爆炸切片和清除饼系列的函数。

       ...
   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() 。这将删除饼系列中的所有切片。请注意，此函数不会删除饼状序列本身。

在 Qml 中声明 GraphView

声明一个GraphsView 元素，并将seriesList 属性设置为用 C++ 代码创建的饼状系列。

要自定义GraphsView 主题，请设置自定义GraphsTheme 。

Item {
    id: mainView
    width: 1280
    height: 720

    GraphsView {
        id: graphsView
        anchors.fill: parent

        theme: GraphsTheme {
            id: graphsTheme
            theme: GraphsTheme.Theme.BlueSeries
            labelBorderVisible: true
            labelBackgroundVisible: true
            backgroundColor: "black"
        }
        seriesList: pieGraph.pieSeries
    }
}

示例项目 @ code.qt.io