《大数据可视化技术》课件 第十四章 数据大屏_第1页
《大数据可视化技术》课件 第十四章 数据大屏_第2页
《大数据可视化技术》课件 第十四章 数据大屏_第3页
《大数据可视化技术》课件 第十四章 数据大屏_第4页
《大数据可视化技术》课件 第十四章 数据大屏_第5页
已阅读5页，还剩32页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第十四章

数据大屏GOAL学习目标1了解数据大屏的概念、特点和应用场景2了解数据大屏设计的一般原则和流程3掌握数据大屏设计的基本方法4掌握利用Web前端开发技术制作静态数据大屏的方法5掌握综合利用Web前后端开发技术制作动态数据大屏的方法目录Contents14.1数据大屏简介14.2

数据大屏设计方法14.3

静态大屏制作14.4

动态大屏制作14.1数据大屏简介

数据大屏，又被称为“商业智能仪表盘（BusinessIntelligenceDashboard，BIdashboard）”或“一张图系统”，是数据可视化应用系统流行的产品形态。数据大屏本质上是将多个信息图表整合在一个页面上的单页应用，能够在统一的界面上展示在时空上存在关联的多维数据，是向用户展示关键绩效指标（KeyPerformanceIndicator，KPI）的数据可视化工具。由于数据大屏具有信息量大、集中度高、视觉效果好、支持多维分析等优势，被广泛应用于商业智能、业务监控、辅助决策、风险预警、地理分析、会议展览等多种应用场景中。14.1数据大屏简介14.2

数据大屏设计方法14.2.1设计原则一款设计良好的数据大屏作品不是图表的简单堆砌，而是兼具科学性与艺术性的软件工程产品，需要通过系统性、规范化的设计，才能满足应用需求。数据大屏的设计原则主要包括：需求导向、系统集成、科学布局、合理搭配、用户友好。（1）需求导向数据大屏是为业务服务的，业务场景不同，则大屏呈现的关键绩效指标和展示组件也不相同。因此，大屏的设计，包括图表选型、排版布局、色彩搭配、交互设计等各方面，都应当符合业务场景的实际需求，实现规范化与个性化的有机统一。14.2.1设计原则（2）系统集成系统集成包括数据集成和图表集成两层含义。其中，数据集成是指大屏应当具有单一的数据源并确保数据的完整性，从而保证报表结果的一致性、可靠性和可用性。图表集成是指图表之间应当具有互为佐证、互为补充的关系，使大屏从内在逻辑和外观样式上都是一个有机统一的整体。14.2.1设计原则（3）科学布局大屏布局不仅影响用户的视觉体验，还将引导用户观察与思考的过程，因此布局设计注重科学性与艺术性的有机统一。科学布局要求主题突出、层次分明。在设计时，通常把主要指标放在页面中部的醒目位置上，而把次要指标放在四周或角落等次要位置上。14.2.1设计原则（4）合理搭配关系说明典型图表比较指标不同类别之间的比较。条形图、折线图分布指标的时空分布或概率分布状态。热力图、仪表盘联系指标之间的相关性。散点图、平行坐标图构成指标的部分与整体之间的关系。饼图、雷达图表达“比较、分布、联系、构成”四类关系14.2.1设计原则（5）用户友好在设计大屏的图形界面和交互效果时，应尊重用户的习惯和体验，从用户的角度出发，提升产品的易读性、易理解性、交互性和用户友好特性。比如，在动态大屏中，数据的加载和刷新过程通常会有一定的延迟，可以考虑在这些时段使用过渡动画，将有助于缓解用户的焦虑情绪，从而改善用户体验。14.2.1设计原则14.2.2设计流程（1）需求分析：对业务场景进行调研，确定系统的功能需求，并完成基础数据采集工作。（2）指标抽取：根据需求，从“比较、分布、联系、构成”角度，对基础数据进行分析，抽取系统拟呈现的数据关系，即关键绩效指标，并将关键绩效指标分为主要指标、次要指标和辅助指标。（3）图表选型：为各项指标选择合适的信息图表；分析各个图表的数据需求，若基础数据不能充分满足图表要求，则需考虑补充数据。（4）界面设计：设计大屏的整体布局；设计各图表的外观样式；设计人机交互效果。开发“空气质量监测数据可视化平台”的目的，是为了展示空气质量指数的时空分布状态，为大气污染态势分析提供辅助工具。基础数据继续使用在前期任务中创建的“airpollution”数据库。14.2.3项目实战（1）需求分析根据需求，确定了5个关键绩效指标。指标之间的逻辑关系如下：K1为主要指标，是对基本情况的描述；K2、K3、K4、K5为次要指标，是对K1的分析和解释。14.2.3项目实战（2）指标抽取指标编码指标名称指标类别K1空气质量指数的排序与分类汇总主要指标K2空气质量指数的最低值与最高值次要指标K3空气质量指数与风速的关系次要指标K4空气质量指数的构成情况次要指标K5空气质量观测记录之间的聚类关系次要指标为5个关键绩效指标选择合适的图表，并分析数据需求。为了适当减少工作量，本例仅使用2018年1月1日至3日的观测数据。14.2.3项目实战（3）图表选型指标编码图表选型数据需求K1条形图、饼图34个监测站的空气质量指数。K2仪表盘34个监测站的空气质量指数。K3散点图34个监测站的空气质量指数、二分量风速。K4雷达图34个监测站的空气质量指数及6个分指数。K5平行坐标图34个监测站的空气质量指数及6种污染物的日均值。本例的界面设计效果如图所示。页面上分布着6个图表，分别是：居中显示的条形图和饼图，展示系统的主要指标——空气质量指数的排序与分类汇总结果；左上方的仪表盘，展示空气质量指数的最低值与最高值；左下方的散点图，展示空气质量指数与风速绝对值的关系；右上方的雷达图，展示空气质量指数的构成情况；右下方的平行坐标图，展示空气质量观测记录之间的聚类关系。所有图表都在时间轴的驱动下，循环显示2018年1月1日至3日的观测数据。14.2.3项目实战（4）界面设计14.3静态大屏制作14.3.1准备工作（1）创建项目目录结构14.3.1准备工作（2）准备HTML文档<!DOCTYPEhtml><htmllang="en">

