【桂科版】《信息科技》八年级上册第4单元第3课 数据可视化Web页面制作

第四单元第3课数据可视化Web页面制作（桂科版）八年级上1核心素养目标3新知讲解5拓展延伸7板书设计2新知导入4课堂练习6课堂总结课后作业801核心素养目标。信息意识计算思维数字化学习与创新信息社会责任学生关注可视化系统安全规范，洞察数据交互潜在风险，树立保障系统、合理用数的责任意识。学生借案例讨论实践，投身组件组合、属性调试，探究可视化方式对数据应用的创新价值。学生剖析物联网可视化页面流程，梳理采集、设计、交互环节，理解可视化逻辑与实现原理。学生分析数据可视化页面制作案例，察觉组件特性差异，感知物联网数据呈现场景的应用表现。02新知导入学习目标1.利用可视化组件设计并制作物联网页面。2.利用可视化组件设计并制作反向控制按钮。3.能够综合应用物联网数据。02新知导入02新知导入当我们需要对事物的发展做出决策或预判事物未来的走势时，往往需要物联网将大量不同类型的数据通过可视化的方式呈现出来，以便更好地理解和分析数据，从而为决策者提供依据。例如，现代化城市管理通常要对城市交通情况进行大数据收集和处理，交通管理部门能够便捷地通过智慧大屏查看数据与指挥交通。活动背景03新知讲解你认为还有哪些方面特别需要数据可视化?请举例说说。城市治理场景城市治理中，交通路况可借热力图呈现车流拥堵分布，能源管网用动态图表展示电力、水资源输送，助力管理者实时调配资源、优化城市运行。医疗健康领域医疗领域，患者生命体征以折线图动态追踪病情，流行病传播借地图+时间轴展现路径，辅助医护精准救治、防疫部门科学防控。教育场景教育里，学生成绩用雷达图呈现学科优劣势，校园能耗、人流及可视化数据，帮教师因材施教，后勤合理规划资源，提升教学与管理效率。思考03新知讲解案例分析一壮壮使用智能农植园物联网系统时，每隔一段时间就要邀请种植专家来对农作物的生长状况进行评估和指导。为了让种植专家方便查看农作物的生长状况及其他环境数据，壮壮设计了智能农植园物联网大屏。如图4-3-2所示，专家既可以从中查看农植园中的各项环境数据，又能看到各种作物的实际生长状况，还能够根据大屏提供的信息对农作物后续种植给出正确的指导意见。图4-3-203新知讲解不同物联网设备通信协议可能有差异，集成时留意协议转换与兼容。比如部分传感器用自定义协议，需通过网关或中间件转成MQTT等通用协议，确保数据能顺利接入可视化系统，保障数据链路贯通。小贴士协议兼容03新知讲解和同学们展开讨论，说说物联网数据可视化大屏都具有哪些优点，并记录下来。序号物联网数据可视化大屏的优点1直观性：以可视化的方式呈现数据，效果更加直观和易于理解。2实时性：动态更新数据（如温湿度曲线），异常情况即时发现。3交互性：可直接操作大屏控件（如远程启停水泵），管理便捷高效。4关联性：数据变化联动设备状态（如缺水标红），体现物联网逻辑闭环。讨论03新知讲解

实验目的:利用可视化组件完成数据可视化。

实验要求:编写服务器端程序，在行空板上配置SIoT服务器，通过图表方式展示采集的温度数据。

实验器材:如表4-3-1所示。做中学设备数量行空板实验平台1表4-3-103新知讲解实验步骤:步骤一:联网分配服务器IP。电脑连接行空板后，在地址栏中输入网址“10.1.2.3”。登录行空板，选择相应的Wi-Fi热点，连接后会分配一个IP地址“192.168.31.217”(图4-3-3)，此地址即为智能农植园服务器地址。图4-3-303新知讲解步骤二:添加主题。进入“SIoT”应用界面，依次添加“环境光线”“环境温度”等相关主题，如图4-3-4所示。图4-3-4步骤三:编写程序。(1)打开编程软件，编写程序如图4-3-5所示。图4-3-503新知讲解

(2)运行程序，行空板界面如图4-3-6所示。步骤四:数据可视化编辑。

