棒グラフでのデータモデルの使用
注：これは 「ウィジェット付きチャート ギャラリー」のサンプルの一部です。
まず、CustomTableModelクラスのインスタンスを作成しましょう。CustomTableModelクラスはQAbstractTableModel を継承しており、このサンプル用に作成されたものです。このクラスのコンストラクタは、チャートサンプルに必要なデータをモデルの内部データストアに格納します。
auto model = new BarModelMapperModel(this);これで、チャートとQTableView の両方に表示したいデータを含むモデルができました。まず、QTableView を作成し、そのデータソースとしてこのモデルを使用するように指定します。データをきれいに表示するために、テーブルビューの最小幅を設定し、ヘッダーのサイズ変更モードを「stretch」に変更します。
// 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 インスタンスが必要です。また、アニメーションも有効にします。これにより、モデルのデータが変更された際にチャートにどのような影響が及ぶかをより分かりやすく確認できます。
以下のコードの最初の行では、新しい棒グラフシリーズを作成しています。変数 firstRow および rowCount を使用して、カスタムモデルマッピングを定義しています。カスタムマッピングを使用すると、モデルからデータの一部のみを取得することができます。この例では、インデックス 3 の行から始まる 5 行分のデータを取得しています。 次の3行では、QVBarModelMapperクラスのインスタンスを作成し、棒グラフセットのデータをモデルのインデックス1から4（両端を含む）までの列から取得するように指定しています。シリーズとモデルの間に関連付けを作成するために、これら2つのオブジェクトの両方を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);これでアプリケーションの準備は完了です。テーブルビューのデータを変更して、チャートにどのような影響が出るか試してみてください。
© 2026 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.
