Verwendung von Modelldaten

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 Daten, die für unser Diagrammbeispiel geeignet sind.

auto *model = new ModelDataModel;

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 Datenzellen die Tabellenansicht ausfüllen, ändern wir außerdem den Modus zur Anpassung der Kopfzeilengröße.

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

Nun benötigen wir die QChart-Instanz, um dieselben Daten im Diagramm darzustellen. Außerdem aktivieren wir Animationen. Dadurch lässt sich leichter erkennen, wie sich Änderungen an den Modelldaten auf das Diagramm auswirken.

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

Der folgende Code erstellt eine neue Linienreihe und vergibt einen Namen dafür. Die nächste Zeile erstellt eine Instanz der Klasse `QVXYModelMapper`. Die nächsten beiden Zeilen legen fest, dass die X-Koordinaten aus der Spalte des Modells (Qt::Vertical) mit dem Index 0 entnommen werden. Die Y-Koordinaten werden aus der Spalte des Modells mit dem Index 1 entnommen. Um eine Verbindung zwischen der Reihe und dem Modell herzustellen, weisen wir beide Objekte dem `QVXYModelMapper` zu.

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

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

Um in „ QTableView “ zu zeigen, welche Daten welcher Reihe 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 eine 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
seriesColorHex = "#" + QString::number(series->pen().color().rgb(), 16).right(6).toUpper();
model->addMapping(seriesColorHex, QRect(0, 0, 2, model->rowCount()));

Die gleichen Schritte werden mit einer zweiten Reihe durchgeführt. Beachten Sie, dass für diese Reihe verschiedene Spalten desselben Modells zugeordnet werden.

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

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. Damit das Diagramm ansprechender aussieht, wird Antialiasing aktiviert und die Mindestgröße des „chartView“-Widgets festgelegt.

chart->createDefaultAxes();
chart->layout()->setContentsMargins(0, 0, 0, 0);
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->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.