Configuration des points sélectionnés

Note : Ceci fait partie de l'exemple de la galerie Charts with Widgets.

Capture d'écran montrant un graphique linéaire où un point désiré peut être sélectionné et défini avec un nom, une taille de point et une couleur.

Fonctionnalités démontrées

Vous apprendrez ici comment

Fournir une sélection par clic des points d'une série.
Remplacer la configuration individuelle de points spécifiques, en configurant :
- Couleur
- la taille
- Visibilité de l'étiquette
- Format du texte de l'étiquette

Exécution de l'exemple

Pour exécuter l'exemple à partir de Qt Creatorouvrez le mode Welcome et sélectionnez l'exemple à partir de Examples. Pour plus d'informations, voir Qt Creator: Tutoriel : Construire et exécuter.

Sous-classe QMainWindow

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

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

Créer une série de lignes

Nous créons ensuite un site QLineSeries, en lui donnant un nom, en rendant les points visibles et en lui donnant des 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 des contrôles pour 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 ce que fait le contrôle.

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

Nous créons ensuite les deux derniers contrôles. Une case à cocher contrôle la visibilité du point sélectionné. L'autre contrôle est un QLineEdit qui permet à l'utilisateur de fournir une étiquette personnalisée pour le point.

Notez que nous ne définissons pas de valeurs initiales pour les 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 avons les contrôles, nous devons fournir la logique qui définit les valeurs de contrôle actuelles pour le point sélectionné. Notez que la valeur totale 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 sera affichée dans la boîte combobox de couleur.

Lorsque l'on clique sur la série de lignes, on recherche le point sur lequel on a cliqué, on supprime la sélection de points précédente, puis on sélectionne le point sur lequel on a cliqué. Cela permet d'indiquer visuellement le point sélectionné sur le graphique - en agrandissant le point pour indiquer sa sélection. L'indice du point sélectionné actuel et son adresse PointConfigurations sont enregistrés dans une variable membre en vue d'une utilisation ultérieure.

Le site PointConfigurations est interrogé et les valeurs correspondantes dans les comboboxes sont recherchées. Les indices actuels des comboboxes sont alors définis en conséquence. De même, pour la case à cocher et l'édition de ligne, les valeurs sont recherchées sur le site PointConfigurations et les contrôles sont définis en conséquence.

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 nécessaire à la configuration du point sélectionné

Maintenant que les contrôles sont remplis avec la configuration actuelle, nous devons leur faire faire quelque chose. Nous connectons leurs signaux à la logique qui se chargera de configurer le point sélectionné avec le paramètre choisi. Il suffit de définir la valeur QXYSeries::PointConfiguration associée au contrôle dans la variable membre m_selectedPointConfig PointConfigurations et d'appeler 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éation du graphique et disposition des contrôles

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

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 à présent d'une application entièrement fonctionnelle qui montre comment personnaliser des points individuels du 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.