QML 3D柱形图(Bars3D)

最新推荐文章于 2025-07-29 21:33:28 发布
最新推荐文章于 2025-07-29 21:33:28 发布
阅读量222 收藏 3
点赞数 8
CC 4.0 BY-SA版权
分类专栏： QML 文章标签： 3d QML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_44729609/article/details/149728237

3D柱形图是数据可视化中最直观的图表类型之一，它通过不同高度的立柱来展示数据在三维空间中的分布情况。Qt Data Visualization 模块中的 Bars3D 类型让开发者能够轻松创建功能丰富的交互式3D柱形图。

Bars3D 核心属性与方法

表：Bars3D 主要属性与方法

​属性/方法​​类型​​描述​​示例值​
widthreal设置图表宽度width: parent.width
heightreal设置图表高度height: parent.height
selectionModeenum选择模式(无/单项/行/列/行与列/切片)AbstractGraph3D.SelectionRow
shadowQualityenum阴影质量(无/低/中/高/软低/软中/软高)AbstractGraph3D.ShadowQualitySoftMedium
scene.activeCameraQ3DCamera控制场景相机xRotation: 45.0
themeTheme3D设置图表主题theme: Theme3D { type: Theme3D.ThemeQt }
barThicknessreal柱体厚度(0-1)0.5
barSpacingsize柱体间距(QSize)Qt.size(0.1, 0.1)
rowAxisCategory3DAxis行坐标轴rowAxis: Category3DAxis { labels: ["Q1","Q2","Q3","Q4"] }
columnAxisCategory3DAxis列坐标轴columnAxis: Category3DAxis { labels: ["2020","2021","2022"] }
valueAxisValue3DAxis值坐标轴valueAxis: Value3DAxis { min: 0; max: 100 }
addSeries()method添加数据系列bars3D.addSeries(barSeries)
removeSeries()method移除数据系列bars3D.removeSeries(barSeries)

基本实现示例

以下是一个完整的3D柱形图实现示例，展示了如何从数据模型创建动态3D柱形图：

Bars3D {
            id: bars3D
            width: parent.width
            height: parent.height

            // 设置相机视角
            scene.activeCamera.xRotation: xSlider.value
            scene.activeCamera.yRotation: ySlider.value
            // scene.activeCamera.zoomLevel: 0.8

            // 使用Qt预定义主题
            theme: Theme3D {
                type: Theme3D.ThemePrimaryColors
                font.pointSize: 12
                labelBackgroundEnabled: true
            }

            // 设置坐标轴
            rowAxis: CategoryAxis3D {
                labels: ["北京", "上海", "广州", "深圳"]
                title: "城市"
                titleVisible: true
            }

            columnAxis: CategoryAxis3D {
                labels: ["2020", "2021", "2022"]
                title: "年份"
                titleVisible: true
            }

            valueAxis: ValueAxis3D {
                title: "GDP(亿元)"
                titleVisible: true
                min: 0
                max: 40000
                labelFormat: "%.0f"
            }

            // 数据系列
            Bar3DSeries {
                id: mainSeries
                itemLabelFormat: "城市 @rowLabel - 年份 @colLabel: @valueLabel 亿元"

                // 使用ItemModelBarDataProxy代理模型数据
                ItemModelBarDataProxy {
                    itemModel: dataModel
                    rowRole: "city"    // 对应模型中的城市角色
                    columnRole: "year"  // 对应模型中的年份角色
                    valueRole: "gdp"   // 对应模型中的GDP值角色
                }
            }
        }

        // 数据模型
        ListModel {
            id: dataModel
            ListElement { city: "北京"; year: "2020"; gdp: 36103 }
            ListElement { city: "北京"; year: "2021"; gdp: 40270 }
            ListElement { city: "北京"; year: "2022"; gdp: 41611 }
            ListElement { city: "上海"; year: "2020"; gdp: 38701 }
            ListElement { city: "上海"; year: "2021"; gdp: 43215 }
            ListElement { city: "上海"; year: "2022"; gdp: 44653 }
            ListElement { city: "广州"; year: "2020"; gdp: 25019 }
            ListElement { city: "广州"; year: "2021"; gdp: 28232 }
            ListElement { city: "广州"; year: "2022"; gdp: 28839 }
            ListElement { city: "深圳"; year: "2020"; gdp: 27670 }
            ListElement { city: "深圳"; year: "2021"; gdp: 30665 }
            ListElement { city: "深圳"; year: "2022"; gdp: 32388 }
        }

        Row {
            width: parent.width
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 60
            anchors.left: parent.left
            anchors.leftMargin: 10
            spacing: 10

            Label { text: "xr: ";font.pixelSize: 16 }

            Slider {
                id: xSlider
                width: 200
                height: 30
                from: -180
                to: 180
                stepSize: 1
                value: -25
            }

            Label { text: xSlider.value; font.pixelSize: 16 }
        }

        Row {
            width: parent.width
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 30
            anchors.left: parent.left
            anchors.leftMargin: 10
            spacing: 10

            Label { text: "xy: ";font.pixelSize: 16 }

            Slider {
                id: ySlider
                width: 200
                height: 30
                from: -180
                to: 180
                stepSize: 1
                value: 40
            }

            Label { text: ySlider.value; font.pixelSize: 16 }
        }

 

