Configuration des points sélectionnés

Remarque : ceci fait partie de l'exemple « Galerie de graphiques avec widgets ».

Capture d'écran présentant un graphique linéaire sur lequel il est possible de sélectionner un point donné et de le configurer en lui attribuant un nom, une taille et une couleur

Fonctionnalités présentées

Vous apprendrez ici à :

Permettre la sélection par clic de points dans une série.
Remplacer la configuration individuelle de points spécifiques, en configurant :
- la couleur
- Taille
- La visibilité de l'étiquette
- Format du texte de l'étiquette

Exécution de l'exemple

Vous pouvez exécuter l'exemple à partir de :

Qt Creator
Ouvrez le mode « Welcome » et sélectionnez l'exemple dans « Examples ». Pour plus d'informations, consultez Qt Creator: Tutoriel : Compiler et exécuter.
Qt Extension for Visual Studio Code
Exécutez la commande « Qt: Open Qt examples » à partir de la page Command Palette, puis sélectionnez l'exemple dans la liste. Pour plus d'informations, consultez Qt Extension for Visual Studio Code: Tutoriel : Compiler et exécuter.

Sous-classe de QMainWindow

Nous commençons par créer une sous-classe de QMainWindow qui contiendra le graphique et les contrôles. Nous fournissons également le code standard pour l’implémentation du constructeur :

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

Créer une série de lignes

Ensuite, nous créons une QLineSeries, en lui attribuant un nom, en rendant les points visibles et en lui fournissant quelques points à tracer.

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)});

Créer les contrôles de configuration des points

Nous créons maintenant quelques contrôles permettant de configurer la couleur, la taille, la visibilité de l’étiquette et l’étiquette elle-même. Nous créons une étiquette associée à chaque contrôle afin que l’utilisateur sache à quoi sert ce dernier.

Pour la couleur et la taille, nous utilisons un QComboBox, que nous remplissons avec un choix varié de couleurs et de tailles.

Ensuite, nous créons les deux derniers contrôles. Une case à cocher contrôle la visibilité du point sélectionné. L'autre contrôle est une liste déroulante ( QLineEdit ) permettant à l'utilisateur de saisir une étiquette personnalisée pour le point.

Notez que nous ne définissons aucune valeur initiale pour ces contrôles, car un point sera toujours sélectionné avec ses paramètres actuels.

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);

Remplir les contrôles lors de la sélection d’un point

Maintenant que nous disposons des contrôles, nous devons mettre en place la logique qui définit les valeurs actuelles des contrôles pour le point sélectionné. Notez que la valeur de l’ensemble de la série est utilisée s’il n’y a pas de personnalisation pour un point sélectionné. Dans ce cas, si la série est configurée pour afficher des points bleus, une valeur de couleur bleue s’affichera dans la liste déroulante des couleurs.

En cliquant sur la série de lignes, nous identifions le point sur lequel l’utilisateur a cliqué, supprimons la sélection de point précédente, puis sélectionnons le point sur lequel l’utilisateur a cliqué. Cela permet d’indiquer visuellement le point sélectionné sur le graphique, en agrandissant le point pour signaler sa sélection. L’index du point actuellement sélectionné et ses « PointConfigurations » sont enregistrés dans une variable membre en vue d’une utilisation ultérieure.

Les PointConfigurations sont interrogées et les valeurs correspondantes dans les listes déroulantes sont recherchées. Les indices actuels des listes déroulantes sont ensuite définis en conséquence. De même, pour la case à cocher et le champ de saisie, les valeurs sont recherchées dans l’ PointConfigurations, et les contrôles sont configurés pour y correspondre.

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);
    }
});

Fournir la logique pour configurer le point sélectionné

Maintenant que les contrôles sont renseignés avec la configuration actuelle, nous devons leur faire effectuer une action. Nous connectons leurs signaux à la logique qui se chargera de configurer le point sélectionné selon le paramètre choisi. Il suffit simplement de définir la valeur de l’ QXYSeries::PointConfiguration associée au contrôle sur la variable membre m_selectedPointConfig PointConfigurations , puis d’appeler la méthode 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);
});

Créer le graphique et disposer les contrôles

Enfin, nous créons le graphique et sa vue, ajoutons les séries au graphique et définissons la disposition de la fenêtre. Dans ce cadre, nous nous connectons au signal « geometryChanged » afin de capter un signal lorsque le graphique est tracé pour la première fois. Cela nous permet d’obtenir les valeurs correctes pour le point initialement sélectionné. Si nous le faisons plus tôt, les valeurs des points sont incorrectes. Cette connexion est interrompue après le premier déclenchement.

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);

Nous disposons désormais d'une application pleinement opérationnelle qui montre comment personnaliser chaque point d'un graphique.

© 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.