QT数据可视化框架编程实战之三维柱状图从入门到精通_补天云QT技术培训专家

QT数据可视化框架编程实战之三维柱状图从入门到精通_补天云QT技术培训专家

简介

本文将介绍QT数据可视化框架（QT DataVisualization 模块）编程实战之三维柱状图(Q3DBars)的一些常规用法。包括三维柱状图组件的介绍，入门应用实例，QT数据可视化框架和QWidget窗口组合应用实例，以及多系列三维柱状图的应用实例。还包括对三维柱状图的标签(label)和标题(title)的应用实例的介绍。

文章目录

• QT数据可视化框架三维柱状图组件
• QT数据可视化框架三维柱状图入门应用实例
• • 三维柱状图运行效果
  • QT三维柱状图Q3DBars类型
  • QT三维柱状图序列QBar3DSeries类型
  • 应用实例的源码
• QT数据可视化框架和QWidget窗口组合应用实例
• • Q3DBars的类型继承体系
  • Q3DBars如何和QWidget窗口搭配使用？
  • Q3DBars和QWidget组合应用实例运行效果
  • 源码
• QT数据可视化框架多系列三维柱状图
• • 运行效果
  • 源码

正文

QT数据可视化框架三维柱状图组件

QT数据可视化框架包含三种图形可视化，分别是三维柱状图(Q3DBars)、三维散点图(Q3DScatters)，和三维曲面图(Q3DSurface)。本文只关注对三维柱状图组件的介绍和应用实例。

QT数据可视化框架三维柱状图入门应用实例

三维柱状图运行效果

下图就是一个使用QT数据可视化框架生成的典型的三维柱状图。

这个三维柱状图由坐标轴和柱体组成。

QT三维柱状图Q3DBars类型

Q3DBars类型是QT数据可视化框架提供的几种重要的三维组件之一，用于实现三维柱状图。QT数据可视化图形的基类是QAbstract3DGraph类型。

Q3DBars是一个QT对象类型，也就是祖宗类型是QObject类型。Q3DBars自身支持三个坐标轴：

X轴（列）：这是一个三维类别坐标轴。
columnAxis : QCategory3DAxis*

Z轴（行）：这也是一个三维类别坐标轴。
rowAxis : QCategory3DAxis*

Y轴（高）：这是一个三维数值坐标轴。
valueAxis : QValue3DAxis*

什么是类别坐标轴（QCategory3DAxis）？ 所谓类别坐标轴，就是这个坐标轴所表示的维度可以支持文本标签，适合于表达类似“初级”、“中级”、“高级”这样的分类概念。

什么是数值坐标轴（qValue3DAxis）？所谓数值坐标轴，就是这个坐标轴所表示的维度可以支持一些列连续的数值，适合于表示类似各种数量计量统计，比如身高、体重等。

QT三维柱状图序列QBar3DSeries类型

前面介绍了三维柱状图类型Q3DBars，现在看到三维柱状图的序列类型QBar3DSeries，是不是感到比较诡异呢？ 本文作者看到这种类型命名形式的不统一之后，也感到有一些诡异。毕竟QT框架是一个复杂而庞大的优秀的框架，还是表示尊重，就不妄加非议了。

言归正传，到底什么是序列呢？所谓序列，就是通过一组数据点产生的一种图形。比如一个三维柱状图序列， 就是一组数据点生成的若干柱体组成的图形。在一个三维柱状图中，可以包含一个或多个三维柱状图序列。不同的图，只能使用特定的与之适应的序列。

应用实例的源码

QT数据可视化框架底层支持使用基于opengl等图形渲染引擎的图形硬件加速，因此图形渲染性能有保证。QT框架之所以是一个高性能的图形界面开发框架，就是因为QT框架包括数据可视化和QML等组件在内的多种组件的底层都支持opengl等多种图形渲染引擎，也就是都支持图形硬件加速。

main.cpp文件源码如下所示。

#include <QApplication>
#include <Q3DBars>
#include <QBar3DSeries>