<head>

<metacharset="UTF-8">

<metahttp-equiv="X-UA-Compatible"content="IE=edge">

<metaname="viewport"content="width=device-width,initial-scale=1.0">

<scriptsrc="JS/echarts.js"></script>

<scriptsrc="JS/echarts-gl.min.js"></script>

<linkrel="stylesheet"href="CSS/main.css">

<title>空气质量监测数据可视化平台</title></head><body>

<divid="gauge"></div>

<divid="scatter3D"></div>

<divid="bar"></div>

<divid="radar"></div>

<divid="parallel"></div>

<scriptsrc="JS/gauge.js"></script>

<scriptsrc="JS/scatter3D.js"></script>

<scriptsrc="JS/bar.js"></script>

<scriptsrc="JS/radar.js"></script>

<scriptsrc="JS/parallel.js"></script></body>

</html>14.3.1准备工作（3）设置元素样式body{background-color:black;}#gauge{position:absolute;top:10%;width:40%;height:50%;}#radar{position:absolute;top:10%;left:67%;width:40%;height:50%;}#parallel{position:absolute;top:35%;left:70%;width:30%;height:63%;}#scatter3D{position:absolute;top:40%;width:35%;height:50%;}#bar{position:absolute;left:27%;width:60%;height:100%;}14.3.1准备工作（4）数据准备图表数据格式仪表盘[{"name":"监测站代码","value":[AQI],...}]散点图[[纬向风速的绝对值,经向风速的绝对值,AQI],...]条形图[AQI,...]饼图[{name:"优",value:[0,频次统计]},...]雷达图[{"name":"监测站代码","value":[AQI,IAQI_PM25,IAQI_PM10,IAQI_SO2,IAQI_NO2,IAQI_CO,IAQI_O3]},...]平行坐标图[{"name":"监测站代码"","value":[PM2.5浓度,PM10浓度,SO2浓度,NO2浓度,CO浓度,O3浓度,AQI,"AQI类别"]},...]仪表盘[{"name":"监测站代码","value":[AQI],...}]在“AirPollution_Dashboard_Static/JS”目录下，新建“gauge.js”脚本，用于创建仪表盘，展示2018年1月1日至3日每日空气质量指数的最低值和最高值。由于需要使用时间轴组件实现自动播放，因此仪表盘的配置中需要分别设置基础配置项和可选配置项。14.3.2图表制作（1）仪表盘14.3.2图表制作（2）散点图在“AirPollution_Dashboard_Static/JS”目录下，新建“scatter3D.js”脚本，用于创建三维散点图，分别展示2018年1月1日至3日34个监测站的空气质量指数与风速绝对值的关系。14.3.2图表制作（3）条形图和饼图在“AirPollution_Dashboard_Static/JS”目录下，新建“bar.js”脚本，用于创建条形图和饼图，分别展示2018年1月1日至3日34个监测站空气质量指数的排序情况以及分类汇总情况。考虑到饼图的幅面较小，故将其与条形图创建在同一个图表实例中。14.3.2图表制作（4）雷达图在“AirPollution_Dashboard_Static/JS”目录下，新建“radar.js”脚本，用于创建雷达图，展示2018年1月1日至3日34个监测站空气质量指数的构成情况。14.3.2图表制作（5）平行坐标图在“AirPollution_Dashboard_Static/JS”目录下，新建“parallel.js”脚本，用于创建平行坐标图，展示2018年1月1日至3日34个监测站空气质量观测记录之间的聚类关系。14.3.2图表制作使用浏览器打开“index.html”查看数据大屏显示效果

