선택된 점 구성

참고: 이 내용은 ‘위젯이 포함된 차트 갤러리’ 예제의 일부입니다.

원하는 점을 선택하여 이름, 점의 크기, 색상을 지정할 수 있는 선 그래프가 표시된 스크린샷

시연되는 기능

여기에서는 다음을 수행하는 방법을 배웁니다.

시리즈 내 데이터 포인트에 대한 클릭 선택 기능을 제공하는 방법.
특정 데이터 포인트의 개별 설정을 재정의하여 다음을 구성합니다:
- 색상
- 크기
- 라벨 표시 여부
- 라벨의 텍스트 서식

예제 실행

다음 위치에서 예제를 실행할 수 있습니다:

Qt Creator
Welcome 모드를 열고 Examples 에서 예제를 선택하십시오. 자세한 내용은 Qt Creator 의 ‘튜토리얼: 빌드 및 실행’을 참조하십시오.
Qt Extension for Visual Studio Code
Command Palette 에서 Qt: Open Qt examples 명령을 실행하고 목록에서 예제를 선택하십시오. 자세한 내용은 Qt Extension for Visual Studio Code: 튜토리얼: 빌드 및 실행을 참조하십시오.

QMainWindow의 서브클래스 생성

먼저 차트와 컨트롤을 포함할 QMainWindow 의 서브클래스를 생성합니다. 그리고 생성자 구현을 위한 기본 코드를 제공합니다:

