Verwendung von Datenmodellen mit Balkendiagrammen

Beginnen wir damit, eine Instanz der Klasse „CustomTableModel“ zu erstellen. Die Klasse „CustomTableModel“ ist von „ QAbstractTableModel “ abgeleitet und wurde speziell für dieses Beispiel erstellt. Der Konstruktor dieser Klasse füllt den internen Datenspeicher des Modells mit den für unser Diagrammbeispiel erforderlichen Daten.

auto model = new BarModelMapperModel(this);

Wir verfügen nun über ein Modell mit Daten, die wir sowohl im Diagramm als auch in einer „ QTableView “ anzeigen möchten. Zunächst erstellen wir eine „ QTableView “ und weisen sie an, das Modell als Datenquelle zu verwenden. Damit die Daten ansprechend dargestellt werden, wird die Mindestbreite der Tabellenansicht festgelegt und der Größenanpassungsmodus der Kopfzeilen auf „stretch“ gesetzt.

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

Nun benötigen wir eine `QChart`-Instanz, um dieselben Daten im Diagramm darzustellen. Außerdem aktivieren wir Animationen. So lässt sich leichter erkennen, wie sich eine Änderung der Modelldaten auf das Diagramm auswirkt.

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

Die erste Zeile des folgenden Codes erstellt eine neue Balkenreihe. Die Variablen `firstRow` und `rowCount` werden verwendet, um eine benutzerdefinierte Modellzuordnung festzulegen. Eine benutzerdefinierte Zuordnung ermöglicht es, nur einen Teil der Daten aus dem Modell zu übernehmen. In diesem Fall sind dies Daten aus 5 Zeilen, beginnend mit der Zeile mit dem Index 3. Die folgenden drei Zeilen erstellen eine Instanz der Klasse „QVBarModelMapper“ und legen fest, dass die Daten für die Balkensätze aus den Spalten des Modells mit den Indizes 1 bis 4 (einschließlich) entnommen werden sollen. Um eine Verbindung zwischen der Reihe und dem Modell herzustellen, weisen wir beiden Objekten „QVBarModelMapper“ zu.

Abschließend wird die Reihe zum Diagramm hinzugefügt.

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

Um in „ QTableView “ anzuzeigen, welche Daten welchem Balkensatz entsprechen, verwendet dieses Beispiel eine Tabellenfärbung. Wenn eine Reihe zum Diagramm hinzugefügt wird, wird ihr basierend auf dem aktuell ausgewählten Design eine Farbe zugewiesen. Der folgende Code extrahiert diese Farbe aus der Reihe und verwendet sie, um farbige „ QTableView “ zu erstellen. Die Färbung der Ansicht ist nicht Teil der QChart-Funktionalität.

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

Wir möchten, dass auf der Achse des Diagramms Kategorien platziert werden, die die Bedeutung der Daten beschreiben. Der folgende Codeausschnitt zeigt, wie das geht.

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

Um die Einrichtung der „ QGraphicsScene “ zu vermeiden, verwenden wir die Klasse „QChartView“, die dies für uns übernimmt. Der Zeiger auf das QChart-Objekt wird als Parameter des QChartView-Konstruktors verwendet. Um die Darstellung ansprechender zu gestalten, wird Antialiasing aktiviert und die Mindestgröße des „chartView“-Widgets festgelegt.

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

Abschließend platzieren wir beide Widgets in einem Layout und verwenden dieses Layout als Anwendungslayout.

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

Die Anwendung ist fertig. Versuchen Sie, die Daten in der Tabellenansicht zu ändern, und beobachten Sie, wie sich dies auf das Diagramm auswirkt.