找回密码
 立即注册
收起左侧

Qt Data Visualization ,让数据3D可视化

2
回复
9138
查看
[复制链接]
累计签到:869 天
连续签到:2 天
来源: 2019-1-13 20:47:01 显示全部楼层 |阅读模式
版权声明
该文章原创于Qt开源社区(www.qter.org),作者yafeilinux,转载请注明出处!


在前面我们已经见识了Qt Charts可以非常简单地实现常见的图表,但Qt Charts只能显示平面图,如果想更进一步,让数据以3D形式进行显示,该怎么实现呢?在Qt中提供的Qt Data Visualization模块可以帮助我们快速创建3D柱形图、散点和曲面图。下面是Qt自带示例程序的效果。


今天我们来演示一个3D柱形图,实现柱形图的动态展示功能。先看下最后效果。


如果没啥感觉,那就看看动态效果吧。


开发环境:Win 7 + Qt 5.12.0
(注意:在安装Qt时需要选择安装Qt Data Visualization模块)

一、实现基本的柱形图

新建空的Qt Quick应用。将main.qml内容更改如下:
import QtQuick 2.9
import QtQuick.Window 2.2
import QtDataVisualization 1.2

Window {
    visible: true
    width: 800
    height: 450

    Bars3D {
        id: bars3D
        width: parent.width
        height: parent.height
        theme: Theme3D { type: Theme3D.ThemePrimaryColors}
        scene.activeCamera.xRotation : 40.0
        scene.activeCamera.yRotation : 45.0

        Bar3DSeries {
            id: series
            itemLabelFormat: "@colLabel, @rowLabel: @valueLabel"
            ItemModelBarDataProxy {
                itemModel: dataModel
                rowRole: "year"
                columnRole: "city"
                valueRole: "expenses"
            }
        }
    }

    ListModel {
        id: dataModel
        ListElement{ year: "2018"; city: "beijing";  price: "67822"; }
        ListElement{ year: "2018"; city: "nanjing";  price: "26714"; }
        ListElement{ year: "2018"; city: "shenzhen"; price: "50900"; }
        ListElement{ year: "2018"; city: "hangzhou"; price: "30729"; }
        ListElement{ year: "2017"; city: "beijing";  price: "67951"; }
        ListElement{ year: "2017"; city: "nanjing";  price: "26127"; }
        ListElement{ year: "2017"; city: "shenzhen"; price: "46879"; }
        ListElement{ year: "2017"; city: "hangzhou"; price: "22934"; }
    }
}

这里只需要指定Bars3D、Bar3DSeries两个类型就可以实现3D柱形图,前者用来渲染3D柱形图,后者用来指定具体的图形系列,在一个Bars3D里面可以定义多个系列。scene.activeCamera用来设置场景相机,这里指定了X、Y轴上的旋转角度,这样可以更好地显示图表。ItemModelBarDataProxy用来将下面ListModel中的数据映射到图形系列中,简单来说就是在3D坐标轴中X、Y、Z轴分别对应哪些数据,这里通过rowRole、columnRole和valueRole三个属性来指定。itemLabelFormat用来设置点击一个具体的柱形时显示标签的格式。通过下面的运行效果图,可以更加清楚地看到它们的对应关系。


这里使用theme属性指定了3D柱形图的主题样式,咱们使用了现成的主题。Qt自带了9个现成可用的主题,部分效果如下图所示。

   

二、使用自定义主题

很多时候自带的主题并不能满足我们的需求,这时就需要自定义主题。在根对象中添加如下代码:

ThemeColor {
    id: dynamicColor
    color: "yellow"
}

Theme3D {
    id: dynamicColorTheme
    type: Theme3D.ThemeEbony
    baseColors: [dynamicColor]
    font.pointSize: 50
    labelBorderEnabled: false
    labelBackgroundColor: "green"
    labelTextColor: "white"
    backgroundColor: "white"
    gridLineColor: "green"
}

这里通过Theme3D来定义一个3D主题,我们指定了type为现成的themeEbony主题,表明是基于该主题进行修改的。baseColors属性用来指定所有图形系列的颜色,它是一个列表,其中使用ThemeColor类型来指定颜色,因为我们现在只有一个系列,所有只指定了dynamicColor一个颜色。
下面将前面Bars3D对象的theme属性更改为:

