DataV实战#2 - 无交互事件组件数据源查询时间变量传递技巧

本文涉及的产品
数据可视化DataV,5个大屏 1个月
可视分析地图(DataV-Atlas),3 个项目,100M 存储空间
简介: 对于类似翻牌器这样的带交互事件组件数据源查询时间变量传递,可以通过时间轴配置交互事件进行传递配置。但对于类似仪表盘、水位图、轮播饼图这样的无交互事件组件,该配置方式无法传入时间变量。 查询DataV官方文档无果,请教DataV专家@子墨, 找到了一个解决方式,记录如下,以供需要的同学参考。 该方案的使用数字翻牌器组件作为传递时间变量。 ## 配置数字翻牌器 第一步,配置数字翻牌

对于类似翻牌器这样的带交互事件组件数据源查询时间变量传递,可以通过时间轴配置交互事件进行传递配置。但对于类似仪表盘、水位图、轮播饼图这样的无交互事件组件,该配置方式无法传入时间变量。
查询DataV官方文档无果,请教DataV专家@子墨, 找到了一个解决方式,记录如下,以供需要的同学参考。

该方案的使用数字翻牌器组件作为传递时间变量。

配置数字翻牌器

第一步,配置数字翻牌器,添加过滤器,如下是一个过滤器demo,你也可以按自己的需求自己定义变量。

const time = Math.floor(Date.now() / 1000);
const begin = time - (time - 1518364800) % 86400;

Object.values(data).forEach((obj) => {
  obj.from_1 = time - 60 * 60;
  obj.from_2 = time - 60 * 60 * 2;
  obj.from_24 = time - 24 * 60 * 60;
  obj.to_now = time;
  obj.from_48 = time - 48 * 60 * 60;
  obj.start = begin;
  obj.yesterday_start = begin - 24 * 60 * 60;
  obj.from_0 = new Date(new Date().setHours(0, 0, 0, 0)) / 1000;
  obj.from_2_01 = obj.from_2 * 1000;
  obj.to_now_01 = obj.to_now * 1000


});

return data;

Screen Shot 2018-09-12 at 10.23.23 AM.png

配置数字翻牌器的交互事件

第二步,配置数字翻牌器的交互事件,如上案例,要使用to_now变量,做下绑定,绑定到的变量可以自己定义:
Screen Shot 2018-09-12 at 10.24.52 AM.png

注意配置后将生效勾选框勾选上。

配置无交互事件组件数据源查询

第三步,配置无交互事件组件数据源查询,比如仪表盘组件,查询配置中把变量引入:
11_33_08__09_12_2018.jpg

注意的是,使用时间变量在组件数据源查询调试时会提示错误。因为这个时间变量需要在发布或者预览时传递生效。所以当调试时,需要使用静态时间,调试完毕预览时,改成时间变量即可。

最后再次感谢DataV专家@子墨的耐心指导。

相关实践学习
DataV Board用户界面概览
本实验带领用户熟悉DataV Board这款可视化产品的用户界面
阿里云实时数仓实战 - 项目介绍及架构设计
课程简介 1)学习搭建一个数据仓库的过程,理解数据在整个数仓架构的从采集、存储、计算、输出、展示的整个业务流程。 2)整个数仓体系完全搭建在阿里云架构上,理解并学会运用各个服务组件,了解各个组件之间如何配合联动。 3 )前置知识要求   课程大纲 第一章 了解数据仓库概念 初步了解数据仓库是干什么的 第二章 按照企业开发的标准去搭建一个数据仓库 数据仓库的需求是什么 架构 怎么选型怎么购买服务器 第三章 数据生成模块 用户形成数据的一个准备 按照企业的标准,准备了十一张用户行为表 方便使用 第四章 采集模块的搭建 购买阿里云服务器 安装 JDK 安装 Flume 第五章 用户行为数据仓库 严格按照企业的标准开发 第六章 搭建业务数仓理论基础和对表的分类同步 第七章 业务数仓的搭建  业务行为数仓效果图  
目录
相关文章
|
4月前
|
数据可视化 前端开发 数据挖掘
身怀绝技的开发者们,快来DataV玩转可视化组件,开启数据新视界!
理论学习之后,实践是检验知识的最好方式。建议你动手创建一个DataV项目,将所学的知识和技能应用到实际开发中。通过实践,你可以更好地理解和掌握DataV的使用技巧,并发现其中的乐趣和挑战。
|
5月前
|
数据可视化 搜索推荐 atlas
DataV Atlas深度解析与实战应用:打造个性化地理信息可视化
阿里云DataV的Atlas功能专注于地理信息可视化,提供范围选择、边界生成和层级展示等工具,助用户轻松创建专业地图应用。通过代码示例展示了如何用Geo组件展示中国省份销售数据,强调了数据安全和性能优化的重要性。DataV Atlas简化了复杂地理信息的展示,提升了数据洞察的直观性和美感。【6月更文挑战第19天】
547 3
|
6月前
|
数据可视化
宜搭dataV的ECHART图形控件加载数据源,怎样设置才能够实现两个曲线对比分析
宜搭dataV的ECHART图形控件加载数据源,怎样设置才能够实现两个曲线对比分析
|
JavaScript 数据可视化
datav和echarts一起使用时,在datav的组件里获取不到dom元素,导致无法渲染echarts
记录一个小问题,datav和echarts一起使用时,在datav的组件里获取不到dom元素
326 1
|
数据可视化
|
SQL 数据可视化 JavaScript
DataV图表的数据筛选交互需求梳理及实现样例
本文主要对DataV大屏数据表、气泡地图等组件的筛选交互需求进行一个简单的梳理及样例实现,其中包括单字段单选筛选、单字段多选筛选、多字段共同筛选、字段级联及查询按钮的配置。
1882 3
|
自然语言处理 数据可视化 IDE
【通用行业开发部】DataV和 UE4(虚拟引擎)的大屏交互升级方案
越来越多的大屏项目 不在满足简简单单的数据展示效果,要求越来越高的客户需求也促进大屏的定位和解决方案升级。 在阿里云的DataV数据可视化大屏的基础上,与UE4(虚拟引擎)完成跨行业的结合,带来不一样的视觉效果和交互体验,使大屏的应用效果急速扩展,对应的系统方案架构也带来不一样的挑战! 这篇文章带领大家了解DataV和UE4之间的一些奇妙设计。
【通用行业开发部】DataV和 UE4(虚拟引擎)的大屏交互升级方案
|
数据可视化 大数据 定位技术
DataV-3D 地理组件
快速学习 DataV-3D 地理组件
715 0
DataV-3D 地理组件
|
数据可视化 大数据 开发者
DataV- 组件展示|学习笔记
快速学习 DataV- 基础组件展示
406 0
|
数据可视化 物联网 数据挖掘
物联网平台IOT Studio DataV组件使用测试
物联网平台web可视化开发使用大屏组件实现功能
2326 0
物联网平台IOT Studio DataV组件使用测试