打开编程软件，点击菜单栏“可视化面板”，进入可视化页面编辑界面，从左侧“添加组件”面板中拖拽“图片文字”类组件作为环境温度主题。在右侧组件属性面板中修改属性如下:topic为“siot/环境温度”，组件描述为“环境温度”，图片为外部导入的温度图标(图4-3-7)。03新知讲解步骤五:设置数据源，测试运行。测试运行前，打开设置数据源窗口，输入服务器地址“192.168.31.217”，其余设置无须修改，点击“完成”按钮，完成数据源设置(图4-3-8)。03新知讲解

可视化组件中主要包含四个模块:基础组件、显示组件、图表组件和装饰组件。其中基础组件主要用于智能终端的交互控制，常见类型有按钮、开关、自定义开关、输入框等;显示组件主要用于数据的显示，常见类型有单行文字、多行文字、标签文字、图片文字等;图表组件主要用于数据图形化显示，常见类型有折线图、散点图、柱形图、条形图、饼图等;装饰组件主要用于装饰点缀Web页面，常见类型有色块、艺术字等。阅读03新知讲解可视化组件开发注重轻量化，避免冗余代码与复杂渲染逻辑。选用合适的图标库（如Iconfont）、简化图表动画，降低页面加载与渲染耗时，适配物联网场景对页面性能的严苛要求，保障多设备访问流畅。小贴士组件轻量化03新知讲解请使用可视化面板中的“迷你面积图”制作“土壤湿度”图表。试着与其他可视化组件组合起来使用，或调整同一组件的属性，把效果一一记录下来进行比较。马上行动操作调整内容效果呈现适用场景单组件属性修改颜色改为红-绿渐变湿度低时红色预警，高时绿色，异常更醒目实时监测预警开启曲线平滑波动曲线变平滑，趋势更清晰趋势分析展示组件组合面积图+仪表盘+报警灯趋势+数值+警报，多维度反馈现场监控大屏面积图+时间筛选器+表格可切换时段，趋势与明细数据自由查看历史数据复盘03新知讲解数据可视化大屏不仅可以实现数据的可视化显示，还可以通过“基础组件类”中的“开关”或“按钮”来实现对智能终端执行器的控制，智能终端能够将执行器的工作状态回传到服务器端的可视化大屏上(图4-3-9)或移动终端屏幕上(图4-3-10)。03新知讲解实验目的:利用可视化组件中的开关实现反向控制。实验要求:可视化大屏反向控制智能终端，同时物联网智能终端状态同步显示变化。实验器材:数据服务器、智能终端，均为行空板。实验步骤:步骤一:定义topic。因为需要在大屏及移动终端显示智能终端执行器的状态，所以需要为执行器状态定义一个主题topic为“siot/通风窗”。连接数据服务器行空板，登录SIoT服务器，增加主题topic“siot/通风窗”。做中学03新知讲解步骤二:修改程序。连接智能终端行空板，用编程软件打开之前的程序。①程序初始化部分增加订阅主题语句:

②程序初始化显示部分增加状态显示语句:③数据接收部分:当智能终端接收到来自可视化大屏或移动终端的控制命令时，打开或关闭执行器通风设备(图4-3-11)。03新知讲解步骤三:设置组件。

打开可视化组件中之前编辑的智能农植园项目，从基础组件中添加“开关按钮”，修改组件属性中的组件标题为“通风开关”，修改topic为“siot/通风窗”，修改该组件属性中的开启发送为“on”，关闭发送为“of”(图4-3-12)。03新知讲解步骤四:运行测试。运行程序，启动可视化大屏，行空板界面和大屏幕显示如图4-3-13所示。鼠标点击通风开关按钮，物联网智能终端通风窗状态会同步变化。03新知讲解请使用学习过的知识展开设计，将智能终端中的“土壤湿度状态”这一指标通过物联网大屏上的可视化组件实现互联互通。马上行动基于物联网技术，将智能终端中“土壤湿度状态”在大屏可视化呈现。先通过传感器采集数据，经智能终端处理后以JSON格式通过MQTT上传云端。大屏采用动态面积图与仪表盘组合展示，面积图以24小时为轴、0-100%湿度为纵轴，用不同颜色区分区间呈现趋势；仪表盘实时显示当前值，低于阈值触发红色预警。搭配时间筛选器、历史表格及地图组件，实现多维度查看，并设手动与自动灌溉模式，实现数据监测与设备控制互联互通，助力精准农业管理与教学实践。04课堂练习一、判断正误，正确的画”√“，错误的画”X“。物联网数据可视化只能用折线图展示，不能使用面积图。（  ）土壤湿度传感器采集的数据必须通过MQTT协议传输，否则无法可视化。（  ）在可视化大屏中，设置报警阈值后，数据超标时自动触发声光提醒属于硬件反馈。（  ）迷你面积图的颜色属性调整不会影响数据展示的准确性，仅改变视觉效果。（  ）SIoT图表适合用于短期数据监测，不适合历史数据回溯分析。（  ）X√X√X04课堂练习二、选择题以下哪种组件最适合直观展示土壤湿度的实时数值？（）

