QT数据可视化框架编程实战之三维柱状图_补天云QT技术培训专家
QT数据可视化框架编程实战之三维柱状图_补天云QT技术培训专家
简介
本文将介绍QT数据可视化框架编程实战之三维柱状图可视化的运行效果以及具体实现代码。
（本文广泛参考了QT数据可视化框架的例程。）
正文
QT数据可视化框架编程实战：三维柱状图可视化运行效果
QT数据可视化框架编程实战之三维柱状图可视化的运行效果如下图所示。数据按照每年12个月，每月数据对应一个三维柱体。共三个坐标轴，水平方向的两个坐标轴分别是年份和月份；垂直方向一个坐标轴是收入。
演示视频如下所示：
QT数据可视化框架编程实战之三维柱状图 补天云QT技术培训专家
读者也可以访问这个链接观看演示视频：
QT数据可视化框架编程实战之三维柱状图 补天云QT技术培训专家
主程序实现C++代码
#include <QtGui/qguiapplication.h>
#include <QtQuick/qquickview.h>
#include <QtQml/qqmlengine.h>
int main(int argc, char *argv[])
{
qputenv("QSG_RHI_BACKEND", "opengl");
QGuiApplication app(argc, argv);
QQuickView viewer;
QString extraImportPath(QStringLiteral("%1/../../../../%2"));
viewer.engine()->addImportPath(extraImportPath.arg(QGuiApplication::applicationDirPath(),
QString::fromLatin1("qml")));
viewer.setTitle(QStringLiteral("Monthly income"));
viewer.setSource(QUrl("qrc:/qml/qmlbars/main.qml"));
viewer.setResizeMode(QQuickView::SizeRootObjectToView);
viewer.setColor("black");
viewer.show();
return app.exec();
}
主场景 QML代码
main.qml文件：
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtDataVisualization
import Qt.labs.qmlmodels
pragma ComponentBehavior: Bound
Item {
id: mainview
width: 1280
height: 1024
property int buttonLayoutHeight: 180
property int currentRow
state: "landscape"
Data {
id: graphData
}
Axes {
id: graphAxes
}
property Bar3DSeries selectedSeries
selectedSeries: barSeries
function handleSelectionChange(series, position) {
if (position !== series.invalidSelectionPosition)
selectedSeries = series;
// Set tableView current row to selected bar
var rowRole = series.dataProxy.rowLabels[position.x];
var colRole;
if (barGraph.columnAxis == graphAxes.total)
colRole = "01";
else
colRole = series.dataProxy.columnLabels[position.y];
var checkTimestamp = rowRole + "-" + colRole;
if (currentRow === -1 || checkTimestamp !== graphData.model.get(currentRow).timestamp) {
var totalRows = tableView.rows;
for (var i = 0; i < totalRows; i++) {
var modelTimestamp = graphData.model.get(i).timestamp;
if (modelTimestamp === checkTimestamp) {
currentRow = i;
break;
}
}
}
}
Item {
id: dataView
anchors.right: mainview.right
anchors.bottom: mainview.bottom
Bars3D {
id: barGraph
anchors.fill: parent
shadowQuality: AbstractGraph3D.ShadowQualitySoftHigh
selectionMode: AbstractGraph3D.SelectionItem
theme: Theme3D {
type: Theme3D.ThemeEbony
labelBorderEnabled: true
font.pointSize: 35
labelBackgroundEnabled: true
colorStyle: Theme3D.ColorStyleRangeGradient
singleHighlightGradient: customGradient
ColorGradient {
id: customGradient
ColorGradientStop { position: 1.0; color: "#FFFF00" }
ColorGradientStop { position: 0.0; color: "#808000" }
}
}
barThickness: 0.7
barSpacing: Qt.size(0.5, 0.5)
barSpacingRelative: false
scene.activeCamera.cameraPreset: Camera3D.CameraPresetIsometricLeftHigh
columnAxis: graphAxes.column
rowAxis: graphAxes.row
valueAxis: graphAxes.value
Bar3DSeries {
id: barSeries
itemLabelFormat: "Income, @colLabel, @rowLabel: @valueLabel"
baseGradient: barGradient
ItemModelBarDataProxy {
id: modelProxy
itemModel: graphData.model
rowRole: "timestamp"
columnRole: "timestamp"
valueRole: "income"
rowRolePattern: /^(\d\d\d\d).*$/
columnRolePattern: /^.*-(\d\d)$/
rowRoleReplace: "\\1"
columnRoleReplace: "\\1"
multiMatchBehavior: ItemModelBarDataProxy.MMBCumulative
}
//! [3]
ColorGradient {
id: barGradient
ColorGradientStop { position: 1.0; color: "#00FF00" }
ColorGradientStop { position: 0.0; color: "#006000" }
}
onSelectedBarChanged: (position) => mainview.handleSelectionChange(barSeries,
position);
}
}
}
ColumnLayout {
id: tableViewLayout
anchors.top: parent.top
anchors.left: parent.left
HorizontalHeaderView {
id: headerView
readonly property var columnNames: ["Month", "Expenses", "Income"]
syncView: tableView
Layout.fillWidth: true
delegate: Text {
required property int index
padding: 3
text: headerView.columnNames[index]
color: barGraph.theme.labelTextColor
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}
}
TableView {
id: tableView
Layout.fillWidth: true
Layout.fillHeight: true
reuseItems: false
clip: true
model: TableModel {
id: tableModel
TableModelColumn { display: "timestamp" }
TableModelColumn { display: "expenses" }
TableModelColumn { display: "income" }
rows: graphData.modelAsJsArray
}
delegate: Rectangle {
id: delegateRoot
required property int row
required property int column
required property string display
implicitHeight: 30
implicitWidth: column === 0 ? tableView.width / 2 : tableView.width / 4
color: row === mainview.currentRow ? barGraph.theme.gridLineColor
: barGraph.theme.windowColor
border.color: row === mainview.currentRow ? barGraph.theme.labelTextColor
: barGraph.theme.gridLineColor
border.width: 1
MouseArea {
anchors.fill: parent
onClicked: mainview.currentRow = delegateRoot.row;
}
Text {
id: delegateText
anchors.verticalCenter: parent.verticalCenter
width: parent.width
anchors.leftMargin: 4
anchors.left: parent.left
anchors.right: parent.right
text: formattedText
property string formattedText: {
if (delegateRoot.column === 0) {
if (delegateRoot.display !== "") {
var pattern = /(\d\d\d\d)-(\d\d)/;
var matches = pattern.exec(delegateRoot.display);
var colIndex = parseInt(matches[2], 10) - 1;
return matches[1] + " - " + graphAxes.column.labels[colIndex];
}
} else {
return delegateRoot.display;
}
}
color: barGraph.theme.labelTextColor
horizontalAlignment: delegateRoot.column === 0 ? Text.AlignLeft
: Text.AlignHCenter
elide: Text.ElideRight
}
}
}
}
//! [2]
onCurrentRowChanged: {
var timestamp = graphData.model.get(mainview.currentRow).timestamp;
var pattern = /(\d\d\d\d)-(\d\d)/;
var matches = pattern.exec(timestamp);
var rowIndex = modelProxy.rowCategoryIndex(matches[1]);
var colIndex;
if (barGraph.columnAxis == graphAxes.total)
colIndex = 0 ;// Just one column when showing yearly totals
else
colIndex = modelProxy.columnCategoryIndex(matches[2]);
if (selectedSeries.visible)
mainview.selectedSeries.selectedBar = Qt.point(rowIndex, colIndex);
else if (barSeries.visible)
barSeries.selectedBar = Qt.point(rowIndex, colIndex);
else
secondarySeries.selectedBar = Qt.point(rowIndex, colIndex);
}
//! [2]
states: [
State {
name: "landscape"
PropertyChanges {
target: dataView
width: mainview.width / 4 * 3
height: mainview.height
}
PropertyChanges {
target: tableViewLayout
height: mainview.height - buttonLayoutHeight
anchors.right: dataView.left
anchors.left: mainview.left
anchors.bottom: undefined
}
PropertyChanges {
target: controlLayout
width: mainview.width / 4
height: buttonLayoutHeight
anchors.top: tableViewLayout.bottom
anchors.bottom: mainview.bottom
anchors.left: mainview.left
anchors.right: dataView.left
}
}
]
}
坐标轴QML代码
axes.qml文件：
import QtQuick
import QtDataVisualization
Item {
property alias column: columnAxis
property alias row: rowAxis
property alias value: valueAxis
property alias total: totalAxis
// Custom labels for columns, since the data contains abbreviated month names.
//! [0]
CategoryAxis3D {
id: columnAxis
labels: ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"]
labelAutoRotation: 30
}
CategoryAxis3D {
id: totalAxis
labels: ["Yearly total"]
labelAutoRotation: 30
}
CategoryAxis3D {
id: rowAxis
labelAutoRotation: 30
}
ValueAxis3D {
id: valueAxis
min: 0
max: 35
labelFormat: "%.2f M\u20AC"
title: "Monthly income"
labelAutoRotation: 90
}
}
数据模型定义 QML代码
data.qml文件：
import QtQuick
import QtQml.Models
Item {
property alias model: dataModel
property var modelAsJsArray: {
var arr = [];
for (var i = 0; i < dataModel.count; i++) {
var row = dataModel.get(i);
arr.push({
timestamp: row.timestamp,
expenses: row.expenses,
income: row.income
});
}
return arr;
}
ListModel {
id: dataModel
ListElement{ timestamp: "2016-01"; expenses: "-4"; income: "5" }
ListElement{ timestamp: "2016-02"; expenses: "-5"; income: "6" }
ListElement{ timestamp: "2016-03"; expenses: "-7"; income: "4" }
ListElement{ timestamp: "2016-04"; expenses: "-3"; income: "2" }
ListElement{ timestamp: "2016-05"; expenses: "-4"; income: "1" }
ListElement{ timestamp: "2016-06"; expenses: "-2"; income: "2" }
ListElement{ timestamp: "2016-07"; expenses: "-1"; income: "3" }
ListElement{ timestamp: "2016-08"; expenses: "-5"; income: "1" }
ListElement{ timestamp: "2016-09"; expenses: "-2"; income: "3" }
ListElement{ timestamp: "2016-10"; expenses: "-5"; income: "2" }
ListElement{ timestamp: "2016-11"; expenses: "-8"; income: "5" }
ListElement{ timestamp: "2016-12"; expenses: "-3"; income: "3" }
ListElement{ timestamp: "2017-01"; expenses: "-3"; income: "1" }
ListElement{ timestamp: "2017-02"; expenses: "-4"; income: "2" }
ListElement{ timestamp: "2017-03"; expenses: "-12"; income: "4" }
ListElement{ timestamp: "2017-04"; expenses: "-13"; income: "6" }
ListElement{ timestamp: "2017-05"; expenses: "-14"; income: "11" }
ListElement{ timestamp: "2017-06"; expenses: "-7"; income: "7" }
ListElement{ timestamp: "2017-07"; expenses: "-6"; income: "4" }
ListElement{ timestamp: "2017-08"; expenses: "-4"; income: "15" }
ListElement{ timestamp: "2017-09"; expenses: "-2"; income: "18" }
ListElement{ timestamp: "2017-10"; expenses: "-29"; income: "25" }
ListElement{ timestamp: "2017-11"; expenses: "-23"; income: "29" }
ListElement{ timestamp: "2017-12"; expenses: "-5"; income: "9" }
ListElement{ timestamp: "2018-01"; expenses: "-3"; income: "8" }
ListElement{ timestamp: "2018-02"; expenses: "-8"; income: "14" }
ListElement{ timestamp: "2018-03"; expenses: "-10"; income: "20" }
ListElement{ timestamp: "2018-04"; expenses: "-12"; income: "24" }
ListElement{ timestamp: "2018-05"; expenses: "-10"; income: "19" }
ListElement{ timestamp: "2018-06"; expenses: "-5"; income: "8" }
ListElement{ timestamp: "2018-07"; expenses: "-1"; income: "4" }
ListElement{ timestamp: "2018-08"; expenses: "-7"; income: "12" }
ListElement{ timestamp: "2018-09"; expenses: "-4"; income: "16" }
ListElement{ timestamp: "2018-10"; expenses: "-22"; income: "33" }
ListElement{ timestamp: "2018-11"; expenses: "-16"; income: "25" }
ListElement{ timestamp: "2018-12"; expenses: "-2"; income: "7" }
ListElement{ timestamp: "2019-01"; expenses: "-4"; income: "5" }
ListElement{ timestamp: "2019-02"; expenses: "-4"; income: "7" }
ListElement{ timestamp: "2019-03"; expenses: "-11"; income: "14" }
ListElement{ timestamp: "2019-04"; expenses: "-16"; income: "22" }
ListElement{ timestamp: "2019-05"; expenses: "-3"; income: "5" }
ListElement{ timestamp: "2019-06"; expenses: "-4"; income: "8" }
ListElement{ timestamp: "2019-07"; expenses: "-7"; income: "9" }
ListElement{ timestamp: "2019-08"; expenses: "-9"; income: "13" }
ListElement{ timestamp: "2019-09"; expenses: "-1"; income: "6" }
ListElement{ timestamp: "2019-10"; expenses: "-14"; income: "25" }
ListElement{ timestamp: "2019-11"; expenses: "-19"; income: "29" }
ListElement{ timestamp: "2019-12"; expenses: "-5"; income: "7" }
ListElement{ timestamp: "2020-01"; expenses: "-14"; income: "22" }
ListElement{ timestamp: "2020-02"; expenses: "-5"; income: "7" }
ListElement{ timestamp: "2020-03"; expenses: "-1"; income: "9" }
ListElement{ timestamp: "2020-04"; expenses: "-1"; income: "12" }
ListElement{ timestamp: "2020-05"; expenses: "-5"; income: "9" }
ListElement{ timestamp: "2020-06"; expenses: "-5"; income: "8" }
ListElement{ timestamp: "2020-07"; expenses: "-3"; income: "7" }
ListElement{ timestamp: "2020-08"; expenses: "-1"; income: "5" }
ListElement{ timestamp: "2020-09"; expenses: "-2"; income: "4" }
ListElement{ timestamp: "2020-10"; expenses: "-10"; income: "13" }
ListElement{ timestamp: "2020-11"; expenses: "-12"; income: "17" }
ListElement{ timestamp: "2020-12"; expenses: "-6"; income: "9" }
ListElement{ timestamp: "2021-01"; expenses: "-2"; income: "6" }
ListElement{ timestamp: "2021-02"; expenses: "-4"; income: "8" }
ListElement{ timestamp: "2021-03"; expenses: "-7"; income: "12" }
ListElement{ timestamp: "2021-04"; expenses: "-9"; income: "15" }
ListElement{ timestamp: "2021-05"; expenses: "-7"; income: "19" }
ListElement{ timestamp: "2021-06"; expenses: "-9"; income: "18" }
ListElement{ timestamp: "2021-07"; expenses: "-13"; income: "17" }
ListElement{ timestamp: "2021-08"; expenses: "-5"; income: "9" }
ListElement{ timestamp: "2021-09"; expenses: "-3"; income: "8" }
ListElement{ timestamp: "2021-10"; expenses: "-13"; income: "15" }
ListElement{ timestamp: "2021-11"; expenses: "-8"; income: "17" }
ListElement{ timestamp: "2021-12"; expenses: "-7"; income: "10" }
ListElement{ timestamp: "2022-01"; expenses: "-12"; income: "16" }
ListElement{ timestamp: "2022-02"; expenses: "-24"; income: "28" }
ListElement{ timestamp: "2022-03"; expenses: "-27"; income: "22" }
ListElement{ timestamp: "2022-04"; expenses: "-29"; income: "25" }
ListElement{ timestamp: "2022-05"; expenses: "-27"; income: "29" }
ListElement{ timestamp: "2022-06"; expenses: "-19"; income: "18" }
ListElement{ timestamp: "2022-07"; expenses: "-13"; income: "17" }
ListElement{ timestamp: "2022-08"; expenses: "-15"; income: "19" }
ListElement{ timestamp: "2022-09"; expenses: "-3"; income: "8" }
ListElement{ timestamp: "2022-10"; expenses: "-3"; income: "6" }
ListElement{ timestamp: "2022-11"; expenses: "-4"; income: "8" }
ListElement{ timestamp: "2022-12"; expenses: "-5"; income: "9" }
}
}
总结
本文介绍了QT数据可视化框架编程实战之三维柱状图可视化的运行效果以及具体实现代码。
如果读者对如何快速全面了解QT框架感兴趣，可以看一下这篇文章：
如果读者对如何学习QT框架有兴趣，可以看一下这篇文章：
如果您认为这篇文章对您有所帮助，请您一定立即点赞+喜欢+收藏，本文作者将能从您的点赞+喜欢+收藏中获取到创作新的好文章的动力。如果您认为作者写的文章还有一些参考价值，您也可以关注这篇文章的作者。
QT数据可视化框架编程实战之三维柱状图_补天云QT技术培训专家的更多相关文章
- D3js初探及数据可视化案例设计实战
摘要:本文以本人目前所做项目为基础,从设计的角度探讨数据可视化的设计的方法.过程和结果,起抛砖引玉之效.在技术方案上,我们采用通用web架构和d3js作为主要技术手段:考虑到项目需求,这里所做的可视化 ...
- 大数据学习day20-----spark03-----RDD编程实战案例（1 计算订单分类成交金额，2 将订单信息关联分类信息，并将这些数据存入Hbase中，3 使用Spark读取日志文件，根据Ip地址，查询地址对应的位置信息
1 RDD编程实战案例一 数据样例 字段说明: 其中cid中1代表手机,2代表家具,3代表服装 1.1 计算订单分类成交金额 需求:在给定的订单数据,根据订单的分类ID进行聚合,然后管理订单分类名称, ...
- Qt数据可视化（散点图、折线图、柱状图、盒须图、饼状图、雷达图）开发实例
目录 散点图 折线图 柱状图 水平柱状图 水平堆叠图 水平百分比柱状图 盒须图 饼状图 雷达图 Qt散点图.折线图.柱状图.盒须图.饼状图.雷达图开发实例. 在开发过程中我们会使用多各种各样的图 ...
- Qt编写数据可视化大屏界面电子看板系统
一.前言 目前大屏大数据可视化UI这块非常火,趁热也用Qt来实现一个,Qt这个一站式超大型GUI超市,没有什么他做不了的,大屏电子看板当然也不在话下,有了QSS和QPainter这两个无敌的工具组合, ...
- 前端数据可视化echarts.js使用指南
一.开篇 首先这里要感谢一下我的公司,因为公司需求上面的新颖(奇葩)的需求,让我有幸可以学习到一些好玩有趣的前端技术,前端技术中好玩而且比较实用的我想应该要数前端的数据可视化这一方面,目前市面上的数据 ...
- 使用bokeh-scala进行数据可视化
目录 前言 bokeh简介及胡扯 bokeh-scala基本代码 我的封装 总结 一.前言 最近在使用spark集群以及geotrellis框架(相关文章见http://www.cnbl ...
- 前端数据可视化echarts.js
一.echarts.js的优势与总体情况 echarts.js作为国内的IT三巨头之一的百度的推出一款相对较为成功的开源项目,总体上来说有这样的一些优点 1.容易使用 echarts.js的官方文档比 ...
- Python数据可视化编程实战pdf
Python数据可视化编程实战(高清版)PDF 百度网盘 链接:https://pan.baidu.com/s/1vAvKwCry4P4QeofW-RqZ_A 提取码:9pcd 复制这段内容后打开百度 ...
- python数据可视化编程实战PDF高清电子书
点击获取提取码:3l5m 内容简介 <Python数据可视化编程实战>是一本使用Python实现数据可视化编程的实战指南,介绍了如何使用Python最流行的库,通过60余种方法创建美观的数 ...
- Python数据可视化编程实战——导入数据
1.从csv文件导入数据 原理:with语句打开文件并绑定到对象f.不必担心在操作完资源后去关闭数据文件,with的上下文管理器会帮助处理.然后,csv.reader()方法返回reader对象,通过 ...
随机推荐
- 如何解决 CentOS 7 官方 yum 仓库无法使用的问题
一.背景介绍 2024 年 7 月 1 日,在编译基于 CentOS 7.6.1810 镜像的 Dockerfile 过程中,执行 yum install 指令时,遇到了错误:Could not re ...
- centos7 扩展硬盘
新增硬盘后 fdisk -l fdisk /dev/sdb (以后再加改成c) 阿里云叫vdb fdisk -l 注意,最好跟第一块硬盘一样! df -T 查看硬盘分区格式 注意,文件夹不能已存在的! ...
- springboot简单正确的使用构造函数注入
一个一个写构造函数太麻烦了,而且代码会显得非常多,这里我们可以采用lombok快捷注入 但是我们并不是所有的成员变量都需要进行注入,所以使用 @RequiredArgsConstrucotr 需要构造 ...
- Diffutoon下载介绍：真人视频转动漫工具，轻松获得上千点赞
最近在刷短视频的时候,偶尔能看到一些真人转动漫风的作品,看起来给人一种新鲜感,流量都还不错,简简单单跳个舞,就能获得上千个点赞~ 那么,这种视频是怎么制作的? 本期给大家介绍一款AI转绘工具Diffu ...
- RPC接口测试（六）RPC协议解析（重要！重要！重要！）
RPC协议解析 RPC(Remote Procedure Call Protocol)远程过程调用协议,它是一种通过网络从远程计算机程序上请求服务,而不需要了解底层网络技术的协议.简言之,RPC使得程 ...
- 最新SEO自动外链蜘蛛池工具促进百度快速收录使用方法介绍
此工具集成市面上所有自动外链网站的资源链接,经过合并.去重.筛选.验证 总结出最终的外链资源 ,软件实时更新 本软件将您繁杂的外链推广转为自动化进行,并且加入站群的支持,您只需要将你的站群域名粘贴到软 ...
- 【Vue】Re19 Promise
一.概述 Promise是异步编程的解决方案 异步事件的处理: 封装的异步请求函数不能立即获取结果, 通常会传入另外一个函数,在请求成功的时候将数据通过传入的函数回调出去 如果只是一个简单的请求,那么 ...
- 【Oracle】Windiws-11G 安装
教程参考: https://jingyan.baidu.com/article/363872eccfb9266e4aa16f5d.html 安装包文件目录: 注意,使用[管理员运行此文件] 然后稍等许 ...
- 【转载】 SLI导致双显卡被TensorFlow同时占用问题（Windows下） ---------- (windows环境下如何为tensorflow安装多个独立的消费级显卡）
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/qq_21368481/article/d ...
- 【Playwright+Python】系列教程（八）鉴权Authentication的使用
写在前面 还是有些絮叨的感觉,官方翻译和某些博主写那个玩楞,基本都是软件直接翻译后的产物. 读起来生硬不说,甚至有的时候不到是什么意思,真的是实在不敢恭维. 到底是什么意思? 就是你已经登陆过一次,在 ...