QtCharts 面积图

目录

相关阅读

1. 简述

2. 包含必要的头文件

3. 添加 Qt Charts 模块

4. 创建面积图

5. 运行

关于坐标轴

---

相关阅读

Qt编程：使用QBarSeries创建柱状图与多彩图表示例,-CSDN博客

QtCharts 折线图与曲线图_qt图形视图框架绘制折线 曲线-CSDN博客

QtCharts 关于饼图标签重叠的问题_series[i] ({type: 'pie', ...}) | charts文字重叠-CSDN博客

QtCharts 饼图的基本用法_qt 饼状图-CSDN博客

---

1. 简述

在 Qt 中，使用 Qt Charts 模块可以方便地创建面积图 (QAreaSeries)。面积图是基于折线图的图表，表示值随时间或类别的变化，同时填充两条线之间的区域。

2. 包含必要的头文件

#include <QtCharts/QChartView>
#include <QtCharts/QAreaSeries>
#include <QtCharts/QLineSeries>
#include <QtCharts/QValueAxis>

3. 添加 Qt Charts 模块

在项目文件 (*.pro) 中添加以下内容以链接 Qt Charts 模块：

QT += charts

4. 创建面积图

QAreaSeries是 Qt Charts 模块中的一个类，主要用于创建和绘制面积图（Area Chart）。以下是对 QAreaSeries 的详细介绍：

面积图的创建：

• QAreaSeries 用于绘制由两个 QLineSeries 或 QAbstractSeries 界定的区域。它会填充由上边界和下边界所围成的区域，形成面积图。通常，上边界和下边界可以是两条不同的折线或曲线，而 QAreaSeries 会将它们之间的区域进行填充，以展示数据在一定范围内的分布或变化趋势。

数据表示：

• 它通过关联两个 QLineSeries 或 QAbstractSeries 来表示数据，其中一个作为上边界，另一个作为下边界。

例如，可以使用以下代码创建一个简单的 QAreaSeries：

//#include "mainwindow.h"
#include <QApplication>

#include <QApplication>
#include <QtCharts/QChart>
#include <QtCharts/QChartView>
#include <QtCharts/QAreaSeries>
#include <QtCharts/QLineSeries>
#include <QtCharts/QValueAxis>
#include <QDateTime>
#include <stdlib.h>

//QT_CHARTS_USE_NAMESPACE

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    // 创建两个折线
    QLineSeries *upperSeries = new QLineSeries();
    QLineSeries *lowerSeries = new QLineSeries();

    srand(static_cast<unsigned int>(QDateTime::currentDateTime().toSecsSinceEpoch()));

    // 初始化上边界线、下边界线
    for(int i = 0; i < 5; i++) {
        upperSeries->append(i, 50 + rand() % 10);
        lowerSeries->append(i, 5 + rand() % 10);
    }

    // 创建面积图系列, 包含上、下界线
    QAreaSeries *areaSeries = new QAreaSeries(upperSeries, lowerSeries);
    areaSeries->setName("Area Chart");

    // 创建图表
    QChart *chart = new QChart;
    chart->addSeries(areaSeries);
    chart->setTitle("Area Chart Demo");

    //创建默认的坐标轴
    chart->createDefaultAxes();

    //由于我们只创建了一层, 只需要关联首个坐标轴即可
    QList<QAbstractAxis*> list_axisX = chart->axes(Qt::Horizontal);
    if (list_axisX.count()) {
        areaSeries->attachAxis(list_axisX.first());
    }

    QList<QAbstractAxis*> list_axisY = chart->axes(Qt::Vertical);
    if (list_axisY.count()) {
        areaSeries->attachAxis(list_axisY.first());

        //控制Y轴显示区间
        list_axisY.first()->setRange(0, 80);
    }

    // 创建图表视图
    QChartView *chartView = new QChartView(chart);
    chartView->setRenderHint(QPainter::Antialiasing, true);

    // 显示窗口
    chartView->resize(600, 600);
    chartView->show();

    return a.exec();
}

5. 运行

关于坐标轴

QChart还支持添加外部坐标轴，然后将QAreaSeries与坐标轴关联即可。修改后，完整的代码如下：

//#include "mainwindow.h"
#include <QApplication>

#include <QApplication>
#include <QtCharts/QChart>
#include <QtCharts/QChartView>
#include <QtCharts/QAreaSeries>
#include <QtCharts/QLineSeries>
#include <QtCharts/QValueAxis>
#include <QDateTime>
#include <stdlib.h>

//QT_CHARTS_USE_NAMESPACE

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    // 创建两个折线
    QLineSeries *upperSeries = new QLineSeries();
    QLineSeries *lowerSeries = new QLineSeries();

    srand(static_cast<unsigned int>(QDateTime::currentDateTime().toSecsSinceEpoch()));

    // 初始化 上折现、下折现
    for(int i = 0; i < 5; i++) {
        upperSeries->append(i, 50 + rand() % 10);
        lowerSeries->append(i, 5 + rand() % 10);
    }

    // 创建面积图, 包含上、下折线
    QAreaSeries *areaSeries = new QAreaSeries(upperSeries, lowerSeries);
    areaSeries->setName("Area Chart");

    // 创建图表
    QChart *chart = new QChart;
    chart->addSeries(areaSeries);
    chart->setTitle("Area Chart Demo");

#if 0
    //创建默认的坐标轴
    chart->createDefaultAxes();

    //由于我们只创建了一层, 只需要关联首个坐标轴即可
    QList<QAbstractAxis*> list_axisX = chart->axes(Qt::Horizontal);
    if (list_axisX.count()) {
        areaSeries->attachAxis(list_axisX.first());
    }

    QList<QAbstractAxis*> list_axisY = chart->axes(Qt::Vertical);
    if (list_axisY.count()) {
        areaSeries->attachAxis(list_axisY.first());

        //控制Y轴显示区间
        list_axisY.first()->setRange(0, 80);
    }
#else
    //使用外部坐标轴

    QValueAxis* axisX = new QValueAxis(chart);
    QValueAxis* axisY = new QValueAxis(chart);

    //warning: 'void QChart::setAxisX(QAbstractAxis*, QAbstractSeries*)' is deprecated [-Wdeprecated-declarations]
    //chart->setAxisX(axisX, areaSeries);
    //chart->setAxisY(axisY, areaSeries);

    chart->addAxis(axisX,Qt::AlignBottom);
    chart->addAxis(axisY,Qt::AlignLeft);

    areaSeries->attachAxis(axisX);
    areaSeries->attachAxis(axisY);
    axisY->setRange(0, 80);

#endif

    // 创建图表视图
    QChartView *chartView = new QChartView(chart);
    chartView->setRenderHint(QPainter::Antialiasing, true);

    // 显示窗口
    chartView->resize(640, 480);
    chartView->show();

    return a.exec();
}

使用旧版本的API添加坐标轴会报警告：

warning: 'void QChart::setAxisX(QAbstractAxis*, QAbstractSeries*)' is deprecated [-Wdeprecated-declarations]

目前还能使用，以后可能会被移除，我目前使用的Qt版本是6.7。建议将代码

 chart->setAxisX(axisX, areaSeries);
 chart->setAxisY(axisY, areaSeries);

修改为：

chart->addAxis(axisX,Qt::AlignBottom);
chart->addAxis(axisY,Qt::AlignLeft);

areaSeries->attachAxis(axisX);
areaSeries->attachAxis(axisY);