[QT GUI] Qt4 - GUI와 QGraphics 클래스로 막대 그래프 그리기

Qt4 GUI와 QGraphics 클래스로 막대 그래프 그리기

• 간단한 막대 그래프 구현
• 그래프 개수 / 높이 / 이름 할당, 수정된 코드

---

간단한 막대 그래프 구현, 수정된 코드

QT 프레임워크에서 제공하는 QGraphicsScene, QGraphicsRectItem 등을 활용해서 간단한 막대 그래프를 구현하는 예제를 진행해보도록 하겠습니다. QT Widget 어플리케이션 프로젝트에서 기본적으로 생성되는 MainWindow 클래스에 구현하도록 하겠습니다. Form에는 QT 위젯인 graphicsView 오브젝트를 하나 생성해놓았습니다.

 

    // 막대 그래프를 표시할 graphicsView 오브젝트에 연결.
    scene = new QGraphicsScene(this);
    ui->graphicsView->setScene(scene);

    // 막대 그래프 아이템 생성.
    QGraphicsRectItem *bar1 = new QGraphicsRectItem(0, 0, 50, 100);
    QGraphicsRectItem *bar2 = new QGraphicsRectItem(60, 0, 50, 150);
    QGraphicsRectItem *bar3 = new QGraphicsRectItem(120, 0, 50, 120);

    // 생성한 막대 그래프 아이템 삽입.
    scene->addItem(bar1);
    scene->addItem(bar2);
    scene->addItem(bar3);

 

 

1. QGraphicsScene 클래스를 선언하고 객체를 생성하여 이를 graphicsView 오브젝트에 Set 해주었습니다.

 

2. 막대 그래프 3개를  생성하여  QGraphicsRectItem 객체를 통해 Rect를 할당해주었습니다.

 

3. 생성한 Rect 객체를 QGraphicsScene에서 제공하는 addItem() 메서드를 통해 각 아이템에 Rect를 추가했습니다.

 

아래는 작성한 코드에 대한 결과입니다.

 

 

---

 

그래프 개수 /  높이 / 이름 할당

조금 더 코드를 간결하게 만들면서 막대 그래프의  개수, 높이 그리고 각 그래프에 텍스트를 할당할 수 있도록 변수를 추가하였습니다. 아래는 수정된 코드입니다.

 

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    // QGraphicsScene을 생성하여 QGraphicsView에 삽입.
    scene = new QGraphicsScene(this);
    ui->graphicsView->setScene(scene);

    // 막대 그래프 개수 / 높이 / 텍스트 설정.
    int barCount = 3;
    int barHeights[] = {100, 150, 120};
    const char* barNames[] = {"a", "b", "c"};

    // 아이템 추가할 List 생성.
    QList<QGraphicsRectItem *> bars;
    QList<QGraphicsTextItem *> itemNames;

    // for문을 통해 막대 그래프 높이 값의 개수만큼의 그래프 생성.
    for (int i = 0; i < barCount; ++i) {

        // 막대 그래프 Rect 설정.
        QGraphicsRectItem *bar = new QGraphicsRectItem(i * 60, -barHeights[i], 50, barHeights[i]);

        // 막대 그래프 텍스트 설정.
        QGraphicsTextItem *textItem = new QGraphicsTextItem(barNames[i]);

        // 막대 그래프 Pos 설정.
        textItem->setPos(i * 60 + 20, 10);

        // 미리 선언한 List에 append.
        bars.append(bar);
        itemNames.append(textItem);

        // 막대 그래프 속성 add.
        scene->addItem(bar);

        // 막대 그래프 텍스트 add.
        scene->addItem(textItem);
    }
}

 

 

1. barCount라는 변수를 추가하고 반복문을 통해 GraphRectItem을 새롭게 할당해주는 구조로 좀 더 쉽게 그래프의 개수를 조절할 수 있습니다.

 

2. 막대 그래프의 높이는 반복문 밖에 배열로 선언해주었습니다. 아이템을 new하면서 이를 참조해서 막대 그래프의 높이가 할당되도록 하였습니다.

 

3. 막대 그래프의 제목 혹은 그 외의 다른 용도로 사용될 수 있는 텍스트를 char형 배열로 선언해주었습니다. 이 역시 반복문 내부에서 해당 배열을 참조하여 텍스트를 설정하고, Pos를 설정하도록 로직을 수정하였습니다.

 

아래는 수정한 코드에 대한 결과입니다.