在条形图中使用数据模型

让我们先创建一个 CustomTableModel 类的实例。CustomTableModel 类派生自QAbstractTableModel ，它是为本示例的目的而创建的。该类的构造函数会在模型的内部数据存储中填充图表示例所需的数据。

auto model = new BarModelMapperModel(this);

现在，我们有了一个模型，其中包含了我们希望在图表和QTableView 中显示的数据。首先，我们创建QTableView ，并告诉它将该模型用作数据源。为了使数据显示得更好，我们设置了表格视图的最小宽度，并将其标题的大小调整模式改为拉伸。

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

现在我们需要一个QChart 实例，以便在图表中显示相同的数据。我们还启用了动画。这样可以更容易地看到修改模型数据对图表的影响。

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

下面代码的第一行创建了新的条形图系列。变量 firstRow 和 rowCount 用于定义自定义模型映射。自定义映射允许只从模型中获取部分数据。在本例中，从索引为 3 的行开始获取 5 行的数据。下面三行创建了QVBarModelMapper 类的实例，并指定条形集的数据应取自模型中索引为 1 至 4（包括 4）的列。为了在系列和模型之间建立连接，我们将这两个对象都设置为QVBarModelMapper 。

最后将系列添加到图表中。

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

为了在QTableView 中显示哪个数据对应哪个条形集，本示例使用了表格着色。将序列添加到图表时，会根据当前选择的主题为其分配颜色。下面的代码将从系列中提取该颜色并用于创建彩色QTableView 。视图着色不是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()));
}

我们希望在图表的坐标轴上设置分类，以描述数据的含义。下一个代码段展示了如何做到这一点。

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

为了避免设置QGraphicsScene ，我们使用QChartView 类来完成。QChart 对象指针被用作QChartView 构造函数的参数。为了让渲染看起来更漂亮，我们打开了抗锯齿功能，并设置了 chartView 部件的最小尺寸。

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

最后，我们将这两个部件放入一个布局中，并将该布局用作应用程序布局。

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

应用程序准备就绪。尝试修改表格视图中的数据，看看对图表有什么影响。

© 2025 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.