创建时间轴可视化视图--chronoline.js

JavaScript011

创建时间轴可视化视图--chronoline.js,第1张

Chronoline.js

依赖其他库 jQuery qTip2 Raphael

使用它的时候,大概需要这样的配置

配置项的这些参数描述了我们使用这个时间轴时,它的显示外观,包扩显示的具体时间格式,刻度的显示,刻度标签的格式,时间轴的时间跨度,滚动一次的时间跨度,可以说配置说明书要看的非常多了,可以试下修改配置项,你会惊呆的,简直不要太强大。

TimelineJS 是一个开源库,可以帮助你创建精美、可交互的时间轴。它可以使用Google试算表或基于JSON的REST后端作为数据来源。它可以处理不同种类的内容,从多个来源获取媒体文件,包括:

Twitter

Google Plus

Flickr

Youtube , Vimeo , DailyMotion

Google Maps

使用d3绘制时间轴图表,不可避免的涉及到动态变动时间刻度,根据业务需求需要调整查看不同的时间粒度数据。如果后台数据非连续数据,需要前端自己处理的话,就得自己根据时间范围创建时间刻度数据。

以上方法,亲测有效。注意一定要使用固定的时间作为基准点,否则以天为刻度时,会有时区差异。以秒和分钟作为时间粒度,没问题,因为是更小一级的单位,进行整除运算没有问题。

时间桶的概念,就是以该间隔作为时间刻度

为什么我会前端处理时间轴数据?

相信如果使用过d3进行时间轴图表定制的同学,一定使用过 d3.scaleTime 或者 d3.scaleUtc 进行时间轴比例尺的绘制,它的智能之处,就是可以根据你的时间范围,动态的创建出适合当前显示区域坐标系的时间刻度数据,就算你的数据是不连续的,也没有问题。但是结合brush刷取api进行使用的时候就用问题了,当初始化数据不符合具体的刷取机制,进行刷取范围的默认设置,就会出现绘制图表不连续,移动刷取框更新图表错误的问题。(具体原因未知,有大神有相应的认知可以在评论群告知一波,非常感谢)

基于以上问题,我通过自己创建时间刻度,使用 d3.scaleLinear 线性比例尺,结合brush进行缩放x轴,就没有任何问题,因为我的数据处理后都是连续的,每个时间刻度已经固定,规避了上面的问题。