浏览器市场分析数据大屏数据接入

浏览器市场分析-大屏数据接入1 实验目的本实验基于《浏览器市场分析-数据大屏静态布局制作》完成的大屏布局使用助睿Max的蓝图编辑器将之前实验加工好的数据表接入到大屏的各个图表组件中使图表能够动态展示真实数据。通过本实验学生应掌握2 实验环境实验平台助睿在线实验平台平台说明本次实验使用助睿数智Uniplore一站式数据科学平台覆盖数据接入、ETL处理、机器学习建模到可视化展示的全链路零代码功能。可视化工具助睿Max数据大屏数据来源团队私有数据库MySQL3 实验数据本实验使用上一实验加工完成的大屏一目标表共6张表4 蓝图编辑器概述4.1 什么是蓝图编辑器蓝图编辑器是助睿Max中用于配置数据流和交互逻辑的可视化编程工具。它采用“节点-连线”的方式帮助您自由管理可视化应用中多个组件之间的交互关系。蓝图编辑器的优势保证交互和数据的实时性和同步性支持数据请求合并和数据分发功能可模块化拆分专注单个交互链路无需关注代码规范只需专注于业务规则和交互需求4.2 核心概念5 实验步骤5.1 创建数据库数据源首先创建连接团队私有数据库的数据源。进入数据大屏平台后点击【我的数据】。点击【新建】→【新建数据源】。输入团队私有数据库的连接信息点击【立即添加】。切换tab选项再切回“我的数据”即可看到新添加的团队私有数据库。5.2 组件导出到蓝图编辑器只有当组件导入到蓝图编辑器后才可以为该组件配置交互。打开上一实验制作的“市场分析”数据大屏。在画布编辑器内右键单击左侧图层栏或中间画布区的组件选择【导出到蓝图编辑器】即可将对应组件导出到蓝图编辑器中。同样的依次把所有需要接入数据的组件导出到蓝图编辑器中。导出成功后单击【蓝图编辑器】图标切换到蓝图编辑器页面可在导入节点列表中查看对应的节点。列表内所有节点都可供后续配置交互使用。5.3 添加全局节点在蓝图编辑器里从【逻辑节点】面板中将需要使用的逻辑节点拖入中间画布中。逻辑节点包括全局节点、数据处理类节点、流程控制类节点以及输入设备类节点。首先添加全局节点画布中自动添加1个全局节点。全局节点可用于在大屏打开时自动执行后续操作如加载数据。5.4 为市场格局3个图表配置数据市场格局区域包含3个图表浏览器用户数柱状图、浏览器使用时长占比饼图、人均使用时长柱状图。这3个图表数据均来自 browser_coverage 表可以通过一个SQL请求获取所有数据然后分发到三个图表。5.4.1 添加SQL请求节点从逻辑节点面板中拖拽【SQL请求】节点到画布并将全局节点的“页面初始化完成”输出接口连接到SQL请求节点的“执行SQL”输入接口。点击SQL请求节点在配置面板中数据源选择“团队私有数据库”SQL类型选择“查询”处理方法代码框中输入以下SQLlet sql selectbrowser_name as x,user_count as y1,round(total_duration_sec/3600,0) as y2,round((total_duration_sec/3600)/user_count,1) as y3from labs.browser_coverageorder by browser_namereturn sql5.4.2 并行数据处理在蓝图编辑器中可以通过并行数据处理节点将同一个SQL查询的结果分发到多个图表每个图表提取自己需要的字段。步骤1添加并行数据处理节点从逻辑节点面板中拖拽【并行数据处理】节点到画布。步骤2添加处理方法在并行数据处理节点的配置面板中点击“”添加3个处理方法分别命名为各浏览器用户数各浏览器总使用时长各浏览器人均使用时长步骤3连接SQL请求节点到处理方法将SQL请求节点的“执行成功”输出接口分别连接到3个处理方法的输入接口。步骤4编写处理方法代码根据图表的数据接口映射格式处理查询结果。在画布编辑器界面选择图表可在【数据】tab中查看数据接口映射格式各图表需要的字段各浏览器用户数处理方法代码return data.map(item ({x: item.x,y: item.y1,s: 用户数}));各浏览器总使用时长处理方法代码return data.map(item ({name: item.x,value: item.y2}));各浏览器人均使用时长处理方法代码return data.map(item ({x: item.x,y: item.y3,s: 人均时长(小时)}));5.4.3 添加图表节点从左侧导入节点列表中将以下3个图表节点拖拽到画布中浏览器用户数柱状图浏览器使用时长占比人均使用时长柱状图将并行数据处理节点的3个处理方法的输出接口分别连接到对应图表的“导入数据接口”。5.4.4 保存并预览点击【保存】预览数据是否符合预期。常见问题处理如果预览时出现图表数据未正确显示可检查图表的数据请求方式设置。在画布编辑器中选择图表将数据请求方式设置为“Defer”请求完成后再渲染避免数据未到先渲染。饼图样式优化在画布编辑器中选择浏览器使用时长占比饼图在数据系列中调整每个系列的内外半径使饼图更协调。5.5 为指标区域图表配置数据指标区域包含4个数字翻牌器总使用时长、人均使用时长、活跃用户占比、重度用户占比。数据来自 browser_overview 表。5.5.1 添加SQL请求节点拖拽【SQL请求】节点到画布连接到全局节点。配置如下let sql select metric_name, metric_value from labs.browser_overviewreturn sql该查询返回一个数组格式如下[{metric_name: 总使用时长, metric_value: 456800.00},{metric_name: 人均使用时长, metric_value: 8.20},{metric_name: 活跃用户占比, metric_value: 71.30},{metric_name: 重度用户占比, metric_value: 23.50}]5.5.2 并行数据处理添加并行数据处理节点添加4个处理方法总使用时长、人均使用时长、活跃用户占比、重度用户占比。处理方法代码总使用时长var item data.find(d d.metric_name 总使用时长);return [{ value: item ? item.metric_value : 0 }];人均使用时长var item data.find(d d.metric_name 人均使用时长);return [{ value: item ? item.metric_value : 0 }];活跃用户占比var item data.find(d d.metric_name 活跃用户占比);return [{ value: item ? item.metric_value : 0 }];重度用户占比var item data.find(d d.metric_name 重度用户占比);return [{ value: item ? item.metric_value : 0 }];5.5.3 添加图表节点从导入节点列表中拖拽4个数字翻牌器节点到画布将处理方法的输出接口连接到对应图表的“导入数据接口”。5.5.4 保存并预览点击【保存】预览数据是否符合预期。5.6 为工作日vs周末使用时长图表配置数据5.6.1 添加SQL请求节点拖拽【SQL请求】节点到画布连接到全局节点。配置如下let sql selectbrowser_name as x,avg_duration_sec as y,day_type as sfrom labs.browser_weekday_weekendorder by browser_name, day_typereturn sql5.6.2 添加图表节点从导入节点列表中拖拽“工作日vs周末使用时长”节点到画布将SQL请求节点的“执行成功”输出接口连接到图表的“导入数据接口”。5.6.3 保存并预览点击【保存】预览数据是否符合预期。5.7 为24小时活跃用户分布图表配置数据5.7.1 添加SQL请求节点拖拽【SQL请求】节点到画布连接到全局节点。配置如下let sql select hour as x,active_user_count as y,browser_name as sfrom labs.browser_hourlyorder by browser_name, hourreturn sql5.7.2 添加图表节点从导入节点列表中拖拽“24小时活跃用户分布”节点到画布将SQL请求节点的“执行成功”输出接口连接到图表的“导入数据接口”。5.7.3 设置图表颜色图例颜色跟随折线上的标签点颜色变化。为使折线、标签点、图例颜色一致需要在画布编辑器中设置颜色。该折线图有6个图例6个浏览器需要设置6个系列的折线和标记颜色。5.7.4 保存并预览点击【保存】预览数据是否符合预期。5.8 为周活跃用户变化图表配置数据5.8.1 添加SQL请求节点拖拽【SQL请求】节点到画布连接到全局节点。配置如下let sql select week_range as x,active_user_count as y,browser_name as sfrom labs.browser_weekly_activeorder by browser_name, week_rangereturn sql5.8.2 添加图表节点从导入节点列表中拖拽“浏览器周活跃用户数变化”节点到画布将SQL请求节点的“执行成功”输出接口连接到图表的“导入数据接口”。5.8.3 设置图表颜色同样需要设置6个浏览器的颜色保持与24小时活跃分布图表一致。5.8.4 保存并预览点击【保存】预览数据是否符合预期。5.9 为使用频率分布图表配置数据5.9.1 添加SQL请求节点拖拽【SQL请求】节点到画布连接到全局节点。配置如下let sql selectbrowser_name as s,user_count as y,usage_level as xfrom labs.browser_frequency_statsorder by browser_namereturn sql5.9.2 添加图表节点从导入节点列表中拖拽“使用频率分布”节点到画布将SQL请求节点的“执行成功”输出接口连接到图表的“导入数据接口”。5.9.3 保存并预览点击【保存】预览数据是否符合预期。5.10 为浏览器使用数量分布图表配置数据5.10.1 添加SQL请求节点拖拽【SQL请求】节点到画布连接到全局节点。配置如下let sql selectbrowser_count as name,user_count as valuefrom labs.browser_multi_usageorder by browser_countreturn sql5.10.2 添加图表节点从导入节点列表中拖拽“浏览器使用数量分布”节点到画布将SQL请求节点的“执行成功”输出接口连接到图表的“导入数据接口”。5.10.3 保存并预览点击【保存】预览数据是否符合预期。5.11 完整的蓝图编辑器连线图所有图表数据接入配置完成后蓝图编辑器中的完整连线图如下5.12 预览并发布组件样式和数据都配置完成后可以预览并发布可视化应用实现在线播放和演示。步骤1预览单击大屏页面右上角的【预览】图标预览可视化应用。步骤2发布预览确认无误后单击大屏页面右上角的【发布】图标。在弹出的发布对话框中单击【发布分享】。步骤3获取分享链接单击分享链接右侧的【复制】按钮即可复制分享链接。步骤4在线观看打开浏览器将复制的链接粘贴到地址栏中即可在线观看大屏。6 蓝图节点清单7 常见问题与解决问题1图表预览时显示“暂无数据”原因数据请求方式设置不正确图表在数据返回前已渲染。解决方法在画布编辑器中选择图表将数据请求方式设置为“Defer”请求完成后再渲染。问题2饼图显示不协调原因饼图内外半径设置不当。解决方法在画布编辑器中选择饼图在数据系列中调整每个系列的内外半径。问题3折线图颜色与图例不一致原因折线和标记点颜色未单独设置。解决方法在画布编辑器中选择图表点开数据系列为每个系列分别设置折线和标记颜色。问题4SQL查询结果为空原因数据库连接配置错误或SQL语法有误。解决方法检查数据源配置是否正确在SQL请求节点的处理方法中先打印SQL语句在数据库中测试检查表名是否包含正确的数据库前缀如 labs.8 实验总结8.1 技术能力提升蓝图编辑器理解掌握了蓝图编辑器的核心概念数据源、触发器、动作、变量SQL请求节点配置学会了为不同图表编写SQL查询语句从数据库获取数据并行数据处理掌握了使用并行数据处理节点将同一查询结果分发到多个图表的方法图表数据绑定理解了各图表组件的数据接口映射格式能够正确绑定数据。8.2 关键操作回顾8.3 平台优势总结8.4 后续工作本实验完成了市场分析大屏的数据接入。下一步将制作用户画像分析大屏配置大屏间的跳转交互添加浏览器筛选器支持查看全部或单个浏览器配置定时刷新实现数据实时更新附录各图表颜色配置色值见5.7.3、5.8.3节SQL查询语句见各子章节