PointConfigurationWidget::PointConfigurationWidget(QWidget *parent)
    : ContentWidget(parent)
{

선 시리즈 생성

그런 다음 QLineSeries를 생성하고, 이름을 지정하며, 데이터를 표시하도록 설정하고, 플롯할 데이터 포인트를 지정합니다.

m_series = new QLineSeries;
m_series->setPointsVisible(true);
m_series->append({QPointF(0, 7),  QPointF(2, 4),
                  QPointF(3, 5),  QPointF(7, 4),
                  QPointF(10, 5), QPointF(11, 1),
                  QPointF(13, 3), QPointF(17, 6),
                  QPointF(18, 3), QPointF(20, 2)});

점 구성 컨트롤 생성

이제 색상, 크기, 레이블 표시 여부 및 레이블 자체를 구성할 수 있는 컨트롤을 몇 개 만듭니다. 사용자가 컨트롤의 기능을 알 수 있도록 각 컨트롤에 연관된 레이블을 생성합니다.

색상과 크기의 경우, 다양한 색상 및 크기 선택 항목을 포함시킨 드롭다운 목록( QComboBox)을 사용합니다.

다음으로 마지막 두 개의 컨트롤을 만듭니다. 체크박스(Checkbox)는 선택된 점의 표시 여부를 제어합니다. 다른 컨트롤은 사용자가 점에 대한 사용자 정의 레이블을 입력할 수 있도록 하는 텍스트 상자( QLineEdit )입니다.

점(point)은 항상 선택되어 현재 설정이 표시되므로, 어떤 컨트롤에도 초기값을 설정하지 않는다는 점에 유의하십시오.

auto selectedPointIndexLabel = new QLabel(tr("Selected Point: "), this);
m_selectedPointIndexLineEdit = new QLineEdit(this);
m_selectedPointIndexLineEdit->setReadOnly(true);

auto colorLabel = new QLabel(tr("Color: "), this);
m_colorCombobox = new QComboBox(this);
QStringList colorStrings = {"red", "orange", "yellow", "green", "blue",
                            "indigo", "violet", "black"};
QStringList trColorStrings = {tr("red"), tr("orange"), tr("yellow"),
                              tr("green"), tr("blue"), tr("indigo"),
                              tr("violet"), tr("black")};
for (int i = 0; i < colorStrings.size(); i++)
    m_colorCombobox->addItem(QIcon(), trColorStrings[i], QColor(colorStrings[i]));

auto sizeLabel = new QLabel(tr("Size: "), this);
m_sizeCombobox = new QComboBox(this);
for (auto size : { 2, 3, 4, 6, 8, 10, 12, 15 })
    m_sizeCombobox->addItem(QIcon(), QString::number(size), size);

auto labelVisibilityLabel = new QLabel(tr("Label Visibility: "), this);
m_labelVisibilityCheckbox = new QCheckBox(this);

auto customLabelLabel = new QLabel(tr("Custom Label: "), this);
m_customLabelLineEdit = new QLineEdit(this);

점 선택 시 컨트롤 값 채우기

이제 컨트롤이 준비되었으므로, 선택된 점에 대한 현재 컨트롤 값을 설정하는 로직을 구현해야 합니다. 선택된 점에 대한 사용자 정의가 없는 경우, 전체 시리즈 값이 사용된다는 점에 유의하십시오. 이 경우, 시리즈가 파란색 점을 표시하도록 설정되어 있다면 색상 콤보박스에 파란색 값이 표시됩니다.

라인 시리즈를 클릭하면, 클릭된 점을 조회하고, 이전 점 선택을 해제한 다음, 클릭된 점을 선택합니다. 이렇게 하면 차트에서 선택된 점이 시각적으로 표시되며, 선택 상태를 나타내기 위해 해당 점이 더 크게 표시됩니다. 현재 선택된 점의 인덱스와 해당 점의 속성( PointConfigurations )은 나중에 사용할 수 있도록 멤버 변수에 저장됩니다.

PointConfigurations 를 조회하여 콤보박스에서 일치하는 값을 찾습니다. 그런 다음 콤보박스의 현재 인덱스를 그에 따라 설정합니다. 체크박스와 라인 에디트의 경우에도 마찬가지로, PointConfigurations 에서 값을 조회하고 해당 값과 일치하도록 컨트롤을 설정합니다.

QObject::connect(m_series, &QXYSeries::clicked, m_series, [&](const QPointF &point) {
    int index = m_series->points().indexOf(point.toPoint());
    if (index != -1) {
        m_series->deselectAllPoints();
        m_series->selectPoint(index);
        m_selectedPointIndex = index;
        m_selectedPointConfig = m_series->pointConfiguration(index);
        const QPointF selectedPoint(m_series->at(index));
        m_selectedPointIndexLineEdit->setText("(" + QString::number(selectedPoint.x()) + ", " +
                                              QString::number(selectedPoint.y()) + ")");
        PointConfigurations config = m_series->pointConfiguration(index);

        QVariant colorVar = config[QXYSeries::PointConfiguration::Color];
        QColor color = colorVar.isValid() ? colorVar.value<QColor>() : m_series->color();
        if (m_colorCombobox->findData(color) < 0)
            m_colorCombobox->addItem(color.name(), color);
        m_colorCombobox->setCurrentIndex(m_colorCombobox->findData(color));

        QVariant sizeVar = config[QXYSeries::PointConfiguration::Size];
        qreal size = sizeVar.isValid() ? sizeVar.toReal() : m_series->markerSize();
        if (m_sizeCombobox->findData(size) < 0)
            m_sizeCombobox->addItem(QString::number(size), size);
        m_sizeCombobox->setCurrentIndex(m_sizeCombobox->findData(size));

        QVariant labelVisibilityVar = config[QXYSeries::PointConfiguration::LabelVisibility];
        bool labelVisibility = labelVisibilityVar.isValid() ? labelVisibilityVar.toBool() :
                                                              m_series->pointLabelsVisible();
        m_labelVisibilityCheckbox->setChecked(labelVisibility);

        QVariant customLabelVar = config[QXYSeries::PointConfiguration::LabelFormat];
        QString customLabel = customLabelVar.isValid() ? customLabelVar.toString() : "";
        m_customLabelLineEdit->setText(customLabel);
    }
});

선택된 지점을 구성하는 로직 구현

이제 컨트롤에 현재 구성이 채워졌으므로, 이 컨트롤들이 실제로 작업을 수행하도록 해야 합니다. 각 컨트롤의 신호를, 선택된 설정에 따라 선택된 지점을 구성하는 작업을 수행할 로직에 연결합니다. 이는 해당 컨트롤과 연관된 ` QXYSeries::PointConfiguration ` 값을 ` m_selectedPointConfig `의 ` PointConfigurations ` 멤버 변수에 설정하고, ` QXYSeries::setPointConfiguration`를 호출하는 간단한 과정입니다.

QObject::connect(m_colorCombobox, &QComboBox::activated, m_series, [&](const int) {
    m_selectedPointConfig[QXYSeries::PointConfiguration::Color] = m_colorCombobox->currentData();
    m_series->setPointConfiguration(m_selectedPointIndex, m_selectedPointConfig);
});
QObject::connect(m_sizeCombobox, &QComboBox::activated, m_series, [&](const int) {
    m_selectedPointConfig[QXYSeries::PointConfiguration::Size] = m_sizeCombobox->currentData();
    m_series->setPointConfiguration(m_selectedPointIndex, m_selectedPointConfig);
});
QObject::connect(m_labelVisibilityCheckbox, &QAbstractButton::clicked, m_series, [&](const bool checked) {
    m_selectedPointConfig[QXYSeries::PointConfiguration::LabelVisibility] = checked;
    m_series->setPointConfiguration(m_selectedPointIndex, m_selectedPointConfig);
});
QObject::connect(m_customLabelLineEdit, &QLineEdit::editingFinished, m_series, [&]() {
    m_selectedPointConfig[QXYSeries::PointConfiguration::LabelFormat] = m_customLabelLineEdit->text();
    m_series->setPointConfiguration(m_selectedPointIndex, m_selectedPointConfig);
});

차트 생성 및 컨트롤 배치

마지막으로 차트와 뷰를 생성하고, 차트에 시리즈를 추가하며, 창의 레이아웃을 구성합니다. 이 과정에서 차트가 처음 그려질 때 신호를 수신하기 위해 geometryChanged 신호에 연결합니다. 이는 처음 선택된 점에 대한 올바른 값을 얻을 수 있도록 하기 위함입니다. 이 작업을 더 일찍 수행하면 데이터 포인트 값이 잘못 표시됩니다. 이 연결은 신호가 처음 한 번 발동된 후 해제됩니다.

auto chart = new QChart;
chart->addSeries(m_series);
chart->createDefaultAxes();
chart->setTitle("Select points with mouse click");
chart->layout()->setContentsMargins(0, 0, 0, 0);
chart->legend()->setVisible(false);

m_selectInitialPointConnection = QObject::connect(chart, &QChart::geometryChanged, chart, [&]() {
    m_series->selectPoint(4);
    m_series->clicked(m_series->at(m_series->selectedPoints()[0]));
    disconnect(m_selectInitialPointConnection);
});

auto chartView = new QChartView(chart, this);
chartView->setRenderHint(QPainter::Antialiasing);

auto controlWidget = new QWidget(this);
auto controlLayout = new QGridLayout(controlWidget);
controlLayout->setColumnStretch(1, 1);

controlLayout->addWidget(selectedPointIndexLabel, 0, 0);
controlLayout->addWidget(m_selectedPointIndexLineEdit, 0, 1);

controlLayout->addWidget(colorLabel, 1, 0);
controlLayout->addWidget(m_colorCombobox, 1, 1);

controlLayout->addWidget(sizeLabel, 2, 0);
controlLayout->addWidget(m_sizeCombobox, 2, 1);

controlLayout->addWidget(labelVisibilityLabel, 3, 0);
controlLayout->addWidget(m_labelVisibilityCheckbox, 3, 1, 1, 2);

controlLayout->addWidget(customLabelLabel, 4, 0);
controlLayout->addWidget(m_customLabelLineEdit, 4, 1);

auto mainLayout = new QHBoxLayout(this);
mainLayout->addWidget(chartView);
mainLayout->setStretch(0, 1);
mainLayout->addWidget(controlWidget);

이제 개별 차트 데이터 포인트를 사용자 정의하는 방법을 보여주는, 완벽하게 작동하는 애플리케이션이 완성되었습니다.

© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.