Utilisation de modèles de données avec les diagrammes à 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 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 requises pour notre exemple de graphique.

auto model = new BarModelMapperModel(this);

Nous disposons à présent d'un modèle contenant des données que nous souhaitons afficher à la fois sur le graphique et dans un fichier QTableView. Tout d'abord, nous créons QTableView et lui demandons d'utiliser le modèle comme source de données. Pour que les données soient bien présentées, la largeur minimale de la vue tableau est définie et le mode de redimensionnement de ses en-têtes est modifié pour être étiré.

// 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 QChart pour afficher les mêmes données sur le graphique. Nous activons également les animations. Il est ainsi plus facile de voir 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 de nouvelles séries de barres. Les variables firstRow et rowCount sont utilisées pour définir une correspondance de modèle personnalisée. Le mappage personnalisé permet de ne prendre qu'une partie des données du modèle. Dans ce cas, il s'agit des données de 5 lignes, en commençant par la ligne ayant l'index 3. Les trois lignes suivantes créent une instance de la classe QVBarModelMapper et spécifient que les données des séries de barres doivent être extraites des colonnes du modèle avec des index de 1 à 4 (inclus). Pour créer une connexion entre la série et le modèle, nous définissons ces deux objets sur 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 montrer sur QTableView quelles données correspondent à quel ensemble de barres, cet exemple utilise la coloration des tableaux. Lorsque la 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 des QTableView colorés. 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
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 aimerions placer sur l'axe du graphique des catégories qui décrivent la signification des données. L'extrait 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 QGraphicsScene, nous utilisons la classe QChartView qui le fait pour nous. Le pointeur de l'objet QChart est utilisé comme paramètre du constructeur QChartView. Pour que le rendu soit plus agréable, 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 un layout et utilisons ce dernier comme layout 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 tableau et voyez comment cela affecte le graphique.