[Qt] QCustomPlot

QCustomPlot은 데이터 시각화를 위해 사용되는 Qt C++ widget이다.

라이브러리 형태로 구현이 되어 있고, 공식 홈페이지에 문서화가 잘 되어 있어서 거길 참고하는게 좋다. 그럼에도 내가 이걸 작성하는 이유는 내가 필요한 부분을 뽑아서 써야하는 것도 있고, 코드 자체가 잘 이해가 되지 않아서 예제에 사용된 함수들이 어떤 역할을 하는지 정리하기 위함이다.

그래서 QCustomPlot을 사용하면 좋은 점은? 데이터를 그래프나 차트 등등 다양한 모양으로 시각화를 할 수 있다.

https://www.qcustomplot.com/index.php/introduction

Qt Plotting Widget QCustomPlot - Introduction

위 홈페이지에 설명과 예제, 문서화가 잘 되어 있으니 참고하면 좋다!

1. Set up

위 홈페이지의 Tutorials > Seeting up에 가면 잘 나와 있다.

https://www.qcustomplot.com/index.php/download

Qt Plotting Widget QCustomPlot - Download

위 링크에서 QCustomPlot.tar.gz을 다운받고, 압축을 풀어 놓는다. 경로는 아무데나 상관이 없지만 홈디렉토리에 있는게 찾기는 좋은 것 같다. 아 예제도 위 압축 파일 안에 examples라고 디렉토리 안에 있다.

라이브러리는 받아서 풀어 놓고, Qt creator를 켜서 일반적인 위젯 어플리케이션을 하나 생성 해 준다.

그리고 Sources와 Headers에 아까 압축을 풀어준 곳에 있는 qcustomplot.cpp와 qcustomplot.h를 새로 추가해 준다. Add New를 이용해서 추가를 했다면 .pro 파일에 알아서 추가가 되는데, 만약 추가가 안된 경우에는

이렇게 추가를 해준다. 그리고 맨 위에

widgets 뒤에다가 printsupport도 추가! 그러면 이제 그래프를 넣을 QCustomPlot 위젯을 생성해 주어야 한다. ui로 가자

Containers에 있는 Widget을 하나 생성해준다. 그 위젯에서 우클릭 하면 Promote to ... 라고 나오는데 얘를 클릭한다

그리고 요렇게 Promoted class name을 QCustomPlot으로 해서 Add 해준다.

그럼 이렇게 위젯이 QCustomPlot으로 클래스가 바뀐 것을 볼 수 있다. 지금은 아무것도 없지만, 이제 코드에서 그래프를 생성해주면 이 위젯에 그래프가 생성이 된다.

2. How to use

ui에 버튼 만들고 사용 하던것과 동일하게 위에서 위젯에 정해준 이름 대로 ui->customPlot->blah.. 이렇게 사용하면 된다.

제일 기본적으로, 그래프를 생성해주는 함수는 아래와 같다.

ui->customPlot->addGraph();

그리고 이 생성된 그래프에 데이터 점? 포인트?를 할당해줄 수 있다.

ui->customPlot->graph(0)->setData(...)

umm... graph(0)이 첫번째 생성된 그래프를 뜻하는 것 같다. QCustomPlot에서는 x축과 y축이라는 용어를 사용하지 않고, 왼쪽 세로 축을 key축, 오른쪽 하단에 있는 축을 value축으로 사용한다.

xAxis: 아래 축

yAxis: 왼쪽 축

xAxis2: 상단 축

yAxis2: 오른쪽 축

이렇게 네가지로 구분지어서 사용하고, 우리가 흔히 x축으로 사용하는 것이 xAxis, y축으로 사용하는 것이 yAxis이다.

// generate some data:
QVector<double> x(101), y(101); // initialize with entries 0..100
for (int i=0; i<101; ++i)
{
  x[i] = i/50.0 - 1; // x goes from -1 to 1
  y[i] = x[i]*x[i]; // let's plot a quadratic function
}
// create graph and assign data to it:
customPlot->addGraph();
customPlot->graph(0)->setData(x, y);
// give the axes some labels:
customPlot->xAxis->setLabel("x");
customPlot->yAxis->setLabel("y");
// set axes ranges, so we see all data:
customPlot->xAxis->setRange(-1, 1);
customPlot->yAxis->setRange(0, 1);
customPlot->replot();

가장 간단한 샘플 코드이다. 이걸 보면 아주 간단한 개념에 대해서는 제대로 알 수 있다.

여기서는 데이터를 x와 y로 제공하고, 이를 벡터로 선언하였다. 위에 for문은 데이터를 미리 세팅해놓은 것이다.

먼저 customPlot->addGraph()로 그래프를 하나 생성한 후에, setData(x, y)를 이용해서 위에서 만들어준 데이터를 넣어준다.

그 다음 있는 customPlot->xAxis->setLabel("x")는 아래축(xAxis)의 레이블을 x로 정해준 것이다. y는 왼쪽 축으로.

다음 customPlot->xAxis->setRange(-1,1)은 x축의 범위를 -1에서 1로 정해준거다. 다음은 y축을 0에서 1의 범위로 정해준 것이다.

마지막으로 customPlot->replot()을 이용하면 위와 같은 변경 사항을 화면에 출력 해준다. 위 코드의 출력 결과는

다음과 같다. 레이블을 정해준 대로 x, y가 들어 갔고 범위도 적어준 대로 들어 갔다.

여기까지가 제일 기본 코드 학습이었고, 내가 하고싶은건 key-value 형태에서 실시간으로 바뀌는 value에 대한 막대 그래프를 그리는 것이다. 이건 어떻게 해야할까?