Uso de modelos de datos con gráficos de barras

Comencemos creando una instancia de la clase CustomTableModel. La clase CustomTableModel deriva de QAbstractTableModel, y fue creada para el propósito de este ejemplo. El constructor de esta clase rellena el almacén de datos interno del modelo con los datos necesarios para nuestro ejemplo de gráfico.

auto model = new BarModelMapperModel(this);

Ahora tenemos un modelo con datos que nos gustaría mostrar tanto en el gráfico como en QTableView. En primer lugar, creamos QTableView y le decimos que utilice el modelo como fuente de datos. Para que los datos se presenten de forma agradable, se establece la anchura mínima de la vista de tabla y se cambia el modo de redimensionamiento de sus cabeceras a estirar.

// create table view and add model to it
auto tableView = new QTableView(this);
tableView->setModel(model);
tableView->setMinimumWidth(300);
tableView->horizontalHeader()->setSectionResizeMode(QHeaderView::Stretch);
tableView->verticalHeader()->setSectionResizeMode(QHeaderView::Stretch);
model->setParent(tableView);

Ahora necesitamos una instancia de QChart para mostrar los mismos datos en el gráfico. También activamos las animaciones. Esto facilita ver cómo una modificación de los datos del modelo afecta al gráfico.

auto chart = new QChart;
chart->setAnimationOptions(QChart::AllAnimations);

La primera línea del código siguiente crea nuevas series de barras. Las variables firstRow y rowCount se utilizan para definir un mapeo personalizado del modelo. El mapeo personalizado permite tomar sólo parte de los datos del modelo. En este caso los datos de 5 filas empezando por la fila con el índice 3. Las tres líneas siguientes crean una instancia de la clase QVBarModelMapper y especifican que los datos para las series de barras deben tomarse de las columnas del modelo con índices del 1 al 4 (ambos inclusive). Para crear una conexión entre la serie y el modelo establecemos ambos objetos a QVBarModelMapper.

Finalmente se añade la serie al gráfico.

auto series = new QBarSeries;

int first = 3;
int count = 5;
auto mapper = new QVBarModelMapper(this);
mapper->setFirstBarSetColumn(1);
mapper->setLastBarSetColumn(4);
mapper->setFirstRow(first);
mapper->setRowCount(count);
mapper->setSeries(series);
mapper->setModel(model);
chart->addSeries(series);

Para mostrar en QTableView qué datos se corresponden con qué conjunto de barras, este ejemplo utiliza el coloreado de tablas. Cuando la serie se añade al gráfico, se le asigna un color basado en el tema seleccionado en ese momento. El código siguiente extrae ese color de la serie y lo utiliza para crear QTableView coloreado. Colorear la vista no forma parte de la funcionalidad de QChart.

// for storing color hex from the series
QString seriesColorHex = "#000000";

// get the color of the series and use it for showing the mapped area
QList<QBarSet *> barsets = series->barSets();
for (int i = 0; i < barsets.count(); i++) {
    seriesColorHex = "#" + QString::number(barsets.at(i)->brush().color().rgb(), 16).right(6).toUpper();
    model->addMapping(seriesColorHex, QRect(1 + i, first, 1, barsets.at(i)->count()));
}

Nos gustaría tener categorías colocadas en el eje del gráfico que describan lo que significan los datos. El siguiente fragmento muestra cómo hacerlo.

QStringList categories {"April",  "May", "June", "July", "August"};
auto axisX = new QBarCategoryAxis;
axisX->append(categories);
chart->addAxis(axisX, Qt::AlignBottom);
series->attachAxis(axisX);
auto axisY = new QValueAxis;
chart->addAxis(axisY, Qt::AlignLeft);
series->attachAxis(axisY);

Para evitar configurar QGraphicsScene usamos la clase QChartView que lo hace por nosotros. El puntero del objeto QChart se utiliza como parámetro del constructor QChartView. Para que el render se vea más bonito se activa el Antialiasing y se fija el tamaño mínimo del widget chartView.

auto chartView = new QChartView(chart, this);
chartView->setRenderHint(QPainter::Antialiasing);

Finalmente, colocamos ambos widgets en un layout y usamos el layout como layout de la aplicación.

// create main layout
auto mainLayout = new QGridLayout;
mainLayout->setHorizontalSpacing(10);
mainLayout->addWidget(tableView, 1, 0);
mainLayout->addWidget(chartView, 1, 1);
mainLayout->setColumnStretch(1, 1);
mainLayout->setColumnStretch(0, 0);
setLayout(mainLayout);

La aplicación está lista. Intenta modificar los datos en la vista de tabla y observa cómo afecta al gráfico.