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;
}