Uso de datos modelo

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 adecuados para nuestro ejemplo de gráfico.

auto *model = new ModelDataModel;

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 las celdas de datos llenen la vista de tabla también cambiamos el modo de redimensionamiento de las cabeceras.

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

Ahora necesitamos que la instancia QChart muestre los mismos datos en el gráfico. También activamos las animaciones. Así es más fácil ver cómo la modificación de los datos del modelo afecta al gráfico.

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

El código siguiente crea una nueva serie de líneas y le da un nombre. La siguiente línea crea una instancia de la clase QVXYModelMapper. Las dos líneas siguientes especifican que las coordenadas X se toman de la columna del modelo(Qt::Vertical) con índice 0. Las coordenadas Y se toman de la columna del modelo con índice 1. Para crear una conexión entre la serie y el modelo establecemos ambos objetos en QVXYModelMapper.

Por último, se añade la serie al gráfico.

auto series = new QLineSeries;
series->setName("Line 1");
auto mapper = new QVXYModelMapper(this);
mapper->setXColumn(0);
mapper->setYColumn(1);
mapper->setSeries(series);
mapper->setModel(model);
chart->addSeries(series);

Para mostrar en QTableView qué datos corresponden a qué serie, este ejemplo utiliza el coloreado de tablas. Cuando se añade una serie 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 un QTableView coloreado. La coloración de 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
seriesColorHex = "#" + QString::number(series->pen().color().rgb(), 16).right(6).toUpper();
model->addMapping(seriesColorHex, QRect(0, 0, 2, model->rowCount()));

Las mismas operaciones se realizan con una segunda serie. Observe que para esta serie se mapean diferentes columnas del mismo modelo.

series = new QLineSeries;
series->setName("Line 2");

mapper = new QVXYModelMapper(this);
mapper->setXColumn(2);
mapper->setYColumn(3);
mapper->setSeries(series);
mapper->setModel(model);
chart->addSeries(series);
// get the color of the series and use it for showing the mapped area
seriesColorHex = "#" + QString::number(series->pen().color().rgb(), 16).right(6).toUpper();
model->addMapping(seriesColorHex, QRect(2, 0, 2, model->rowCount()));

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

chart->createDefaultAxes();
chart->layout()->setContentsMargins(0, 0, 0, 0);
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->addWidget(tableView, 1, 0);
mainLayout->addWidget(chartView, 1, 1);
mainLayout->setColumnStretch(1, 1);
mainLayout->setColumnStretch(0, 0);
setLayout(mainLayout);

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