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 pour les besoins de cet exemple. Le constructeur de cette classe remplit le magasin de données interne du modèle avec les données qui conviennent à notre exemple de graphique.

auto *model = new ModelDataModel;

Nous disposons à présent d'un modèle contenant des données que nous souhaitons afficher à la fois sur le graphique et dans un tableau QTableView. Tout d'abord, nous créons QTableView et lui indiquons d'utiliser le modèle comme source de données. Pour que les cellules de données remplissent la vue tableau, 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);

Nous avons maintenant besoin de l'instance QChart pour afficher les mêmes données sur le graphique. Nous activons également les animations. Il est ainsi plus facile de voir 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 donne un nom. La ligne suivante crée une instance de la classe QVXYModelMapper. Les deux lignes suivantes spécifient que les coordonnées X sont prises dans la colonne du modèle (Qt::Vertical) avec l'index 0. Les coordonnées Y sont prises dans la colonne du modèle avec l'index 1. Pour créer un lien entre la série et le modèle, nous définissons ces deux objets sur 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 montrer sur 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 sélectionné. Le code ci-dessous extrait cette couleur de la série et l'utilise pour créer une vue colorée QTableView. La coloration de la vue ne fait pas partie de la fonctionnalité 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 du 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 QGraphicsScene, nous utilisons la classe QChartView qui le fait pour nous. Le pointeur d'objet QChart est utilisé comme paramètre du constructeur QChartView. Pour améliorer l'aspect 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 disposition et utilisons cette dernière comme disposition 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 tableau et voyez comment cela affecte le graphique.