js手机端时间区间_js根据时间范围生成时间刻度数据
前言：
使用d3繪制時(shí)間軸圖表，不可避免的涉及到動(dòng)態(tài)變動(dòng)時(shí)間刻度，根據(jù)業(yè)務(wù)需求需要調(diào)整查看不同的時(shí)間粒度數(shù)據(jù)。如果后臺(tái)數(shù)據(jù)非連續(xù)數(shù)據(jù)，需要前端自己處理的話，就得自己根據(jù)時(shí)間范圍創(chuàng)建時(shí)間刻度數(shù)據(jù)。
一、js根據(jù)時(shí)間范圍創(chuàng)建時(shí)間刻度數(shù)據(jù)：
/*
*@params startDate 開(kāi)始時(shí)間
*@params endDate 結(jié)束時(shí)間
*@params timeUnit 時(shí)間間隔,注意是毫秒數(shù)
**/
function createTimeUnitListByTimeRange(startDate, endDate, timeUnit){
let startSeconds = new Date(startDate).getTime();
let endSeconds = new Date(endDate).getTime();
// 必須用計(jì)算機(jī)初始時(shí)間的時(shí)間戳來(lái)作為基準(zhǔn)點(diǎn)，否則時(shí)區(qū)會(huì)影響初始時(shí)間戳毫秒數(shù)
let base = new Date('1970-01-01 00:00:00').getTime();
let rangeTimeUnitList = [];
let firstDegree;
// 第一個(gè)刻度，可能剛好在你需要的整點(diǎn)刻度上，如果不在整點(diǎn)上，減去多余的部分，往前推一個(gè)刻度。
// 此處就是減掉基準(zhǔn)時(shí)間戳再執(zhí)行整除操作，否則如果以天為刻度，整除86400000，得到的第一個(gè)刻度會(huì)是包含時(shí)區(qū)的時(shí)間，如北京時(shí)間：2020-09-10 08：00：00
firstDegree = startSeconds - (startSeconds - base) % timeUnit;
rangeTimeUnitList.push(firstDegree);
// 當(dāng)最后一個(gè)刻度大于截止時(shí)間，停止創(chuàng)建刻度數(shù)據(jù)
while(firstDegree
firstDegree += timeUnit;
rangeTimeUnitList.push(firstDegree);
}
return rangeTimeUnitList;
}
console.log(createTimeUnitListByTimeRange('2020-01-01','2020-09-10',86400000), '測(cè)試');
以上方法，親測(cè)有效。注意一定要使用固定的時(shí)間作為基準(zhǔn)點(diǎn)，否則以天為刻度時(shí)，會(huì)有時(shí)區(qū)差異。以秒和分鐘作為時(shí)間粒度，沒(méi)問(wèn)題，因?yàn)槭歉∫患?jí)的單位，進(jìn)行整除運(yùn)算沒(méi)有問(wèn)題。
二、常用的時(shí)間刻度：
60000 分鐘桶
600000 十分鐘桶
3600000 小時(shí)桶
86400000 天桶
時(shí)間桶的概念，就是以該間隔作為時(shí)間刻度
三、多說(shuō)一句
為什么我會(huì)前端處理時(shí)間軸數(shù)據(jù)？
相信如果使用過(guò)d3進(jìn)行時(shí)間軸圖表定制的同學(xué)，一定使用過(guò)d3.scaleTime或者d3.scaleUtc進(jìn)行時(shí)間軸比例尺的繪制，它的智能之處，就是可以根據(jù)你的時(shí)間范圍，動(dòng)態(tài)的創(chuàng)建出適合當(dāng)前顯示區(qū)域坐標(biāo)系的時(shí)間刻度數(shù)據(jù)，就算你的數(shù)據(jù)是不連續(xù)的，也沒(méi)有問(wèn)題。但是結(jié)合brush刷取api進(jìn)行使用的時(shí)候就用問(wèn)題了，當(dāng)初始化數(shù)據(jù)不符合具體的刷取機(jī)制，進(jìn)行刷取范圍的默認(rèn)設(shè)置，就會(huì)出現(xiàn)繪制圖表不連續(xù)，移動(dòng)刷取框更新圖表錯(cuò)誤的問(wèn)題。(具體原因未知，有大神有相應(yīng)的認(rèn)知可以在評(píng)論群告知一波，非常感謝)
基于以上問(wèn)題，我通過(guò)自己創(chuàng)建時(shí)間刻度，使用d3.scaleLinear 線性比例尺，結(jié)合brush進(jìn)行縮放x軸，就沒(méi)有任何問(wèn)題，因?yàn)槲业臄?shù)據(jù)處理后都是連續(xù)的，每個(gè)時(shí)間刻度已經(jīng)固定，規(guī)避了上面的問(wèn)題。
總結(jié)
以上是生活随笔為你收集整理的js手机端时间区间_js根据时间范围生成时间刻度数据的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
