这个几个DataV小技巧,教你如何避坑。

本文涉及的产品
可视分析地图(DataV-Atlas),3 个项目,100M 存储空间
日志服务 SLS,月写入数据量 50GB 1个月
简介: 现在越来越多项目使用datav了,但是datav坑点有点多,而刚刚接触datav的你可能并不知道,一些隐藏的功能特性。如果了解了这些特性,可以让你避开很多坑点,节省开发时间。

现在越来越多项目使用datav了,但是datav坑点有点多,而刚刚接触datav的你可能并不知道,一些隐藏的功能特性。如果了解了这些特性,可以让你避开很多坑点,节省开发时间。

(PS)成组:成组时datav的一个功能,是把多个组件或组,成组。相当于模块化,达到统一控制和管理的效果。图标是一个文件夹的图标;
蓝图:类似节点编程。

1、隐藏特性一:新增组件在成组的图表位置区域内就入成组不会打乱成组的图表尺寸和图表位置
我觉得很多同学刚接触datav时,都会遇到很糟心的事情。那就是当你在编辑大屏,已经基本完成了一个模块时,突然来了新需求需要往里面新增组件。可是无论你左侧的图层和组件层怎么选中怎么操作,新增的组件并不会直接在你的成组里加,而是直接在图层的最外层(最上层)。好,这时候你觉得没关系,把新增的组件拖拽进成组里就好了。

但是这时候不好的事情发生了,组和组里面的组件位置和尺寸全变了,这并不是你想要的,你被迫去全部修改了一遍,是不是觉得很糟心。其实,你只要记住一点就可以避免这样的事情发生。那就是在你每次拖拽新组件进入组里前,先把新增的组件挪到组所在的区域范围内再拖拽进组,组和组里的组件位置和尺寸就不会发生变化。

2、隐藏特性二:删除不可回退,回撤不好用
马有失蹄,人有失足。人总有出错的时候。当你不小心操作失误的时候,你下意识的按下CTRL+Z,还好,回退了。你误以为datav原来还有回退功能啊。其实不然。当你再按下一次CTRL+Z时,你就会发现。组件只会在这两个步骤发生改变,并且只是位置和尺寸的变化。
这只是小事情。如果你经历过一天中发生过4次需求变更,你删除的组件回不来了。那你绝对会痛苦哀嚎甚至怒而拍案口吐芬芳,想死的心都有了。所以,删除组件是高危操作,需要慎重,特别是大模块删除。

3、隐藏特性三:快照版本只记录发布的版本
当你看到上面那一段话,你会发出疑问:难道datav没有版本管理吗?有,但是并不完善。datav有一个快照管理功能,会记录你发布的节点,你可以选择覆盖新节点,也可以选择成为最新的节点。你可以选择任何一个快照版本成为当前的发布版本。但是,你不知道的是,快照版本只是发布的版本。而你编辑的状态永远只会记录你最新的状态。删除了就没有了,你不能像git一样切到某个历史版本进行编辑。意思就是你不能去到某个快照版本进行编辑。

4、隐藏特性四:右键蓝图空白处,可以选择取消所有的打印日志
在蓝图编辑中,避免不了需要对某个交互进行调试预览,输出事件的日志。而你可能会在调试完后忘记取消,跟你写代码总是忘记删除调试语句console.log和System.out.print一个道理。在这密密麻麻的蓝图里看着这么密集的线你都要头晕了,你早已经不记得在哪根线上使用了日志输出,界面上也没有任何记录和提示。别慌,这时你只要右键空白处就可以选择全部取消蓝图节点的打印日志了。不会吧?不会吧?你不会真的一根线一根线的去找吧?

5、隐藏特性五:执行蓝图之前,必然先执行数据过滤器,如果你有设置了数据过滤器的话
有时候,你做的datav项目里只有前端和数据组同学,是的,没有后端,没有API接口。不要惊讶,datav的数据源其实可以是静态的csv文件还可以是数据库,没有后端和API并不惊奇。但是总会有得有失,节省了人力,数据格式化工作少不了就压在前端身上了。一个SQL有时候并不能直接给你能用的数据格式,跟组件所需的格式完全匹配不上。这时,你需要写数据过滤器,进行数据转化。在复杂的交互中,你需要在跟组件交互后获得某个效果,但是需要给另一个组件导入不同的数据格式。这时候,你会发现你交互得到数据的数据源都是经过数据过滤器格式化过的。这时候,你该头疼考虑新的实现方案了。

