第6章 数据可视ppt课件.pptx

《第6章 数据可视ppt课件.pptx》由会员分享，可在线阅读，更多相关《第6章 数据可视ppt课件.pptx（24页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第6章 数据可视企想学院智能家居平台应用项目化教程第6章 数据可视企想学院l 相关知识介绍l 项目实施l 实训项目3 3l 项目描述企想学院l 项目描述4 4企想学院项目描述u 数据可视模块利用折线图形式将环境数据的变化趋势直观展示给用户，使其更易于观察和理解。5 5企想学院l 相关知识介绍6 6企想学院相关知识介绍u Qt中提供了强大的2D绘图系统，可以使用相同的API在屏幕和绘图设备上进行绘制，整个绘图系统基于QPainter，QPainterDevice和QPaintEngine三个类。u QPainter用来执行绘制的操作；QPaintDevice是一个二维空间的抽象，这个二维空间可以

2、由QPainter在上面进行绘制；QPaintEngine提供了画笔painter在不同的设备上进行绘制的统一的接口。u 绘图系统由 QPainter 完成具体的绘制操作，QPainter 类提供了大量高度优化的函数来完成 GUI 编程所需要的大部分绘制工作。它可以绘制一切想要的图形，从最简单的一条直线到其他任何复杂的图形，例如：点、线、矩形、弧形、饼状图、多边形、贝塞尔弧线等。此外，QPainter 也支持一些高级特性，例如反走样（针对文字和图形边缘）、像素混合、渐变填充和矢量路径等，QPainter 也支持线性变换，例如平移、旋转、缩放。7 7u 绘制图形企想学院相关知识介绍8 8u 绘制

3、图形u 如右侧图片所示，其绘制了具有特殊效果的艺术字“Qt” 。该部分代码首先为该部件创建了一个 QPainter 对象，用于后面的绘制。使用 setPen() 来设置画笔的颜色（淡蓝色）。通过使用 QFont 来构建我们想要的字体，setFamily()设置字体为微软雅黑、setPointSize() 设置点大小30、setItalic() 设置斜体， 然后通过 setFont() 来设置字体，最后调用 drawText() 来实现文本的绘制，这里的 rect() 是指当前窗体的显示区域，Qt:AlignCenter 指文本居中绘制。 QPainter painter(this); / 设置