动态效果与交互

3D柱形图支持丰富的动态效果和用户交互。以下示例展示了如何添加相机动画和鼠标交互：

Bars3D {
        id: bars3D
        width: parent.width
        height: parent.height

        // 设置相机视角
        scene.activeCamera.xRotation: -25
        scene.activeCamera.yRotation: 40
        // scene.activeCamera.zoomLevel: 0.8

        // 使用Qt预定义主题
        theme: Theme3D {
            type: Theme3D.ThemePrimaryColors
            font.pointSize: 12
            labelBackgroundEnabled: true
        }

        // 设置坐标轴
        rowAxis: CategoryAxis3D {
            labels: ["北京", "上海", "广州", "深圳"]
            title: "城市"
            titleVisible: true
        }

        columnAxis: CategoryAxis3D {
            labels: ["2020", "2021", "2022"]
            title: "年份"
            titleVisible: true
        }

        valueAxis: ValueAxis3D {
            title: "GDP(亿元)"
            titleVisible: true
            min: 0
            max: 40000
            labelFormat: "%.0f"
        }

        // 数据系列
        Bar3DSeries {
            id: mainSeries
            itemLabelFormat: "城市 @rowLabel - 年份 @colLabel: @valueLabel 亿元"

            // 使用ItemModelBarDataProxy代理模型数据
            ItemModelBarDataProxy {
                itemModel: dataModel
                rowRole: "city"    // 对应模型中的城市角色
                columnRole: "year"  // 对应模型中的年份角色
                valueRole: "gdp"   // 对应模型中的GDP值角色
            }
        }
    }

    // 数据模型
    ListModel {
        id: dataModel
        ListElement { city: "北京"; year: "2020"; gdp: 36103 }
        ListElement { city: "北京"; year: "2021"; gdp: 40270 }
        ListElement { city: "北京"; year: "2022"; gdp: 41611 }
        ListElement { city: "上海"; year: "2020"; gdp: 38701 }
        ListElement { city: "上海"; year: "2021"; gdp: 43215 }
        ListElement { city: "上海"; year: "2022"; gdp: 44653 }
        ListElement { city: "广州"; year: "2020"; gdp: 25019 }
        ListElement { city: "广州"; year: "2021"; gdp: 28232 }
        ListElement { city: "广州"; year: "2022"; gdp: 28839 }
        ListElement { city: "深圳"; year: "2020"; gdp: 27670 }
        ListElement { city: "深圳"; year: "2021"; gdp: 30665 }
        ListElement { city: "深圳"; year: "2022"; gdp: 32388 }
    }

    // 在Bars3D定义后添加动画
    SequentialAnimation {
        id: cameraAnimation
        running: true
        loops: Animation.Infinite

        NumberAnimation {
            target: bars3D.scene.activeCamera
            property: "xRotation"
            from: 20.0
            to: 60.0
            duration: 5000
            easing.type: Easing.InOutQuad
        }

        NumberAnimation {
            target: bars3D.scene.activeCamera
            property: "yRotation"
            from: 10.0
            to: 60.0
            duration: 5000
            easing.type: Easing.InOutCubic
        }

        // NumberAnimation {
        //     target: bars3D.scene.activeCamera
        //     property: "zoomLevel"
        //     from: 0.7
        //     to: 1.2
        //     duration: 3000
        //     easing.type: Easing.OutBack
        // }
    }

    // 添加鼠标交互区域
    MouseArea {
        anchors.fill: parent
        property point lastMousePos

        onPressed: {
            lastMousePos = Qt.point(mouseX, mouseY)
            cameraAnimation.stop()
        }

        onPositionChanged: {
            if (pressed) {
                var dx = mouseX - lastMousePos.x
                var dy = mouseY - lastMousePos.y
                bars3D.scene.activeCamera.xRotation += dy * 0.1
                bars3D.scene.activeCamera.yRotation -= dx * 0.1
                lastMousePos = Qt.point(mouseX, mouseY)
            }
        }

        onWheel: {
            bars3D.scene.activeCamera.zoomLevel += wheel.angleDelta.y * 0.05
        }
    }

 