theme: dynamicColorTheme

这时运行程序,效果如下图所示。


三、动态展示3D图表

为了更好地展示3D效果,我们使用顺序动画组执行了一系列动画,在根对象最后添加如下代码:

SequentialAnimation {
    id: cameraAnimation
    running: true

    NumberAnimation {
        target: bars3D.scene.activeCamera
        property:"xRotation"
        from: 40.0; to: 10.0
        duration: 4000
        easing.type: Easing.InOutBack
    }

    NumberAnimation {
        target: bars3D.scene.activeCamera
        property:"yRotation"
        from: 5.0; to: 45.0
        duration: 3000
        easing.type: Easing.InQuart
    }

    ColorAnimation { target:  dynamicColor;
        property: "color";
        to: "red"; duration: 2000;
        easing.type: Easing.InCirc}
    ColorAnimation {target:  dynamicColor;
        property: "color";
        to: "yellow"; duration: 2000;
        easing.type: Easing.OutCirc}

    NumberAnimation {
        target: bars3D.scene.activeCamera
        property:"xRotation"
        from: 10.0; to:40.0
        duration: 2000
        easing.type: Easing.OutQuad
    }

    ColorAnimation { target:  dynamicColorTheme;
        property: "labelBackgroundColor";
        to: "green"; duration: 1000 ;
        easing.type: Easing.OutQuad}
    ColorAnimation { target:  dynamicColorTheme;
        property: "labelTextColor";
        to: "white"; duration: 1000 ;
        easing.type: Easing.OutQuad}
    ColorAnimation { target:  dynamicColorTheme;
        property: "backgroundColor";
        to: "white"; duration: 1000;
        easing.type: Easing.OutQuad }
    ColorAnimation {target:  dynamicColorTheme;
        property: "gridLineColor";
        to: "green"; duration: 500;
        easing.type: Easing.OutQuad}

    NumberAnimation {
        target: bars3D.scene.activeCamera
        property:"zoomLevel"
        from: 75.0; to:95.0
        duration: 3000
        easing.type: Easing.InOutQuart
    }
}

这里通过NumberAnimation和ColorAnimation为相机旋转、图表颜色等添加动画效果,从而实现了动态显示3D图表的效果。为了更加炫酷,我们在执行动画前,需要对图表的默认属性值进行一些修改。

1.将ThemeColor对象中:

color: "yellow"

一行代码注释或者删除掉;

2.将Theme3D对象中几个指定颜色的属性修改为透明:
labelBackgroundColor: "transparent"
labelTextColor: "transparent"
backgroundColor: "transparent"
gridLineColor: "transparent"

3.将Bars3D对象中定义相机的语句修改如下:
scene.activeCamera.xRotation: 45.0
scene.activeCamera.yRotation: 5.0
scene.activeCamera.zoomLevel: 75

现在运行程序,就可以看到最终效果了。

总结


怎么样,是不是感觉用QML来实现这样炫酷的3D图表很简单呢?心动不如行动,抽时间打开Qt Creator,赶快来亲自测试下吧。因为这里只是新技术尝鲜演示,不是基础教程,所以如果有的小伙伴接受起来感觉困难,不要灰心,可以等我们后期的系列教程来从头学习。


源码下载:




关注微信公众号,获取最新教程文章!



本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
阿里云
回复

使用道具 举报

累计签到:179 天
连续签到:3 天
2019-8-23 15:24:27 显示全部楼层
楼主,这个Qt Charts 和 Qt Data Visualization在新版Qt5编程入门中有基础学习吗? 还有新书什么时候出呢??? 感觉自己好着急啊 等了好久了

点评

有,下个月争取上市吧!  详情 回复 发表于 2019-8-23 19:15
回复 支持 反对

使用道具 举报

累计签到:869 天
连续签到:2 天
2019-8-23 19:15:44 显示全部楼层
起个名字想泪奔 发表于 2019-8-23 15:24
楼主,这个Qt Charts 和 Qt Data Visualization在新版Qt5编程入门中有基础学习吗? 还有新书什么时候出呢? ...

有,下个月争取上市吧!
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册