4、画笔颜色 painter.setPen(QColor(0, 160, 230); / 设置字体：微软雅黑、点大小50、斜体 QFont font; font.setFamily(Microsoft YaHei); font.setPointSize(50); font.setItalic(true); painter.setFont(font); / 绘制文本painter.drawText(rect(), Qt:AlignCenter, Qt);企想学院相关知识介绍u 坐标系统由 QPainter 类控制，再加上 QPaintDevice 和 QPaintEngine，就形成了 Qt 的绘图

5、体系。QPainter：用于执行绘图操作QPaintDevice：二维空间的抽象层，可以使用 QPainter 在它上面进行绘制。QPaintEngine：提供了统一的接口，用于 QPainter 在不同的设备上进行绘制。u QPainter 逻辑坐标与 QPaintDevice 物理坐标的映射，由 QPainter 的变换矩阵（transformation matrix）、视口（viewport）和窗口（window）完成。默认情况下，物理坐标与逻辑坐标系统是重合的，QPainter 也支持坐标转换，例如：旋转、缩放。9 9u 坐标系统企想学院l 项目实施1010企想学院项目实施u 数据可视

6、模块主要通过实时监测光照参数的数值变化，并利用折线图的形式将这种变化显示出来，其中计时器的时间为1秒，纵坐标为光照值，横坐标为数值编号，其显示的个数固定为6。u 通过本项目的完成，使学生可以掌握以下技能：能够理解Qt中关于2D绘图的基本知识；能够完成坐标轴的绘制；能够利用代码监测光照值的变化并将其以折线图的形式显示出来；能够通过调试解决代码的错误提示并保证正常编译运行。11 11u 方案设计和项目目标企想学院项目实施在SmartHome项目中新建Qt设计师界面类LineChart，其主要用于实现光照参数的折线图功能，其界面布局保持默认，即如左下图所示，同时将QDialog界面的名称设置为Lin

7、eChart，如右下图所示。1212u 新建界面类文件企想学院项目实施1313u 修改界面布局控件ID控件类别控件内容btnLineQPushButton绘图u 修改主界面smart.ui的“数据可视”页中的界面布局，其布局效果如下图所示，主界面smart.ui中数据可视页控件的详细配置如下表所示：企想学院项目实施 数据可视功能主要是用于对环境参数进行监听，并将数值以折线图的形式展现给用户，使其能够直观总结出参数的变化趋势，其功能模块主要由头文件linechart.h和源文件linechart.cpp实现。其中linechart.h的具体编写步骤如下：（1）打开头文件linechart.h并修

8、改，在其首部引入其它功能的头文件，以此实现功能模块之间的交互，因此在代码#include 下一行写入如下代码：#include smart.h/导入主函数功能头文件#include QPainter/导入绘图函数头文件1414u 修改LineChart类企想学院项目实施（2）在class LineChart : public QDialog函数的public中声明所需变量，同时在private slots中对各个函数事件进行声明，其详细代码如下所示：public: explicit LineChart(QWidget *parent = 0); LineChart(); int shu6;/横

9、坐标上坐标点的数值组成的数组 float zhi6; /纵坐标上坐标点的数值组成的数组 bool panDuan;/用于判断数值是否超出范围而需要调整坐标系 QTimer *timer;/计时器private slots: void Timer(); /用于定时更新横纵坐标上的数值 void paintEvent(QPaintEvent *);/用于绘制折线图1515u 修改LineChart类企想学院项目实施对于数据可视功能源文件linechart.cpp的具体操作如下：（1）打开源文件linechart.cpp，在函数LineChart:LineChart(QWidget *parent)

10、中输入功能代码，其主要用于实现定时更新横轴坐标的数值，具体代码如下： this-setWindowTitle(光照); timer=new QTimer();/声明计时器 connect(timer,SIGNAL(timeout(),this,SLOT(Timer(); timer-start(1000);/每1秒更新一次横纵坐标上的数值 for(int i=0;i6;i+) shui=i+1; zhii=0; 1616u 修改LineChart类企想学院项目实施17 17u 修改LineChart类（2）在程序尾部插入绘图事件实现函数，这些函数均与头文件linechart.h中private

11、 slots中声明的函数一一对应，具体代码如下：/* *函数名称:Timer() *函数功能:计时器 *返回值:空 */void LineChart:Timer() for(int i=0;i5;i+) shui=shui+1;/将当前横坐标上的数值赋给前一个横坐标，造成数值向左移动 zhii=zhii+1;/将当前纵坐标上的数值赋给前一个纵坐标，造成数值向左移动 shu5=shu5+1; zhi5=Illumination_Value.toFloat();/获取光照值 update();企想学院项目实施1818u 修改LineChart类/* *函数名称:paintEvent(QPaintE

12、vent *) *函数功能:绘制光照折线图 *返回值:空 */void LineChart:paintEvent(QPaintEvent *) if(Illumination_Value.toFloat()=2000)/判断光照值是否小于等于2000 QPainter paint(this);/实例化QPainter类 paint.setRenderHint(QPainter:Antialiasing,true);/打开QPainter的反走样功能 paint.drawLine(0,250,300,250);/在前两个参数确定的坐标点到后两个参数确定的坐标点之间画线 paint.drawLin

13、e(50,0,50,300); paint.setBrush(QColor(0,0,0);/使用画刷填充 for(int i=0;i6;i+) paint.drawText(70+30*i,270,QString:number(shui);/绘制横坐标上的坐标点数值 企想学院项目实施1919u 修改smart.cpp源文件 for(int i=0;i=220) panDuan=1; break; else panDuan=0; if(panDuan) for(int i=0;i11;i+) paint.drawText(15,250-(20+20*i),QString:number(8*(20

14、+20*i);/绘制纵坐标上的坐标点数值 for(int i=0;i6;i+) paint.drawEllipse(70+30*i,250-zhii/8,5,5);/绘制椭圆用于代表数据点 企想学院项目实施2020u 修改smart.cpp源文件 for(int i=0;i5;i+) paint.drawLine(70+30*i,250-zhii/8,70+30*(i+1),250-zhii+1/8);/在两点之间绘制直线 else for(int i=0;i11;i+) paint.drawText(15,250-(20+20*i),QString:number(20+20*i); for(

15、int i=0;i6;i+) paint.drawEllipse(70+30*i,250-zhii,5,5); for(int i=0;i5;i+) paint.drawLine(70+30*i,250-zhii,70+30*(i+1),250-zhii+1); 企想学院项目实施2121u 修改Smart类（1）在LineChart类修改完毕后，继续修改对应Smart类中的代码，在其头文件smart.h中的private slots:添加如下代码：private slots:. void on_btnLine_clicked();（2）随后在源文件smart.cpp的尾部添加与头文件相对应的代

16、码：/* *函数名称:on_btnLine_clicked() *函数功能:启动折线图 *返回值:空 */void Smart:on_btnLine_clicked() LineChart a;/新建绘图界面 a.exec();企想学院项目实施将库文件lib-SmartHomeGateway-X86.so复制到项目构建目录中，随后单击Qt Creator中的运行按钮即可，通过单击界面中的“绘图”按钮其运行结果如下列图片所示：2222u 编译运行企想学院l 实训项目2323企想学院实训项目u 在原先数据可视模块的基础上添加数据选择功能，使其不仅能够绘制光照参数的折线图，还可以绘制温度参数和湿度参数的折线图，其修改后的界面如图所示：2424