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