int main(int argc, char *argv[])
{
	//通过环境变量指定后端渲染引擎为opengl。
    qputenv("QSG_RHI_BACKEND", "opengl");

	//实际上只使用QGuiApplication就可以的。
    QApplication a(argc, argv);

	//定义QT三维柱状图对象实例
    Q3DBars bars;
	//Q3DBars本身可以包含窗口边框，也可以不包含。
    bars.setFlags(bars.flags() ^ Qt::FramelessWindowHint);
    //Z轴(行)的范围，最多可包含五行，也就是在Z轴方向上最多有五个数据点
    bars.rowAxis()->setRange(0, 4);
	//X轴(列)的范围，最多可包含五列。
    bars.columnAxis()->setRange(0, 4);

	//创建一个序列对象
    QBar3DSeries* series = new QBar3DSeries();
    //创建一个数据行对象
    QBarDataRow* row = new QBarDataRow();
    //设定该数据行的数值
    *row << 1.0f << 3.0f << 5.0f << 7.0f << 9.0f;
    //将数据行加入到序列中
    series->dataProxy()->addRow(row);

	//将序列加入到三维柱状图中
    bars.addSeries(series);

	//将三维柱状图所在窗口显示出来。
    bars.show();

    return a.exec();
}

QT数据可视化框架和QWidget窗口组合应用实例

Q3DBars的类型继承体系

从Q3DBars的类型继承体系可以看到，Q3DBars实际上只是一个QWindow，而不是QWidget。
Q3DBars -> QAbstract3DGraph->（QWindow，QOpenGLFunctions)。

在QT框架中存在两种类型的窗口，一种是常规GUI的栅格窗口，另外一种是OpenGL窗口。现在QT数据可视化框架的需求是必须支持图形硬件加速，也就是必须使用OpenGL，那么应该选择支持OpenGL窗口的技术路线。这也存在几种技术路线，但是根据依赖最小化的设计原则，显然使用QWindow作为基类是很好的选择。

关于QT窗口系统的底层窗口的介绍，可以参考下面这个文章：

QT6窗口系统之QT底层窗口QWindow：QT框架中哪些常见窗口是基于QWindow的? 如何实现QT框架栅格窗口？如何实现QT框架OpenGL窗口？

Q3DBars如何和QWidget窗口搭配使用？

QT数据可视化框架中的包括三维柱状图在内的图形，都是基于QWindow这种底层窗口的，那么这种窗口能和常用的QWidget窗口搭配使用吗？ 答案是可以的。

在QWidget类型中提供了一个静态函数，用于根据一个QWindow窗口来创建一个QWidget窗口，将指定的QWindow窗口包含在内。

[static] QWidget *QWidget::createWindowContainer(QWindow *window, QWidget *parent = nullptr, Qt::WindowFlags flags = Qt::WindowFlags())

有了创建出来的这个QWidget窗口，那么QT数据可视化框架中的图形窗口，就可以和QWidget搭配使用了。

Q3DBars和QWidget组合应用实例运行效果

QT数据可视化框架三维柱状图窗口和QWidget窗口搭配使用的应用实例运行效果如下所示。

源码

ButianyunWidget具体源码如下所示。

#include "butianyunwidget.h"
#include <Q3DBars>
#include <QBar3DSeries>
#include <QVBoxLayout>
#include <QPushButton>

ButianyunWidget::ButianyunWidget(QWidget *parent)
    : QWidget(parent)
{
	//垂直布局
    QVBoxLayout* main_layout = new QVBoxLayout();
    setLayout(main_layout);

	//按钮控件
    QPushButton* button_a = new QPushButton(QStringLiteral("补天云QT系列视频课程"));
    main_layout->addWidget(button_a);

	//QT数据可视化框架三维柱状图，是一个QWindow窗口
    Q3DBars* bars = new Q3DBars(nullptr);
    bars->setFlags(bars->flags() | Qt::FramelessWindowHint);
    bars->rowAxis()->setRange(0, 2);
    bars->columnAxis()->setRange(0, 5);

    QBar3DSeries* series = new QBar3DSeries();
    QBarDataRow* row = new QBarDataRow();
    *row << 1.0f << 3.0f << 5.0f << 7.0f << 9.0f;
    series->dataProxy()->addRow(row);
    bars->addSeries(series);

	//创建出一个QWidget窗口
    QWidget* bars_widget = QWidget::createWindowContainer(bars);
    main_layout->addWidget(bars_widget);

	//按钮控件
    QPushButton* button_b = new QPushButton(QStringLiteral("补天云QT技术培训专家"));
    main_layout->addWidget(button_b);
}