A.折线图B.仪表盘

C.面积图D.柱状图当需要在物联网大屏上同时展示多区域土壤湿度对比时，应优先选择：（）

A.时间筛选器B.历史数据表格C.区域对比地图D.警报灯组件手机APP查看年度湿度趋势首选：（）

A.动态面积图B.三维柱状图C.饼图D.散点图

BAC04课堂练习【想一想】在本单元的学习过程中，物联网应用模型分成了智能终端、数据服务器终端移动终端三层架构。思考一下，这种三层架构的模式与前面的物联网模型设计有什么不同?单元巩固学完本单元，我惊叹于万物互联的奇妙。它打破设备间的壁垒，让生活变得智能又高效。

生活里，智能快递柜是典型物联网场景。它通过网络与用户手机、快递系统相连。快递员存件时，系统录入信息并给用户发取件码；用户取件时，输入取件码或扫码开箱。这方便了快递收发，不受时间限制；提升了快递配送效率，减少快递员等待时间；还保障包裹安全，降低丢失风险，让生活更加省心。04课堂练习【试一试】在实践中，你设计的物联网应用模型可以实现反馈类型的多样化吗?是在移动终端使用蜂鸣器、彩灯等进行反馈比较合适，还是通过SIoT图表显示更为具体?或者是利用可视化组件，设计制作物联网页面更加炫酷?请选择适合自己的物联网应用反馈类型，勇敢尝试吧!物联网应用反馈类型需依场景选择。硬件声光反馈（蜂鸣器、彩灯）响应快，适合紧急预警，如大棚温湿度超标时声光报警。SIoT图表反馈以折线图等呈现数据趋势，便于长期监测与回溯，适用于科研数据统计。可视化页面反馈将动态组件集成于界面，支持交互控制，常用于智能管理平台。实际中可组合使用，如紧急情况靠声光快速响应，日常通过页面分析数据，兼顾反馈效率与信息深度。04课堂练习学习评价内容要求得分(0~10分)数据输出多样化认识多样的反馈方式;熟悉物联网中的一般数据流程;能够编写程序实现多样反馈10分数据可视助分析知道数据可视化的优势;掌握可视化的数据分析方法;懂得选择合适的图表展示数据10分数据可视化Web页面制作利用可视化组件实现物联网页面的设计与制作;利用可视化组件完成反向控制按钮的设计与制作;能够综合应用物联网数据10分05拓展延伸

除教材中运用MQTT实现数据交互，其基于发布/订阅模式，能在低带宽、不稳定网络下高效传输物联网数据。比如智能农植园场景，传感器（发布端）采集土壤湿度等数据，经MQTT协议快速推送给可视化大屏（订阅端），保障数据实时性与可靠性，适配物联网多设备、广连接需求。MQTT协议深化05拓展延伸物联网采集数据常含噪声（如传感器误报的异常值）。需进行数据清洗，通过算法（如均值滤波）剔除异常点，填充缺失值，保证可视化大屏呈现的智能农植园环境数据（如光线强度）准确，为决策分析提供可靠依据。数据清洗预处理05拓展延伸制作数据可视化Web页，可引入Vue.js等前端框架。它提供组件化开发思路，像封装“环境数据展示组件”，包含温度、湿度显示逻辑与样式，复用性强，能规范代码结构，提升开发效率，助力快速搭建交互性强的可视化页面。前端框架辅助05拓展延伸在数据可视化中，像绘制土壤湿度变化曲线这类图表，常借助HTML5的Canvas技术。Canvas提供2D绘图上下文，可通过JavaScript代码，精准控制线条绘制、颜色填充，动态渲染实时更新的物联网数据，让曲线随土壤湿度变化灵活呈现。Ca