System.ArgumentOutOfRangeException: 索引和长度必须引用该字符串内的位置。 参数名: length 在 System.String.Substring(Int32 startIndex, Int32 length) 在 zhuanliShow.Bind() 基于时间轴交互的动态选择时间范围的方法、装置及介质制造方法及图纸_技高网

基于时间轴交互的动态选择时间范围的方法、装置及介质制造方法及图纸

技术编号:39963850 阅读:8 留言:0更新日期:2024-01-09 00:15
本申请涉及前端开发技术领域,提供了一种基于时间轴交互的动态选择时间范围的方法、装置及介质。该方法包括:创建视图组件以及视图容器;对视图组件执行初始化加载操作,获取时间轴的宽度,根据时间轴的宽度以及时间轴的时间范围,计算每个像素代表的时间长度;利用滑块代表的时间长度以及每个像素代表的时间长度,确定滑块在时间轴上所占据的宽度;响应于触发滑块移动的操作,在位移过程中控制滑块在时间轴上移动;根据时间轴的起始时间以及滑块的当前位置,确定滑块左侧对应的时间,根据滑块左侧对应时间以及滑块在时间轴上所占据的宽度,确定滑块右侧对应的时间。本申请实施例解决了时间范围选择器选取时间范围不够方便的问题。

【技术实现步骤摘要】

本申请涉及前端开发,尤其涉及一种基于时间轴交互的动态选择时间范围的方法、装置及介质


技术介绍

1、随着信息技术的发展,数据可视化为商业提供了极大的便利,为了方便对数据进行针对性分析或者查询,通常由b端业务平台,也就是专门为企业之间进行商业交流、合作和交易而设计的business-to-business(b2b)业务平台提供ui框架中的时间范围选择器来选择需要查看数据的时间范围,该时间范围选择器通常以交互的方式让用户选择起始时间和结束时间,或者通过快捷按钮快速选择常用的时间段,以便进行时间段的筛选或查询。

2、但是,利用现有的时间范围选择器进行时间范围的选取时,在某些特定场景中,可能需要用户进行多个步骤或输入才能完成时间范围的选择,这种情况还可能会出现输入格式和范围的限制,或者就是只提供了有限的时间范围预设选项,无法满足用户对时间选择的便利需求。因此,现有技术存在不够便利的问题。


技术实现思路

1、有鉴于此,本申请实施例提供了一种基于时间轴交互的动态选择时间范围的方法、装置及介质,以解决现有技术中选取时间范围不够方便的问题。

2、本申请实施例的第一方面,提供了一种基于时间轴交互的动态选择时间范围的方法,包括:创建视图组件以及视图容器,视图容器用于封装时间选择器的组成部分,组成部分包括时间轴和滑块;对视图组件执行初始化加载操作,获取时间轴的宽度,根据时间轴的宽度以及时间轴的时间范围,计算每个像素代表的时间长度;利用滑块代表的时间长度以及每个像素代表的时间长度,确定滑块在时间轴上所占据的宽度;根据当前时间设置滑块的初始位置,响应于触发滑块移动的操作,记录滑块的初始位置,并在位移过程中控制滑块在时间轴上移动;当滑块位移结束后,确定滑块的当前位置,根据时间轴的起始时间以及滑块的当前位置,确定滑块左侧对应的时间,根据滑块左侧对应时间以及滑块在时间轴上所占据的宽度,确定滑块右侧对应的时间。

3、本申请实施例的第二方面,提供了一种基于时间轴交互的动态选择时间范围的装置,包括:创建模块,被配置为创建视图组件以及视图容器,视图容器用于封装时间选择器的组成部分,组成部分包括时间轴和滑块;计算模块,被配置为对视图组件执行初始化加载操作,获取时间轴的宽度,根据时间轴的宽度以及时间轴的时间范围,计算每个像素代表的时间长度;第一确定模块,被配置为利用滑块代表的时间长度以及每个像素代表的时间长度,确定滑块在时间轴上所占据的宽度;控制模块,被配置为根据当前时间设置滑块的初始位置,响应于触发滑块移动的操作,记录滑块的初始位置,并在位移过程中控制滑块在时间轴上移动;第二确定模块,被配置为当滑块位移结束后,确定滑块的当前位置,根据时间轴的起始时间以及滑块的当前位置,确定滑块左侧对应的时间,根据滑块左侧对应时间以及滑块在时间轴上所占据的宽度,确定滑块右侧对应的时间。

