Utilisation des données du modèle

Commençons par créer une instance de la classe `CustomTableModel`. La classe `CustomTableModel` est dérivée de ` QAbstractTableModel ` et a été créée spécialement pour cet exemple. Le constructeur de cette classe remplit le magasin de données interne du modèle avec les données adaptées à notre exemple de graphique.

auto *model = new ModelDataModel;

Nous disposons désormais d’un modèle contenant des données que nous souhaitons afficher à la fois sur le graphique et dans une vue de table ( QTableView). Tout d’abord, nous créons une instance d QTableView et lui indiquons d’utiliser le modèle comme source de données. Pour que les cellules de données remplissent la vue de table, nous modifions également le mode de redimensionnement des en-têtes.

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

Il nous faut maintenant l’instance QChart pour afficher les mêmes données sur le graphique. Nous activons également les animations. Cela permet de voir plus facilement comment la modification des données du modèle affecte le graphique.

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

Le code ci-dessous crée une nouvelle série de lignes et lui attribue un nom. La ligne suivante crée une instance de la classe `QVXYModelMapper`. Les deux lignes suivantes précisent que les coordonnées X sont extraites de la colonne du modèle (Qt::Vertical) dont l’index est 0. Les coordonnées Y sont extraites de la colonne du modèle dont l’index est 1. Pour établir une connexion entre la série et le modèle, nous attribuons ces deux objets à QVXYModelMapper.

Enfin, la série est ajoutée au graphique.

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

Pour indiquer dans QTableView quelles données correspondent à quelle série, cet exemple utilise la coloration des tableaux. Lorsqu’une série est ajoutée au graphique, une couleur lui est attribuée en fonction du thème actuellement sélectionné. Le code ci-dessous extrait cette couleur de la série et l’utilise pour créer une QTableView colorée. La coloration de la vue ne fait pas partie des fonctionnalités 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()));

Les mêmes opérations sont effectuées avec une deuxième série. Notez que pour cette série, différentes colonnes d’un même modèle sont mappées.

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

Pour éviter de configurer l’ QGraphicsScene, nous utilisons la classe `QChartView` qui s’en charge à notre place. Le pointeur vers l’objet `QChart` est utilisé comme paramètre du constructeur de `QChartView`. Afin d’améliorer l’aspect visuel du graphique, l’anticrénelage est activé et la taille minimale du widget `chartView` est définie.

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

Enfin, nous plaçons les deux widgets dans une mise en page et utilisons cette mise en page comme mise en page de l'application.

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

L’application est prête. Essayez de modifier les données dans la vue de tableau et observez comment cela affecte le graphique.