js根据时间范围生成时间刻度数据

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js根据时间范围生成时间刻度数据相关的知识,希望对你有一定的参考价值。

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

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

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

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

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

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

以上是关于js根据时间范围生成时间刻度数据的主要内容,如果未能解决你的问题,请参考以下文章

d3.js - 对数刻度,范围为零和零

seaborn 热图的人工刻度标签

Qt QChart缩放后坐标轴间隔取整

Matplotlib 半对数图:当范围很大时,次要刻度线消失了

修复显示的轴比例范围

添加 d3 时间轴开头的额外刻度