Qt 데이터 시각화 도구 QCustomPlot 사용하기(2)

Qt 데이터 시각화 도구 QCustomPlot 사용하기(1)를 안보셨다면 먼저 보시는 것을 추천드립니다.

Qt 데이터 시각화 도구 QCustomPlot 사용하기(1)

이제 그래프를 간단히 꾸며봤으니 유용해 보이는 기능을 소개하겠습니다.

• 그래프에 범례 추가하기

한글이나 엑셀에 차트를 만들면 아래 그림의 우측과 같이 범례가 나옵니다. 이런 범례를 graph에도 추가할 수 있습니다.

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

    ...
    ui->plot->legend->setVisible(true);

    ui->plot->replot();
}

기본적으로 우측 상단에 범례를 볼 수 있습니다. 기본적으로 그래프의 이름은 Graph에 생성 번호입니다.

여기서 그래프에 이름을 부여하기 위해서는 setName을 해주면 됩니다.

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

    ...

    ui->plot->graph(0)->setName("linear function");
    ui->plot->legend->setVisible(true);

    ui->plot->replot();
}

• 데이터 상세보기

그래프를 클릭했을 때 좌표에 대한 설명을 표시해줄 수 있습니다.

 

먼저 QCPItemText를 이용해 정보를 띄워줄 텍스트 상자를 만들어줍니다.

 

여기서 setLayer를 "overlay"로 해야 가장 위에 띄워집니다.

 

그리고 position을 설정하는 방법은 setType을 통해 QCPItemPosition::ptAxisRectRatio로 설정한다면 그래프 영역 안에서 0~1의 값으로 결정이 됩니다.

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ...
    QCPItemText* itemText = new QCPItemText(ui->plot);
    itemText->setLayer("overlay");
    itemText->setPositionAlignment(Qt::AlignVCenter|Qt::AlignHCenter);
    itemText->position->setType(QCPItemPosition::ptAxisRectRatio);
    itemText->position->setCoords(0.5,0.1);
    itemText->setText("Point Information\n");
    itemText->setPadding(QMargins(5,5,5,5));
    itemText->setPen(QPen(Qt::black)); // show black border around text
    itemText->setBrush(QColor(255,255,255));

    ui->plot->replot();
}

현재 0.5, 0.1로 설정했을 때 x축의 중간 y축의 상단쯤에 위치하고 있습니다.

1, 1로 설정했을 경우 x축의 오른쪽 끝 y축의 가장 아래에 위치합니다.

Type을 주지 않고 하면 좌표 값으로 위치가 결정됩니다.

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ...
    QCPItemText* itemText = new QCPItemText(ui->plot);
    itemText->setLayer("overlay");
    itemText->setPositionAlignment(Qt::AlignVCenter|Qt::AlignHCenter);
//  itemText->position->setType(QCPItemPosition::ptAxisRectRatio);
    itemText->position->setCoords(1,1);
    itemText->setText("Point Information\n");
    itemText->setPadding(QMargins(5,5,5,5));
    itemText->setPen(QPen(Qt::black)); // show black border around text
    itemText->setBrush(QColor(255,255,255));

    ui->plot->replot();
}

설명은 QCPItemPosition::ptAxisRectRatio를 설정한 상태로 하겠습니다.

 

다음으로 그래프를 클릭했을 때 Itemtext의 텍스트가 변경되어야 하므로 Graph를 클릭했을 때 발생하는 시그널인 plottableClick(QCPAbstractPlottable*,int,QMouseEvent*)를 사용하겠습니다. 

// header
class MainWindow : public QMainWindow
{
    Q_OBJECT
    ...
private:
    ...
    QCPItemText* m_ItemText;

public slots:
    void Slot_clickGraph(QCPAbstractPlottable*, int, QMouseEvent*);
};

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

    QCPItemText* itemText = new QCPItemText(ui->plot);
    itemText->setLayer("overlay");
    itemText->setPositionAlignment(Qt::AlignVCenter|Qt::AlignHCenter);
    itemText->position->setType(QCPItemPosition::ptAxisRectRatio);
    itemText->position->setCoords(0.5,0.1);
    itemText->setText("Point Information\n");
    itemText->setPadding(QMargins(5,5,5,5));
    itemText->setPen(QPen(Qt::black)); // show black border around text
    itemText->setBrush(QColor(255,255,255));

    m_ItemText = itemText;
    connect(ui->plot, SIGNAL(plottableClick(QCPAbstractPlottable*,
    	int,QMouseEvent*)), this, SLOT(Slot_clickGraph(QCPAbstractPlottable*,int, QMouseEvent*)));

    ui->plot->replot();
}

void MainWindow::Slot_clickGraph(QCPAbstractPlottable* potItem, int num, QMouseEvent* event)
{
    double dX = potItem->interface1D()->dataMainKey(num);
    double dY = potItem->interface1D()->dataMainValue(num);

    m_ItemText->setText(QString("Point Information\nX = %1\nY = %2")
    		.arg(QString::number(dX)).arg(QString::number(dY)));
    ui->plot->replot();
}

처음에 실행하면 똑같이 나오고 그래프를 클릭했을 때 그 좌표에 대한 정보를 출력해줍니다.

 

github.com/psy1064/qCustomPlot-example

psy1064/qCustomPlot-example