選択したポイントの構成

注：これは 「ウィジェット付きチャートギャラリー」のサンプルの一部です。

目的の点を指定し、名前、点の大きさ、色を設定できる折れ線グラフのスクリーンショット

紹介されている機能

ここでは、以下の方法を学びます：

系列内のポイントをクリックで選択できるようにする。
特定のデータポイントの個別の設定を上書きし、以下を設定する：
- 色
- サイズ
- ラベルの表示状態
- ラベルのテキスト形式

例の動作確認

以下の手順でサンプルを実行できます:

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 を使用し、さまざまな色やサイズの選択肢を設定します。

次に、最後の 2 つのコントロールを作成します。チェックボックスは、選択されたポイントの表示/非表示を切り替えます。もう 1 つのコントロールはQLineEdit で、ユーザーがポイントにカスタムラベルを指定できるようにします。

なお、どのコントロールにも初期値は設定しません。これは、ポイントが常に選択され、その時点の設定が表示されるためです。

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.