テーマを使用したチャートの作成

ここでは、サポートされている一部のチャートタイプについて、組み込みのさまざまなテーマの見た目や雰囲気を変更できます。

ライトテーマのチャートを示したスクリーンショット

茶色の砂をモチーフにしたチャートを示すスクリーンショット

セルリアンブルーを基調としたチャートを示すスクリーンショット

チャートの作成

異なるタイプのチャートは個別に生成され、レイアウトに追加されます。たとえば、折れ線グラフは次のように作成されます。他のチャートタイプの作成も同様です。

まず、チャートを作成します。

auto chart = new QChart;
chart->setTitle("Line Chart");

共通のランダムデータセットが生成され、リストに格納されます。このリストは、各チャートタイプでチャートの系列にデータを追加するために使用されます。線グラフの系列については、QLineSeries インスタンスが作成され、チャートに追加されます。

QString name("Series ");
int nameIndex = 0;
for (const DataList &list : m_dataTable) {
    auto series = new QLineSeries(chart);
    for (const Data &data : list)
        series->append(data.first);
    series->setName(name + QString::number(nameIndex));
    nameIndex++;
    chart->addSeries(series);
}

線グラフのシリーズ用にデフォルトの軸が作成されます。また、シリーズに使用されるデータの範囲に基づいて、軸の範囲を指定します。

chart->createDefaultAxes();
chart->axes(Qt::Horizontal).first()->setRange(0, m_valueMax);
chart->axes(Qt::Vertical).first()->setRange(0, m_valueCount);

また、ラベルとY軸の間に余白を追加したい。このため、ラベルにスペース文字を追加するラベル形式を指定する。

// Add space to label to add space between labels and axis
auto axisY = qobject_cast<QValueAxis *>(chart->axes(Qt::Vertical).first());
Q_ASSERT(axisY);
axisY->setLabelFormat("%.1f  ");

最後に、折れ線グラフをグリッドレイアウトに追加します。

chartView = new QChartView(createLineChart(), this);
m_ui->gridLayout->addWidget(chartView, 1, 2);

テーマの変更

ユーザーは、このサンプルで使用する組み込みテーマを選択できます。このテーマは、レイアウト内のすべてのチャートに適用されます。

auto theme = static_cast<QChart::ChartTheme>(
            m_ui->themeComboBox->itemData(m_ui->themeComboBox->currentIndex()).toInt());
    ...
chartView->chart()->setTheme(theme);

アニメーション、凡例、アンチエイリアシングの変更

この例では、アニメーション、凡例、アンチエイリアシングを変更することで、チャートの外観がどのように変化するかを確認することもできます。

ユーザーの選択に基づいて、各チャートに使用されるアニメーションの種類が設定されます。チャートにアニメーションを適用しない、グリッド軸または系列にアニメーションを適用する、あるいはその両方に適用することも可能です。

QChart::AnimationOptions options(
            m_ui->animatedComboBox->itemData(m_ui->animatedComboBox->currentIndex()).toInt());
if (!m_charts.isEmpty() && m_charts.at(0)->chart()->animationOptions() != options) {
    for (QChartView *chartView : charts)
        chartView->chart()->setAnimationOptions(options);
}

チャートには凡例を表示させることができます。凡例は、チャートのさまざまな側に配置可能です。

Qt::Alignment alignment(
            m_ui->legendComboBox->itemData(m_ui->legendComboBox->currentIndex()).toInt());

if (!alignment) {
    for (QChartView *chartView : charts)
        chartView->chart()->legend()->hide();
} else {
    for (QChartView *chartView : charts) {
        chartView->chart()->legend()->setAlignment(alignment);
        chartView->chart()->legend()->show();
    }
}

また、アンチエイリアシングのオプションを変更すると、チャートの外観がどのように変化するかを確認することもできます。アンチエイリアシングは、ユーザーの選択に基づいて更新されます。

bool checked = m_ui->antialiasCheckBox->isChecked();
for (QChartView *chart : charts)
    chart->setRenderHint(QPainter::Antialiasing, checked);

© 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.