JavaScript中，在一段時間不連續的數據中獲取某一段時間段內相同時間間隔的數據

需求：繪製highchats折線圖，繪製某一個時間段內相同時間頻率的圖像。

如：繪製2020年5月11日—2020年6月11日之前，每隔4小時一次的數據（繪製近一個月內數據）

請求回的數據如下：

難點

1. 時間間隔並不連續

2. 返回時間數據沒有規律

解決：根據起始和結束時間的大小爲條件，進行循環。比較返回數據中時間字符串和需要的時間的大小，執行不同的代碼。

1. 記錄起始、結束時間爲$startTime、$endTime。（數據格式爲Date()）
2. 根據用戶選擇時間間隔頻率，構造截取位數以及時間遞增頻率step
   截取長度：格式化後時間字符串的截取長度。
   格式化時間：year/month/day hour:min:sec
   若截取長度爲10，截取後爲：year/month/day
   若截取長度爲13，截取後爲：year/month/day hour
   若用戶選擇時間間隔頻率爲1小時或4小時，則截取長度爲13
   若用戶選擇時間間隔頻率爲24小時，則截取長度爲10
3. 執行while循環，結束條件爲$startTime＞$endTime，構造resultIndex變量，記錄訪問到第幾個結果數組下標。
   循環內部代碼邏輯爲：
   如果resultIndex＜results.length
   會構造dataX，存儲時間。構造dataY，存儲數據。
   分別格式化dataX以及startDate，並進行截取。構造兩個時間字符串
   如截取長度爲10，則爲2020/08/15
   如截取長度爲13，則爲2020/08/15 20
   通過比較兩個字符串，決定是時間增加step還是訪問下一個結果數組。

代碼

獲取起始和結束時間，有兩種方式，一種是自定義時間，一種是選擇時間段（一天、一週、一個月、半年等）

// 如果自定義時間控件顯示,肯定是獲取自定義時間
if ($("#ZDY_DateDiv").css("visibility") != "hidden"){   
    $startTime = $("#ZDY_start_date").datebox("getValue");
    $endTime = $("#ZDY_end_date").datebox("getValue");
}
if ($startTime !== "" && $endTime !== "") {
    if ($startTime > $endTime) {
        alert("開始時間不可以大於結束時間！")
        return;
    }
    $startTime += " 00:00:00";
    $endTime += " 00:00:00";
} else {
    // 獲取統計時間
    $statisticTime = $('#statistic_time').combobox('getValue');  
    let date = new Date();
    $endTime = getCurrentTime(date);
    if ($statisticTime === "one_day") {
        $startTime = getCurrentTime(new Date(date - 24 * 3600 * 1000));
    } else if ($statisticTime === "one_week") {
        $startTime = getCurrentTime(new Date(date - 7 * 24 * 3600 * 1000));
    } else if ($statisticTime === "" || $statisticTime === "one_month") {
        date.setMonth(date.getMonth() - 1);
        $startTime = getCurrentTime(date);
    } else if ($statisticTime === "three_month") {
        date.setMonth(date.getMonth() - 3);
        $startTime = getCurrentTime(date);
    } else if ($statisticTime === "six_month") {
        date.setMonth(date.getMonth() - 6);
        $startTime = getCurrentTime(date);
    } else if ($statisticTime === "one_year") {
        date.setFullYear(date.getFullYear() - 1);
        $startTime = getCurrentTime(date);
    } 
}

根據時間頻率構造截取長度和時間遞增頻率

let bit,step,startYear, startMonth, startDay, startHour, pointStart, pointInterval,type;
if ($rainStats === "2" || $IUPR === "day") {
step = 24 * 60 * 60 * 1000;
bit = 10;
} else if ($IUPR === "one") {
step = 60 * 60 * 1000;
bit = 13;
} else if ($IUPR === "four") {
step = 4 * 60 * 60 * 1000;
bit = 13;
}

遍歷結果數組showData，構造x、y軸數據

$.each(showData, function (index, value) {
    let unit = value.unit;
    let results = value.results;
    let name = value.name;
    let paratype = value.paratype;
    let data = [];
    let startDate = new Date($startTime);
    let endDate = new Date($endTime);
    let Color = getRandomColor();
    // 1. 構造y軸
    yAxis.push({
        lineWidth: 2,
        lineColor: Color,
        title: {
            text: name
        }
    })
    selectMax[name + "(" + paratype+")"] = index;
    let resultIndex = 0;
    while (startDate < endDate) {
        let dataX, dataY, aa, bb;
        if (resultIndex < results.length) {
            dataX = results[resultIndex].x;
            dataY = results[resultIndex].y;
            aa = formatDataX(dataX.substring(0, bit)).replace(/-/g, '/');
            bb = getCurrentTime(startDate).substring(0, bit);
        }
        if (aa === bb) {
            if (dataY === 0) {
                resultIndex++;
                continue;
            }
            data.push(dataY);
            resultIndex++;
            startDate.setTime(startDate.getTime() + step);
            continue;
        } else if (aa > bb) {
            data.push(0);
            startDate.setTime(startDate.getTime() + step);
            continue;
        } 
        resultIndex++;
    }
    type = value.paratype === "雨量" ? 'column' : 'spline';
    series.push({
        data: data,
        type: type,
        name: name + paratype + "(" + unit+")",
        yAxis: index,
        color:Color
    })
})

用到的自定義函數

function formatDataX(data) {
    let newData = data.split(" ")[0];
    let newTime = data.split(" ")[1];
    if (newTime === undefined) {
        return data;
    }
    if (newTime.indexOf(":") !== -1) {
        newTime = "0" + newTime.substring(0, 1);
    }
    return newData + " " + newTime;
}

function getCurrentTime(date) {
    if (!date instanceof Date) {
        return;
    }
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var day = date.getDate();
    var hour = date.getHours();
    var minute = date.getMinutes();
    var second = date.getMinutes();
    month = month < 10 ? '0' + month : month;
    day = day < 10 ? '0' + day : day;
    hour = hour < 10 ? '0' + hour : hour;
    minute = minute < 10 ? '0' + minute : minute;
    second = second < 10 ? '0' + second : second;
    return year + '/' + month + '/' + day + ' ' + hour + ':' + minute + ':' + second;
}