14.4动态大屏制作14.4.1

准备工作（1）创建项目目录结构14.4.2图表制作（1）数据转换函数名称参数返回值transform(rawData)rawData：原始数据。新数据，在原始数据基础上增加了IAQI、AQI、AQI类别等8个新字段。sortAQI(dct)dct：监测站及其AQI的键值对。按照AQI排序后的键值对，用于实现条形图的排序效果。countAQI(barData)barData：条形图的数据体。饼图的数据体，通过对条形图的数据进行分类汇总得到。getGaugeJSON(data)data：新数据。JSON字符串，用于仪表盘。getScatter3DJSON(data)data：新数据。JSON字符串，用于三维散点图。getBarJSON(data)data：新数据。JSON字符串，用于条形图和饼图。getRadarJSON(data)data：新数据。JSON字符串，用于雷达图。getParaJSON(data)data：新数据。JSON字符串，用于平行坐标图。fromflaskimportFlask,render_templatefrommodelimportgetDatafrompreprocessimporttransform,getRadarJSON,getGaugeJSON,getBarJSON,getParaJSON,getScatter3DJSONapp=Flask(__name__)@app.route('/')defindex():returnrender_template('index.html')14.4.2图表制作（1）数据转换发布JSON数据接口：添加5个视图函数@app.route('/json_for_gauge')defjson_for_gauge():returngetGaugeJSON(newData)@app.route('/json_for_scatter3D')defjson_for_scatter3D():returngetScatter3DJSON(newData)@app.route('/json_for_bar')defjson_for_bar():returngetBarJSON(newData)@app.route('/json_for_radar')defjson_for_radar():

returngetRadarJSON(newData)

@app.route('/json_for_parallel')defjson_for_parallel():

returngetParaJSON(newData)

if__name__=='__main__':

sql='''

SELECTstation,pm25,pm10,so2,no2,co,o3,abs(u),abs(v)

FROM airpollutionWHERE(station='HI01' ORstation='NN01' ORstation='MO01' ORstation='HK01' ORstation='GZ01' ORstation='KM01' ORstation='TB01' ORstation='GY01' ORstation='FZ01' ORstation='CS01'ORstation='NC01' ORstation='CQ01' ORstation='LS01'14.4.2图表制作（1）数据转换发布JSON数据接口：添加5个视图函数 ORstation='CH01' ORstation='WH01' ORstation='HZ01' ORstation='SH01' ORstation='HF01' ORstation='NJ01'

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论