4、本申请实施例的第三方面,提供了一种电子设备,包括存储器、处理器以及存储在存储器中并且可在处理器上运行的计算机程序,该处理器执行计算机程序时实现上述方法的步骤。

5、本申请实施例的第四方面,提供了一种介质,该介质存储有计算机程序,该计算机程序被处理器执行时实现上述方法的步骤。

6、本申请实施例采用的上述至少一个技术方案能过够达到以下有益效果:

7、通过创建视图组件以及视图容器封装时间轴和滑块,对视图组件进行初始化加载操作后,获取时间轴的宽度,根据时间轴的宽度以及时间轴的时间范围计算每个像素代表的时间长度,便于之后计算各位置之间的像素距离;利用滑块代表的时间长度以及每个像素代表的时间长度,确定滑块在时间轴上占据的宽度,根据当前时间设置滑块的初始位置,并响应于触发滑块移动的操作,控制滑块保持在时间轴上移动,当滑块移动结束后,确定滑块的当前位置,根据滑块的当前位置与时间轴的起始时间更新滑块当前位置对应的时间,这样预先配置时间轴代表的时间范围和滑块代表的时间长度,再通过对应的操作移动滑块,便可以选取时间轴上任意的时间范围并随时切换滑块位置选择不同时间范围,从而方便查看对应时间范围的数据信息,并且控制滑块在时间轴上滑动时只能保持在时间轴上滑动,这样在通过移动滑块选择时间范围时更加直观便利。

本文档来自技高网...

【技术保护点】

1.一种基于时间轴交互的动态选择时间范围的方法,其特征在于,包括:

2.根据权利要求1所述的方法,其特征在于,所述根据当前时间设置所述滑块的初始位置,包括:

3.根据权利要求1所述的方法,其特征在于,所述在位移过程中控制所述滑块在所述时间轴上移动,包括:

4.根据权利要求1所述的方法,其特征在于,所述当所述滑块位移结束后,确定滑块的当前位置,包括:

5.根据权利要求1所述的方法,其特征在于,所述根据时间轴的起始时间以及所述滑块的当前位置,确定滑块左侧对应的时间,根据所述滑块左侧对应时间以及所述滑块在时间轴上所占据的宽度,确定滑块右侧对应的时间,包括:

6.根据权利要求1所述的方法,其特征在于,在所述对视图组件执行初始化加载操作之后,还包括:

7.根据权利要求6所述的方法,其特征在于,所述在所述滑块上方显示第一气泡,包括:

8.一种基于时间轴交互的动态选择时间范围的装置,其特征在于,包括:

9.一种电子设备,包括存储器、处理器以及存储在所述存储器中并且可在所述处理器上运行的计算机程序,其特征在于,所述处理器执行所述计算机程序时实现如权利要求1至7中任一项所述方法的步骤。

10.一种介质,所述介质存储有计算机程序,其特征在于,所述计算机程序被处理器执行时实现如权利要求1至7中任一项所述方法的步骤。

...

【技术特征摘要】

1.一种基于时间轴交互的动态选择时间范围的方法,其特征在于,包括:

2.根据权利要求1所述的方法,其特征在于,所述根据当前时间设置所述滑块的初始位置,包括:

3.根据权利要求1所述的方法,其特征在于,所述在位移过程中控制所述滑块在所述时间轴上移动,包括:

4.根据权利要求1所述的方法,其特征在于,所述当所述滑块位移结束后,确定滑块的当前位置,包括:

5.根据权利要求1所述的方法,其特征在于,所述根据时间轴的起始时间以及所述滑块的当前位置,确定滑块左侧对应的时间,根据所述滑块左侧对应时间以及所述滑块在时间轴上所占据的宽度,确定滑块右侧对应的时间,包括:

【专利技术属性】
技术研发人员:张俊熊勇叶松林
申请(专利权)人:重庆赛力斯新能源汽车设计院有限公司
类型:发明
国别省市:

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1