Konfiguration ausgewählter Punkte

Hinweis: Dies ist Teil des Beispiels „Diagramme mit Widgets-Galerie “.

Screenshot, der ein Liniendiagramm zeigt, in dem ein gewünschter Punkt ausgewählt und mit einem Namen, einer Punktgröße und einer Farbe versehen werden kann

Vorgestellte Funktionen

Hier erfahren Sie, wie Sie:

die Auswahl von Punkten in einer Reihe per Mausklick zu ermöglichen.
die individuelle Konfiguration bestimmter Punkte überschreiben und dabei Folgendes festlegen:
- Farbe
- Größe
- Sichtbarkeit der Beschriftung
- Textformat der Beschriftung

Ausführen des Beispiels

Sie können das Beispiel wie folgt ausführen:

Qt Creator
Öffnen Sie den Modus „ Welcome “ und wählen Sie das Beispiel unter „ Examples “ aus. Weitere Informationen finden Sie unter Qt Creator: Tutorial: Erstellen und Ausführen.
Qt Extension for Visual Studio Code
Führen Sie den Befehl „ Qt: Open Qt examples “ aus der Datei „ Command Palette “ aus und wählen Sie das Beispiel aus der Liste aus. Weitere Informationen finden Sie unter Qt Extension for Visual Studio Code: Tutorial: Erstellen und Ausführen.

Unterklasse von QMainWindow

Zunächst erstellen wir eine Unterklasse von ` QMainWindow `, die das Diagramm und die Steuerelemente enthalten wird. Außerdem stellen wir den Standardcode für die Implementierung des Konstruktors bereit:

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

Erstellen einer Linienreihe

Anschließend erstellen wir eine `QLineSeries`, geben ihr einen Namen, machen die Punkte sichtbar und weisen ihr einige Punkte zum Zeichnen zu.

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

Erstellen der Steuerelemente zur Punktkonfiguration

Nun erstellen wir einige Steuerelemente zur Konfiguration von Farbe, Größe, Sichtbarkeit der Beschriftung und der Beschriftung selbst. Wir erstellen für jedes Steuerelement eine zugehörige Beschriftung, damit der Benutzer weiß, wozu das Steuerelement dient.

Für Farbe und Größe verwenden wir ein „ QComboBox “ und füllen es mit einer Auswahl an verschiedenen Farben und Größen.

Als Nächstes erstellen wir die letzten beiden Steuerelemente. Ein Kontrollkästchen steuert die Sichtbarkeit des ausgewählten Punktes. Das andere Steuerelement ist ein „ QLineEdit “, über das der Benutzer eine benutzerdefinierte Beschriftung für den Punkt eingeben kann.

Beachten Sie, dass wir für keines der Steuerelemente Anfangswerte festlegen, da immer ein Punkt ausgewählt wird, der die aktuellen Einstellungen anzeigt.

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

Befüllen der Steuerelemente bei der Auswahl eines Punktes

Nachdem wir nun die Steuerelemente haben, müssen wir die Logik bereitstellen, die die aktuellen Steuerelementwerte für den ausgewählten Punkt festlegt. Beachten Sie, dass der Wert der gesamten Reihe verwendet wird, wenn für einen ausgewählten Punkt keine Anpassung vorliegt. Ist die Reihe in diesem Fall so eingestellt, dass blaue Punkte angezeigt werden, wird in der Farb-Kombinationsfeld ein blauer Farbwert angezeigt.

Beim Klicken auf die Linienreihe ermitteln wir den angeklickten Punkt, heben die vorherige Punkt-Auswahl auf und wählen dann den angeklickten Punkt aus. Dadurch wird der ausgewählte Punkt im Diagramm visuell hervorgehoben – der Punkt wird vergrößert, um seine Auswahl anzuzeigen. Der Index des aktuell ausgewählten Punkts und seine „ PointConfigurations “ werden zur späteren Verwendung in einer Member-Variablen gespeichert.

Die „ PointConfigurations “ werden abgefragt und passende Werte in den Kombinationsfeldern gesucht. Anschließend werden die aktuellen Indizes der Kombinationsfelder entsprechend gesetzt. Ähnlich verhält es sich mit dem Kontrollkästchen und dem Eingabefeld: Die Werte werden aus dem „ PointConfigurations “ abgerufen und die Steuerelemente entsprechend angepasst.

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

Bereitstellung der Logik zur Konfiguration des ausgewählten Punktes

Nachdem die Steuerelemente nun mit der aktuellen Konfiguration gefüllt sind, müssen wir sie dazu bringen, etwas zu tun. Wir verbinden ihre Signale mit einer Logik, die die Konfiguration des ausgewählten Punktes mit der gewählten Einstellung übernimmt. Dazu muss lediglich der dem Steuerelement zugeordnete Wert „ QXYSeries::PointConfiguration “ auf die Member-Variable „ PointConfigurations “ von „ m_selectedPointConfig “ gesetzt und „ QXYSeries::setPointConfiguration “ aufgerufen werden.

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

Diagramm erstellen und Steuerelemente anordnen

Abschließend erstellen wir das Diagramm und seine Ansicht, fügen die Zeitreihen zum Diagramm hinzu und gestalten das Layout des Fensters. Dabei verbinden wir uns mit dem Signal ` geometryChanged `, um ein Signal abzufangen, wenn das Diagramm zum ersten Mal gezeichnet wird. Dies dient dazu, korrekte Werte für den anfänglich ausgewählten Punkt zu erhalten. Wenn wir dies früher tun, sind die Punktwerte falsch. Diese Verbindung wird nach dem ersten Auslösen getrennt.

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

Nun verfügen wir über eine voll funktionsfähige Anwendung, die veranschaulicht, wie einzelne Diagrammpunkte angepasst werden können.

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