Combinación de Gráfico de Líneas y Gráfico de Barras

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

En el ejemplo combinamos un gráfico de líneas con un gráfico de barras y utilizamos el eje de categorías como eje común para ambos.

Captura de pantalla de un gráfico de líneas combinado con un gráfico de barras

Aquí creamos los datos para nuestras series de barras.

auto set0 = new QBarSet("Jane");
auto set1 = new QBarSet("John");
auto set2 = new QBarSet("Axel");
auto set3 = new QBarSet("Mary");
auto set4 = new QBarSet("Sam");

*set0 << 1 << 2 << 3 << 4 << 5 << 6;
*set1 << 5 << 0 << 0 << 4 << 0 << 7;
*set2 << 3 << 5 << 8 << 13 << 8 << 5;
*set3 << 5 << 6 << 7 << 3 << 4 << 5;
*set4 << 9 << 7 << 5 << 3 << 1 << 2;

Creamos una serie de barras y le añadimos conjuntos. Los primeros valores de cada conjunto se agrupan en la primera categoría, los segundos valores en la segunda categoría y así sucesivamente.

auto barseries = new QBarSeries;
barseries->append(set0);
barseries->append(set1);
barseries->append(set2);
barseries->append(set3);
barseries->append(set4);

A continuación creamos una serie de líneas y le añadimos datos. Para que los datos coincidan con el gráfico de barras, utilizamos el índice como valor x para nuestra serie de líneas, de forma que el primer punto esté en (0,valor), el segundo en (1,valor) y así sucesivamente.

auto lineseries = new QLineSeries;
lineseries->setName("trend");
lineseries->append(QPoint(0, 4));
lineseries->append(QPoint(1, 15));
lineseries->append(QPoint(2, 20));
lineseries->append(QPoint(3, 4));
lineseries->append(QPoint(4, 12));
lineseries->append(QPoint(5, 17));

Aquí creamos el gráfico y le añadimos las dos series.

auto chart = new QChart;
chart->addSeries(barseries);
chart->addSeries(lineseries);
chart->setTitle("Line and Bar Chart");

Para que el gráfico muestre las series correctamente, tenemos que crear ejes personalizados para las series. Si no creamos ejes personalizados, entonces cada serie se escalará para utilizar el área máxima del gráfico (como en el caso de una sola serie) y el resultado será incorrecto. Con ejes personalizados establecemos el rango de ambas series para que sigan el mismo eje. Para el eje x usamos QBarCategoryAxis y para el eje y usamos QValuesAxis.

QStringList categories;
categories << "Jan" << "Feb" << "Mar" << "Apr" << "May" << "Jun";
auto axisX = new QBarCategoryAxis;
axisX->append(categories);
chart->addAxis(axisX, Qt::AlignBottom);
lineseries->attachAxis(axisX);
barseries->attachAxis(axisX);
axisX->setRange(QString("Jan"), QString("Jun"));

auto axisY = new QValueAxis;
chart->addAxis(axisY, Qt::AlignLeft);
lineseries->attachAxis(axisY);
barseries->attachAxis(axisY);
axisY->setRange(0, 20);

Y también queremos mostrar la leyenda.

chart->legend()->setVisible(true);
chart->legend()->setAlignment(Qt::AlignBottom);

Finalmente añadimos el gráfico a una vista.

createDefaultChartView(chart);

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