大家好,我是枫城,元宵佳节,祝各位良辰美景多宏愿,圆月昭昭照九州,大概意思嘛就是祝各位团团圆圆,甜甜蜜蜜,和和美美,快快乐乐( ̄▽ ̄)~■干杯□~( ̄▽ ̄) 。我再次出现的原因是为了对制作教程进行些优化,之前写的有点杂,这次做了些统一,去掉了python画图和冰墩墩取数及整理过程,想了解的可点击传送门回顾,只保留冰墩墩在帆软BI的制作步骤,以此更像篇BI类的教材。墩墩汤圆图镇楼。
一、BI制作原理
制作原理:利用已采集好的数据(目标图像的XY坐标及其三原色),在帆软BI仪表板进行布局,依次让每个像素点在其对应的位置及保持原先的色彩,以此来还原对应冰墩墩的图。
资料准备:总共分为三份资料,诸君自取,XY坐标像素集(主数据集,上传至数据区作为数据源),已处理颜色数据(工作区,调整图像配色用),冰墩墩素材(冬奥主题图片,点缀用)。
FineBI数据包.zip (5.02 M)
二、BI制作流程-数据准备
2.1、数据集预览
让我们先来瞅瞅数据集长啥样子,A列为序号列(代表元素的个数),B列为X坐标,C列为Y坐标,D,E,F列为像素点三原色,G列为其三原色的16进制显示的色值,H列则是颜色的个数。数据集如下所示:
2.2、上传至帆软BI
点击数据准备创建对应业务包,如下图所示:
将刚才的文件XY坐标像素集导入至刚创建的业务包,同时将红框字段转化为文本型,其将作为维度字段。数据集导入后状态如下图所示。
三、BI制作流程-仪表板制作
3.1、新建仪表板,选择数据来源为XY坐标系像素集,选择散点图,将X字段拖入X轴,将Y字段拖入横轴。重命名为我是x轴和我是Y轴。其中Y轴设置为轴逆序,冰墩墩在仪表板的长宽比例可以通过坐标轴设定最大最小值进行调整。如下图所示:
3.2、 将hex字段拖入颜色,将blankheader字段拖入细粒度,以此让XY的最小颗粒度到每个像素点,呈现分散状态,以此达到XY以像素点为单位展示的目的。hex和blankheader都设置成以相同点为一组。
3.3、 颜色调节 颜色这块暂时没想到快捷配色的方法,不知道从Finedb有没有对应数据库配色表,可以通过改数据库表实现配色方案快捷匹配,手动改的太累了orz。(期待后续颜色这块支持直接传颜色值 (๑•̀ㅂ•́)و✧)
--我是后续--
通过和帆软工作人员的初步交流,找到了一个可以尝试的方法(通过浏览器开发者模式直接改对应模块的样式配置),颜色区传色值的需求也成功进入需求列表(^∀^) ,在需求还未迭代前,初步可尝试方案大致步骤如下:
3.31、按F12进入开发者模式(例子用的),并选择控制台(Console),再清空当前数据。
3.32、在空白处找到对应模块,以下是我的路径
BI.designModel.widgets["ee9231a9db9a0def"].settings.chartAttr.bd9302869913cece.color.dimension.colorMap={我们要修改的内容}
PS:快捷获取路径方法:可鼠标移动至colorMap 右键点击Copy property path, 复制其对应路径。
以下为常规路径图 BI.designModel.widgets["ee9231a9db9a0def"]即该层下的路径
此为我们的要修改的目标代码,即目前未匹配的颜色模块。
修改文件我已经处理好了,FineBI数据包->已处理颜色数据,复制后将其填入到上述括号即可 (用的是JSON格式)
3.33、BI.designModel.widgets["ee9231a9db9a0def"].settings.chartAttr.bd9302869913cece.color.dimension.colorMap={已填入内容}
将这段语句填入命令栏后敲回车ENTER,使其生效,再点击下方数据和BI颜色模块进行验证,会发现对应颜色已发生变化,自此达成批量修改效果。
3.4 冰墩墩单图大概效果如下所示(未通过调整-瘦身)
3.5 其余一些图片点缀。
纯冰墩墩有点单调,故网上找了些图片,通过图片,文字组件,配合对应的冬奥会素材,利用图片组件进行最终排版,点击冰墩墩文字还能播放对应歌曲。
素材也已上传至数据包内,各位自由搭配,FineBI数据包->冰墩墩素材。
四、BI制作流程-最终效果
捣鼓捣鼓大概是以下这个效果(此处冰墩墩已瘦身,方式:XY轴最值调整)。最后祝大家早日能够人手一墩,实现冰墩墩自由。
|