위젯 기반 애플리케이션에서 2D 그래프 활용 Qt Widgets

Graphs 2D는 Qt Quick 애플리케이션만 지원합니다. 이 예제는 QQuickWidget 를 사용하여 Qt Widgets 애플리케이션에서 간단한 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 클래스는 이 예제에서 그래프 데이터를 조작하기 위한 모든 로직을 구현합니다.

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