qml加载3D模型的问题
weixin_41392061的博客
09-05 996
2、.obj格式的模型文件，以上三个条件都满足，则可以使用qt6或者qt5自带的balsam.exe解析模型数据，转化为qml文件。.fbx格式的模型数据只可以用qt6自带的balsam.exe解析模型，会解析出带贴图的代码。若用qt5自带的balsam.exe解析模型。不会解析出带贴图的程序，只会是基础颜色的。1、我们可以使用.obj和.fbx格式的3D模型。注意的是：.obj格式的模型需要.mtl文件,材质贴图保持在一个文件内。需要打开.mtl文件，使得贴图的路径对应我们的材质贴图的路径。
高级QML 3D组件开发
QT性能优化QT原理源码QT界面美化
09-20 2942
3D组件概述3D组件概述在QT和QML的世界里，3D组件是构建三维图形界面和交互体验的核心。随着技术的发展，QT已经提供了强大的3D图形支持，使得开发复杂的三维应用变得触手可及。本章将介绍3D组件的基础知识，包括3D图形的基本概念、QT中3D组件的架构以及如何使用QML来创建和操控3D对象。3D图形基础3D图形学是计算机图形学的一个分支，它涉及到创建和渲染三维空间中的图像。在3D图形中，我们通常需要处理以下几个基本概念,顶点(Vertex)
QML中的3D功能--模型导入与修改
深之JohnChen的专栏
04-19 1087
在Qt 3D中导入和修改3D模型是开发3D应用程序的基础。
QML 简易柱形图的绘制
一个程序猿的工作知识深化日常
04-19 1748
QML简单柱形图的绘制
Qml-View3D的使用
u013125105的博客
11-12 1330
1.在View3D中显示一个三维场景需要：场景 和 Camera;场景由模型(Model）和灯光组成；模型(Model)需要网格（mesh）和材质组成。
【QML】QML性能优化 | 3D场景优化
iriczhao的博客
09-16 1156
使用QML来做3D应用开发，优化3D场景和优化设计对3D应用程序将有着显著性能影响。本文描述几种优化3D场景的规则和方法。本文多数内容和观点参考于官方文档，并结合自己的实际使用整理完成。
qml 3d实现鼠标左键控制摄像机旋转
yu_20501253的博客
10-10 1730
在qml 3d开发中,默认的是鼠标右键控制摄像机旋转,这不太符合操作习惯.要实现鼠标左键控制摄像机旋转就要重写鼠标事MouseArea,现将代码整理如下: MouseArea{ id:mouseId width: 300 height: 200 anchors.top: parent.top anchors.topMargin: 0 ancho
QML 3D 操作鼠标选择对象、界面拖拽与缩放
易衍玖
05-07 1833
使用的qt Design Studio 旋转的基本思想是工件不动，令相机绕工件旋转，镜头拉近即为放大，远离为缩小。 MouseArea { id:sss x: 0 y: 0 anchors.fill:view3D Connections { target: sss property int cx: 0 //缓存一下鼠标位置
Qt6 中的 Qt Quick QML 3D：现代化 UI 和 3D 渲染的强大工具
weixin_73414031的博客
09-29 1712
是 Qt6 中的一个模块，专门用于简化 3D 内容在 QML 环境中的使用。它将 Qt Quick 的灵活性与 3D 渲染功能结合在一起，使开发者能够直接通过 QML 编写 3D 场景，而不需要深入了解底层的 OpenGL 或 Vulkan 等图形接口。这个模块特别适用于希望通过 QML 快速构建 3D 场景和交互的开发者，比如创建增强现实、游戏开发、数据可视化以及用户界面中的 3D 动画效果。Qt6 中的。
qml 3d的几个小例子，如3D模型渲染、缩放、旋转
09-14
开发者可以通过import语句轻松地在QML文件中引入Qt Quick 3D提供的各种三维元素。例如，使用Model组件可以加载外部定义的3D模型，通过设置光源和相机可以控制场景的光照和视角。为了增强用户体验，QML还支持对3D模型...
canvas3d_qml3d效果_qt3d效果_canvas3d_qt3d_qtgui_
09-28
在本主题中，我们将深入探讨如何在Qt框架中利用Canvas3D和QML3D以及Qt3D来创建丰富的3D图形效果。Qt是一个强大的跨平台应用开发框架，支持多种编程语言，包括C++和QML。Canvas3D是Qt中的一个模块，它允许开发者在...
QML-轮播效果图-3D轮播效果效果图
11-24
在本文中，我们将深入探讨QML（Qt Meta Language）中的轮播效果，特别是3D轮播效果的实现，这是对UI设计的一种高级应用，适用于创建动态、吸引人的用户界面。QML是Qt框架的一部分，它提供了一种声明式语言来构建用户...
Qml饼状图QmlChartView.7z
07-20
在这个场景中，"Qml饼状图QmlChartView.7z" 提供的资源很可能是一个关于如何在QML中创建和展示饼状图的示例或库。 饼状图是一种常见的数据可视化工具，用于显示数据比例关系。在QML中，我们可以使用QmlChartView...
腾讯混元3D大模型Hunyuan3D-2.1版图片转3D网格模型软件整合包
07-29 349
腾讯混元大模型Hunyuan3D-2.1版图片转3D网格模型软件免安装一键启动整合包
基于Python和OpenGL的3D暴力摩托游戏完整开发实践
nmdbbzcl的博客
07-28 1086
在现代游戏开发领域，虽然Unity和Unreal Engine等商业引擎占据主导地位，但从零开始构建3D游戏项目对于理解底层图形编程原理具有重要价值。本文将详细介绍一个完全使用Python开发的3D暴力摩托游戏，展示如何在没有商业引擎支持的情况下实现功能完整的3D驾驶游戏。# 初始化pygame和OpenGL这段代码体现了项目的核心技术选型策略。PyGame负责窗口管理和事件处理，PyOpenGL提供3D图形渲染能力，NumPy用于高效数学运算。
直播美颜SDK动态贴纸模块开发指南：从人脸关键点识别到3D贴合
q1031691172的博客
07-25 663
动态贴纸是直播美颜SDK中最具吸引力的模块之一，它不仅提升视觉趣味，还增强用户互动粘性。本文从人脸关键点识别入手，详细解析动态贴纸的驱动逻辑、2D与3D实现方式、平台适配优化与AI互动玩法，帮助开发者全面掌握从贴图到沉浸式体验的全链路开发流程，为直播、短视频、虚拟偶像等场景带来更具创意的视觉表现。
13、select_points_object_model_3d解析
最新发布
学习笔记
07-29 66
它可用于删除 3D 对象模型中稀疏填充的部分， 例如，通过在 3D 之间平滑创建的异常值或点 表面。.与点连接的所有属性 （例如，多边形或三角形）的调整方式使得 没有引用删除的点。选择 3D 对象模型的点 基于指定的属性。（input_control）object_model_3d（-数组）3D 点集的 3D 点法线的 x 分量。3D 点集的 3D 点法线的 y 分量。3D 点集的 3D 点法线的 z 分量。3D 点集的 2D 映射的行组件。3D 点集的 2D 映射的列分量。缩减的 3D 对象模型的句柄。
从声纳到Web3D展示（TODO）
fanged的专栏
07-26 258
本文探讨了多波束声纳数据的处理与3D建模方法。使用加州海峡群岛公开的XYZ格式声纳数据（包含经度、纬度和水深信息），通过QGIS和Python两种方式将其转换为GeoTIFF格式的DEM模型，并比较了IDW插值算法的效果差异。文章详细阐述了点云数据与栅格数据的区别，以及LAS/LAZ二进制点云格式的结构特点，提供了通过PDAL工具和Python代码实现XYZ到LAS格式转换的具体方法。最后介绍了将处理后的数据转换为3DTiles格式以支持Web端三维展示的技术路径，包括在Cesium平台上的应用实践。整个流
Qt OpenGL 集成：开发 3D 图形应用
编程与实战的博客
07-25 967
本文介绍了Qt中OpenGL集成开发的核心内容。Qt通过QOpenGLWidget等封装类简化了OpenGL开发流程，支持现代OpenGL特性。文章首先讲解了基础环境搭建，包括QOpenGLWidget关键函数的重写和空白窗口创建；接着详细说明了3D几何体绘制流程，包含顶点数据定义、着色器编写与缓冲对象管理；最后提到3D场景进阶需要矩阵变换和相机控制来实现模型定位和场景漫游效果。整个过程展示了Qt如何高效支持OpenGL 3D图形开发。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值