QT数据可视化框架多系列三维柱状图

运行效果

使用QT数据可视化框架创建的包含三个序列的三维柱状图的运行效果如下所示。这三个序列使用的颜色分别是红色、绿色和蓝色。在这个实例中，由于设置了坐标轴的标签和格式字符串，当用户选中某一个柱体时，将会显示出该柱体的一些信息。

源码

源码如下所示。

ButianyunWidget::ButianyunWidget(QWidget *parent)
    : QWidget(parent)
{
    QVBoxLayout* main_layout = new QVBoxLayout();
    setLayout(main_layout);

    Q3DBars* bars = new Q3DBars(nullptr);
    bars->setShadowQuality(QAbstract3DGraph::ShadowQualityNone);
    bars->setFlags(bars->flags() | Qt::FramelessWindowHint);

	//X轴(列）的标题
    bars->columnAxis()->setTitle(QStringLiteral("季度"));
    //X轴标题可见
    bars->columnAxis()->setTitleVisible(true);

	//X轴的标签，每一列（也就是每一个数据点）对应一个标签
    QStringList labels_column;
    labels_column << QStringLiteral("第一季度") << QStringLiteral("第二季度")
               << QStringLiteral("第三季度") << QStringLiteral("第四季度");
    bars->columnAxis()->setLabels(labels_column);
    bars->columnAxis()->setRange(0, 4);

	//Y轴（高）的标题
    bars->valueAxis()->setTitle(QStringLiteral("学员数量"));
    //Y轴的标签格式字符串
    bars->valueAxis()->setLabelFormat(QStringLiteral("%.0f 千个"));
    bars->valueAxis()->setRange(0, 100);

	//三个序列的颜色
    const QColor colors[] = {QColor(255, 0, 0), QColor(0, 255, 0), QColor(0, 0, 255)};
    //三个序列的名称
    const QString names[] = {QStringLiteral("2021年"), QStringLiteral("2022年"), QStringLiteral("2023年")};
    //依次创建三个序列并加入到三维柱状图中
    for (int i = 0; i < 3; i++)
    {
        QBar3DSeries* series = new QBar3DSeries();
        series->setName(names[i]);
        series->setBaseColor(colors[i]);
        series->setItemLabelFormat((QStringLiteral("@seriesName @colLabel @valueTitle: @valueLabel")));
        QBarDataRow* row = new QBarDataRow();
        *row << 10.0f + i * 30 << 30.0f + i * 20 << 50.0f + i * 10 << 70.0f + i * 10;
        series->dataProxy()->addRow(row);
        bars->addSeries(series);
    }

    QWidget* bars_widget = QWidget::createWindowContainer(bars);
    main_layout->addWidget(bars_widget);
}

总结

本文介绍了QT数据可视化框架（QT DataVisualization 模块）编程实战之三维柱状图(Q3DBars)的一些常规用法。包括三维柱状图组件的介绍，入门应用实例，QT数据可视化框架和QWidget窗口组合应用实例，以及多系列三维柱状图的应用实例。还包括对三维柱状图的标签(label)和标题(title)的应用实例的介绍。

如果您认为这篇文章对您有所帮助，请您一定立即点赞+喜欢+收藏，本文作者将能从您的点赞+喜欢+收藏中获取到创作新的好文章的动力。如果您认为作者写的文章还有一些参考价值，您也可以关注这篇文章的作者。