Utilisation des modèles de données avec les graphiques à barres

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 requises pour notre exemple de graphique.

auto model = new BarModelMapperModel(this);

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). Commençons par créer une instance de ` QTableView ` et indiquons-lui d’utiliser ce modèle comme source de données. Pour garantir une présentation optimale des données, nous définissons la largeur minimale de la vue de table et modifions le mode de redimensionnement de ses en-têtes pour qu’ils s’étirent.

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

Nous avons maintenant besoin d’une instance de `QChart` pour afficher les mêmes données sur le graphique. Nous activons également les animations. Cela permet de voir plus facilement comment une modification des données du modèle affecte le graphique.

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

La première ligne du code ci-dessous crée une nouvelle série de barres. Les variables `firstRow` et `rowCount` sont utilisées pour définir un mappage personnalisé du modèle. Le mappage personnalisé permet de ne prélever qu’une partie des données du modèle. Dans ce cas, il s’agit des données des 5 lignes commençant par la ligne dont l’index est 3. Les trois lignes suivantes créent une instance de la classe `QVBarModelMapper` et précisent que les données des séries de barres doivent provenir des colonnes du modèle dont les indices vont de 1 à 4 (inclus). Pour établir une connexion entre la série et le modèle, nous attribuons ces deux objets à `QVBarModelMapper`.

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

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

Pour indiquer dans l’ QTableView quelles données correspondent à quel ensemble de barres, 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 des étiquettes colorées QTableView. 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
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()));
}

Nous souhaitons placer sur l’axe du graphique des catégories décrivant la signification des données. L’extrait de code suivant montre comment procéder.

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

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. Pour améliorer l’aspect du rendu, l’anticrénelage est activé et la taille minimale du widget chartView est définie.

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 dernière comme mise en page de l'application.

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

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