Configuración del punto seleccionado

Nota: Esto es parte del ejemplo de la Galería de Gráficos con Widgets.

Captura de pantalla que muestra un gráfico de líneas en el que se puede seleccionar un punto deseado y establecerlo con un nombre, un tamaño de punto y un color.

Funciones demostradas

Aquí aprenderá cómo:

Proporcionar la selección por clic de puntos en una serie.
Sobreescribir la configuración individual de puntos específicos, configurando:
- Color
- Tamaño
- Visibilidad de la etiqueta
- Formato de texto de la etiqueta

Ejecutar el ejemplo

Para ejecutar el ejemplo desde Qt Creatorabra el modo Welcome y seleccione el ejemplo de Examples. Para más información, consulte Qt Creator: Tutorial: Construir y ejecutar.

Subclase QMainWindow

Comenzamos creando una subclase de QMainWindow que contendrá el gráfico y los controles. Y proporcionamos el boilerplate para la implementación del constructor:

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

Crear una Serie Lineal

Luego creamos un QLineSeries, dándole un nombre, haciendo los puntos visibles, y dándole algunos puntos para graficar.

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

Crear los controles de configuración de puntos

Ahora creamos algunos controles para configurar el color, el tamaño, la visibilidad de la etiqueta y la propia etiqueta. Creamos una etiqueta asociada para cada control para que el usuario sepa lo que hace el control.

Para el color y el tamaño, utilizamos un QComboBox, rellenándolo con una variedad de opciones de color y tamaño.

A continuación creamos los dos últimos controles. Una casilla de verificación controla la visibilidad del punto seleccionado. El otro control es un QLineEdit que permite al usuario proporcionar una etiqueta personalizada para el punto.

Tenga en cuenta que no establecemos valores iniciales para ninguno de los controles, ya que un punto siempre se seleccionará mostrando su configuración actual.

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

Rellenar los controles al seleccionar un punto

Ahora que tenemos los controles, necesitamos proporcionar la lógica que establece los valores actuales de los controles para el punto seleccionado. Tenga en cuenta que el valor de toda la serie se utiliza si no hay personalización para un punto seleccionado. En este caso, si la serie está configurada para mostrar puntos azules, se mostrará un valor de color azul en el combobox de color.

Al hacer clic en la serie de líneas, buscamos el punto sobre el que se ha hecho clic, eliminamos la selección de puntos anterior y, a continuación, seleccionamos el punto sobre el que se ha hecho clic. Esto indica visualmente el punto seleccionado en el gráfico - haciendo el punto más grande para indicar su selección. El índice del punto seleccionado en ese momento y su dirección PointConfigurations se guardan en una variable miembro para su uso posterior.

Se consulta PointConfigurations y se buscan los valores coincidentes en los cuadros combinados. A continuación, los índices actuales de los cuadros combinados se ajustan en consecuencia. De forma similar, para la casilla de verificación y la edición de línea, los valores se buscan en PointConfigurations y los controles se configuran para que coincidan.

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

Proporcionar la Lógica para Configurar el Punto Seleccionado

Ahora que los controles tienen la configuración actual, necesitamos hacer que hagan algo. Conectamos sus señales a la lógica que hará el trabajo de configurar el punto seleccionado con la configuración elegida. Es una simple cuestión de establecer el valor QXYSeries::PointConfiguration asociado con el control a la variable miembro m_selectedPointConfig PointConfigurations , y llamar a 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);
});

Crear el gráfico y disponer los controles

Por último, creamos el gráfico y su vista, añadimos las series al gráfico y creamos el diseño de la ventana. Como parte de esto, nos conectamos a la señal geometryChanged para capturar una señal cuando el gráfico se pinta por primera vez. Esto es para que podamos obtener valores correctos para el punto seleccionado inicialmente. Si lo hacemos antes, los valores de los puntos serán incorrectos. Esta conexión se desconecta después de la primera vez que se dispara.

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

Ahora tenemos una aplicación completamente funcional que demuestra cómo personalizar puntos individuales del gráfico.

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