资源简介

中小学教育资源及组卷应用平台
第4.3课《数据可视化 Web页面制作》教学设计
课题 数据可视化 Web页面制作 单元 第四单元 学科 信息科技 年级 八年级
核心素养目标 信息意识：学生分析数据可视化页面制作案例，察觉组件特性差异，感知物联网数据呈现场景的应用表现。计算思维：学生剖析物联网可视化页面流程，梳理采集、设计、交互环节，理解可视化逻辑与实现原理。数字化学习与创新：学生借案例讨论实践，投身组件组合、属性调试，探究可视化方式对数据应用的创新价值。信息社会责任：学生关注可视化系统安全规范，洞察数据交互潜在风险，树立保障系统、合理用数的责任意识。
教学重点 学生分析数据可视化页面制作案例，察觉组件特性差异，感知物联网数据呈现场景的应用表现。
教学难点 学生关注可视化系统安全规范，洞察数据交互潜在风险，树立保障系统、合理用数的责任意识。
教学过程
教学环节 教师活动 学生活动 设计意图
导入新课 第4.3课 自动控制灌溉学习目标：1. 利用可视化组件设计并制作物联网页面。2. 利用可视化组件设计并制作反向控制按钮。3. 能够综合应用物联网数据。活动背景：当我们需要对事物的发展做出决策或预判事物未来的走势时，往往需要物联网将大量不同类型的数据通过可视化的方式呈现出来，以便更好地理解和分析数据，从而为决策者提供依据。例如，现代化城市管理通常要对城市交通情况进行大数据收集和处理，交通管理部门能够便捷地通过智慧大屏查看数据与指挥交通(图4-3-1)。 了解学习目标了解活动背景 帮助学生初步了解本课学习任务通过活动背景引导学生了解本课基本内容
讲授新课 新知讲解：一、思考： 你认为还有哪些方面特别需要数据可视化 请举例说说。城市治理场景：城市治理中，交通路况可借热力图呈现车流拥堵分布，能源管网用动态图表展示电力、水资源输送，助力管理者实时调配资源、优化城市运行。医疗健康领域：医疗领域，患者生命体征以折线图动态追踪病情，流行病传播借地图 + 时间轴展现路径，辅助医护精准救治、防疫部门科学防控。教育场景：教育里，学生成绩用雷达图呈现学科优劣势，校园能耗、人流及可视化数据，帮教师因材施教，后勤合理规划资源，提升教学与管理效率。二、案例分析一：壮壮使用智能农植园物联网系统时，每隔一段时间就要邀请种植专家来对农作物的生长状况进行评估和指导。为了让种植专家方便查看农作物的生长状况及其他环境数据，壮壮设计了智能农植园物联网大屏。如图4-3-2所示，专家既可以从中查看农植园中的各项环境数据，又能看到各种作物的实际生长状况，还能够根据大屏提供的信息对农作物后续种植给出正确的指导意见。小贴士：协议兼容不同物联网设备通信协议可能有差异，集成时留意协议转换与兼容。比如部分传感器用自定义协议，需通过网关或中间件转成 MQTT 等通用协议，确保数据能顺利接入可视化系统，保障数据链路贯通 。三、讨论：和同学们展开讨论，说说物联网数据可视化大屏都具有哪些优点，并记录下来。序号物联网数据可视化大屏的优点1直观性:以可视化的方式呈现数据，效果更加直观和易于理解。2实时性：动态更新数据（如温湿度曲线），异常情况即时发现。3交互性：可直接操作大屏控件（如远程启停水泵），管理便捷高效。4关联性：数据变化联动设备状态（如缺水标红），体现物联网逻辑闭环。四、做中学：实验目的:利用可视化组件完成数据可视化。实验要求:编写服务器端程序，在行空板上配置 SIoT服务器，通过图表方式展示采集的温度数据。实验器材:如表 4-3-1 所示。设备数量行空板实验平台1实验步骤:步骤一:联网分配服务器 IP。电脑连接行空板后，在地址栏中输入网址“10.1.2.3”。登录行空板，选择相应的Wi-Fi热点，连接后会分配一个IP地址“192.168.31.217”(图4-3-3)，此地址即为智能农植园服务器地址。步骤二:添加主题。进入“SIoT”应用界面，依次添加“环境光线”“环境温度”等相关主题，如图 4-3-4所示。步骤三:编写程序。 (1)打开编程软件，编写程序如图 4-3-5 所示。（2)运行程序，行空板界面如图 4-3-6 所示。步骤四:数据可视化编辑。打开编程软件，点击菜单栏“可视化面板”，进入可视化页面编辑界面，从左侧“添加组件”面板中拖拽“图片文字”类组件作为环境温度主题。在右侧组件属性面板中修改属性如下:topic 为“siot/ 环境温度”，组件描述为“环境温度”，图片为外部导入的温度图标(图4-3-7)。步骤五:设置数据源，测试运行。测试运行前，打开设置数据源窗口，输入服务器地址“192.168.31.217”，其余设置无须修改，点击“完成”按钮，完成数据源设置(图4-3-8)。五、阅读：可视化组件中主要包含四个模块:基础组件、显示组件、图表组件和装饰组件。其中基础组件主要用于智能终端的交互控制，常见类型有按钮、开关、自定义开关、输入框等;显示组件主要用于数据的显示，常见类型有单行文字、多行文字、标签文字、图片文字等;图表组件主要用于数据图形化显示，常见类型有折线图、散点图、柱形图、条形图、饼图等;装饰组件主要用于装饰点缀 Web 页面，常见类型有色块、艺术字等。小贴士：组件轻量化可视化组件开发注重轻量化，避免冗余代码与复杂渲染逻辑。选用合适的图标库（如 Iconfont ）、简化图表动画，降低页面加载与渲染耗时，适配物联网场景对页面性能的严苛要求，保障多设备访问流畅 。六、马上行动：请使用可视化面板中的“迷你面积图”制作“土壤湿度”图表。试着与其他可视化组件组合起来使用，或调整同一组件的属性，把效果一一记录下来进行比较。操作调整内容效果呈现适用场景单组件属性修改颜色改为红 - 绿渐变湿度低时红色预警，高时绿色，异常更醒目实时监测预警开启曲线平滑波动曲线变平滑，趋势更清晰趋势分析展示组件组合面积图 + 仪表盘 + 报警灯趋势 + 数值 + 警报，多维度反馈现场监控大屏面积图 + 时间筛选器 + 表格可切换时段，趋势与明细数据自由查看历史数据复盘数据可视化大屏不仅可以实现数据的可视化显示，还可以通过“基础组件类”中的“开关”或“按钮”来实现对智能终端执行器的控制，智能终端能够将执行器的工作状态回传到服务器端的可视化大屏上(图4-3-9)或移动终端屏幕上(图4-3-10)。七、做中学：实验目的:利用可视化组件中的开关实现反向控制。实验要求:可视化大屏反向控制智能终端，同时物联网智能终端状态同步显示变化。实验器材:数据服务器、智能终端，均为行空板。实验步骤:步骤一:定义 topic。因为需要在大屏及移动终端显示智能终端执行器的状态，所以需要为执行器状态定义一个主题 topic 为“siot/通风窗”。连接数据服务器行空板，登录 SIoT服务器，增加主题topic“siot/ 通风窗”。步骤三:设置组件。 打开可视化组件中之前编辑的智能农植园项目，从基础组件中添加“开关按钮”，修改组件属性中的组件标题为“通风开关”，修改 topic 为“siot/通风窗”，修改该组件属性中的开启发送为“on”，关闭发送为“of”(图4-3-12)。步骤四:运行测试。运行程序，启动可视化大屏，行空板界面和大屏幕显示如图 4-3-13 所示。鼠标点击通风开关按钮，物联网智能终端通风窗状态会同步变化。八、马上行动：请使用学习过的知识展开设计，将智能终端中的“土壤湿度状态”这一指标通过物联网大屏上的可视化组件实现互联互通。基于物联网技术，将智能终端中 “土壤湿度状态” 在大屏可视化呈现。先通过传感器采集数据，经智能终端处理后以 JSON 格式通过 MQTT 上传云端。大屏采用动态面积图与仪表盘组合展示，面积图以 24 小时为轴、0-100% 湿度为纵轴，用不同颜色区分区间呈现趋势；仪表盘实时显示当前值，低于阈值触发红色预警。搭配时间筛选器、历史表格及地图组件，实现多维度查看，并设手动与自动灌溉模式，实现数据监测与设备控制互联互通，助力精准农业管理与教学实践。 九、课堂练习： 完成课件25-2页的课堂练习题十、单元巩固：【想一想】在本单元的学习过程中，物联网应用模型分成了智能终端、数据服务器终端移动终端三层架构。思考一下，这种三层架构的模式与前面的物联网模型设计有什么不同 学完本单元，我惊叹于万物互联的奇妙。它打破设备间的壁垒，让生活变得智能又高效。
生活里，智能快递柜是典型物联网场景。它通过网络与用户手机、快递系统相连。快递员存件时，系统录入信息并给用户发取件码；用户取件时，输入取件码或扫码开箱。这方便了快递收发，不受时间限制；提升了快递配送效率，减少快递员等待时间；还保障包裹安全，降低丢失风险，让生活更加省心。【试一试】在实践中，你设计的物联网应用模型可以实现反馈类型的多样化吗 是在移动终端使用蜂鸣器、彩灯等进行反馈比较合适，还是通过SIoT 图表显示更为具体 或者是利用可视化组件，设计制作物联网页面更加炫酷 请选择适合自己的物联网应用反馈类型，勇敢尝试吧!物联网应用反馈类型需依场景选择。硬件声光反馈（蜂鸣器、彩灯）响应快，适合紧急预警，如大棚温湿度超标时声光报警。SIoT 图表反馈以折线图等呈现数据趋势，便于长期监测与回溯，适用于科研数据统计。可视化页面反馈将动态组件集成于界面，支持交互控制，常用于智能管理平台。实际中可组合使用，如紧急情况靠声光快速响应，日常通过页面分析数据，兼顾反馈效率与信息深度。十一、学习评价：内容要求得分(0~10分)数据输出多样化认识多样的反馈方式;熟悉物联网中的一般数据流程;能够编写程序实现多样反馈10分数据可视助分析知道数据可视化的优势;掌握可视化的数据分析方法;懂得选择合适的图表展示数据10分数据可视化Web页面制作利用可视化组件实现物联网页面的设计与制作;利用可视化组件完成反向控制按钮的设计与制作;能够综合应用物联网数据10分十二、拓展延伸：MQTT 协议深化 除教材中运用 MQTT 实现数据交互，其基于发布 / 订阅模式，能在低带宽、不稳定网络下高效传输物联网数据。比如智能农植园场景，传感器（发布端）采集土壤湿度等数据，经 MQTT 协议快速推送给可视化大屏（订阅端 ），保障数据实时性与可靠性，适配物联网多设备、广连接需求 。数据清洗预处理 物联网采集数据常含噪声（如传感器误报的异常值 ）。需进行数据清洗，通过算法（如均值滤波 ）剔除异常点，填充缺失值，保证可视化大屏呈现的智能农植园环境数据（如光线强度 ）准确，为决策分析提供可靠依据 。前端框架辅助制作数据可视化 Web 页，可引入 Vue.js 等前端框架。它提供组件化开发思路，像封装 “环境数据展示组件”，包含温度、湿度显示逻辑与样式，复用性强，能规范代码结构，提升开发效率，助力快速搭建交互性强的可视化页面。Canvas 绘图原理在数据可视化中，像绘制土壤湿度变化曲线这类图表，常借助 HTML5 的 Canvas 技术。Canvas 提供 2D 绘图上下文，可通过 JavaScript 代码，精准控制线条绘制、颜色填充，动态渲染实时更新的物联网数据，让曲线随土壤湿度变化灵活呈现 。RESTful API 应用构建物联网数据可视化系统时，数据服务器终端可通过 RESTful API 对外提供数据接口。比如智能农植园系统，客户端（可视化页面 ）发送 GET 请求，获取指定时间段的环境温度历史数据，遵循统一接口规范，便于不同终端（如移动设备 ）灵活调用数据，拓展系统数据交互能力 。 完成思考练习题阅读案例分析一阅读小贴士完成讨论题目完成做中学实验完成阅读阅读小贴士完成马上行动完成做中学完成马上行动完成课堂练习完成单元巩固完成学习评价补充五个额外知识点 通过思考练习题了解数据可视化的重要性，锻炼学生思考能力通过阅读案例分析了解数据可视化在农业中的应用了解协议兼容的相关知识总结物联网数据可视化的优点。通过完成实验学会利用可视化组件完成数据可视化通过阅读了解可视化组件的组成了解组件轻量化相关知识完成马上行动，手动设计方案，培养学生动手能力通过学习做中学实验学会反向控制通过完成马上行动学会如何将物联网和可视化组件实现互联互通培养学生独立思考能力，了解学生本节课吸收情况通过单元巩固了解学生对本单元的吸收情况，培养学生反思总结能力通过学习评价让学生回忆本单元学习内容，并根据自己学习情况打分补充学生课外知识
课堂小结 数据可视化 Web页面制作1.进行新知内容2.设计并制作物联网页面3.设计并制作反向控制按钮4.完成课题练习5.进行相关知识拓展 总结回顾 对本节课内容进行总结概括。
课后作业 完成相关填空题(详情请看课件P35页)结合物联网数据可视化知识，设计一个智能温室环境监测大屏，并与同学分享设计过程。 布置作业 拓展学生的学习能力
课堂板书 观看板书 强调教学重点内容。
21世纪教育网 www.21cnjy.com 精品试卷·第 2 页 （共 2 页）
HYPERLINK "http://www.21cnjy.com/" 21世纪教育网(www.21cnjy.com)

展开更多......

收起↑