6、隐藏特性六:数据过滤器可以写html
这一点好像在datav的文档上并没有提到。或许很多人误以为,过滤器只是请求到数据后,对数据进行处理的一个回调方法而已。其实,这里还是可以写html,意味着你可以写样式了。好处是什么呢?举个例子,当产品经理要你实现一个轮播列表,这个列表的某行或者某列要根据某个变量值展示不同的颜色,可是这个组件并没有提供这样的属性给你设置。怎么办呢?假设你的SQL或接口返回的数据是这样的:[{ name: '指标名称1', value: 0}, {name: '指标名称2', value: 1 }],你要实现当值为0的时候该行变红展示。那么你的过滤器可以这么写:
过滤器一.png
7、隐藏特性七:蓝图里导入数据接口动作不接收html
看完第六点你肯定大喜过望,以为datav其实还是很好用的嘛。那么接下来这点会把你打回原形,你还是太年轻了。假如产品经理,让你实现这个列表的同时还需要你在点击某行的时候,去跟另一个组件进行联动。在蓝图中,轮播列表组件确实带有点击行的这个事件方法,如图:
蓝图.png
也确实在点击事件中拿到数据
数据.png
好,连线另一个组件节点导入接口数据,预览测试。好,这时候你懵了,不是已经传数据过来了吗?为什么什么都不展示?是的,蓝图节点导入接口数据这个动作不接收html。这个时候你不得不吐槽:“什么玩意,啥也不是”。绕了半天又回到原点,相当于没实现。说实话datav由于局限性非常大非常多,所以非常能激发你发散思维,激发你的潜力。没事,办法总比困难多(官方吐槽:我差点信了)。其实你可以处理数据过滤器的时候,给对象加一个key, 把这行的原始数据赋值给它就行了。
那么,过滤器可以这么写:
过滤器二.png
然后,蓝图中点击事件通过串行数据处理取到数据data.dataSource。ok,问题解决。
到这里,不得不说,这全文让你看了都觉得一波三折,堪比小说情节跌宕起伏。 那么,我在这里一问,如果最后不是简单的导入数据接口就能实现,同样需要特殊样式处理怎么办?怎么办?怎么办?重要得事情要问三遍。到这里我都要爆粗口了:"卧槽"。
说实话我也不知道怎么办,我唯一想到得就是蓝图与hook相结合,有了蓝图,不代表就能完全舍弃hook。可是,轮播列表里"行"并不是子组件啊,它没有组件id, hook里没办法stage.get() 无法获取到Dom节点,麻烦事情来了。好了,口水干了,不说了。

如果你有方案记得戳我,互相学习共同进步。如果我说的不对,也请指正,谢谢。

相关实践学习
DataV Board用户界面概览
本实验带领用户熟悉DataV Board这款可视化产品的用户界面
阿里云实时数仓实战 - 项目介绍及架构设计
课程简介 1)学习搭建一个数据仓库的过程,理解数据在整个数仓架构的从采集、存储、计算、输出、展示的整个业务流程。 2)整个数仓体系完全搭建在阿里云架构上,理解并学会运用各个服务组件,了解各个组件之间如何配合联动。 3 )前置知识要求   课程大纲 第一章 了解数据仓库概念 初步了解数据仓库是干什么的 第二章 按照企业开发的标准去搭建一个数据仓库 数据仓库的需求是什么 架构 怎么选型怎么购买服务器 第三章 数据生成模块 用户形成数据的一个准备 按照企业的标准,准备了十一张用户行为表 方便使用 第四章 采集模块的搭建 购买阿里云服务器 安装 JDK 安装 Flume 第五章 用户行为数据仓库 严格按照企业的标准开发 第六章 搭建业务数仓理论基础和对表的分类同步 第七章 业务数仓的搭建  业务行为数仓效果图  
相关文章
|
SQL JSON 数据可视化
新的一年,带给你全新的DataV
2023已经到来,我们正在迎来春暖花开的新时节。在这新年到来之际,我们给广大的DataV用户带来了一份新年礼物 - 全新的DataV 7.0版本,下面小编就带大家看一看新版本中有哪些激动人心的升级。
新的一年,带给你全新的DataV
|
Web App开发 数据可视化 大数据
DataV- 基础操作|学习笔记
快速学习 DataV- 基础操作
562 0
|
3月前
|
人工智能 数据可视化 数据挖掘
|
5月前
|
数据可视化 前端开发 数据挖掘
身怀绝技的开发者们,快来DataV玩转可视化组件,开启数据新视界!
理论学习之后,实践是检验知识的最好方式。建议你动手创建一个DataV项目,将所学的知识和技能应用到实际开发中。通过实践,你可以更好地理解和掌握DataV的使用技巧,并发现其中的乐趣和挑战。
|
7月前
|
数据可视化 数据处理
DataV
DataV
194 4
|
缓存 监控 数据可视化
DataV 如何做适配
DataV 如何做适配
264 0
|
数据可视化 安全 数据挖掘
阿里云datav介绍以及如何购买
阿里云Datav是阿里巴巴集团推出的数据可视化产品,旨在为用户提供全面、高效、便捷的数据分析和可视化解决方案。它具有丰富的功能和特点,能够满足用户对于数据处理、分析和展示的各种需求。
|
监控 数据可视化 大数据
阿里云DataV数据可视化简介和购买流程
数据可视化DataV是阿里云一款数据可视化应用搭建工具,旨让更多的人看到数据可视化的魅力,帮助非专业的工程师通过图形化的界面轻松搭建专业水准的可视化应用,满足您会议展览、业务监控、风险预警、地理信息分析等多种业务的展示需求。
|
JSON 数据可视化 前端开发
久等了,两个小优化—DataV 7.0 全功能解读01
DataV7.0 新增两大功能--组件样式快速配置 & 可视化数据编辑,简单操作配置,实现数据美观!
久等了,两个小优化—DataV 7.0 全功能解读01
|
数据可视化