需求：绘制highchats折线图，绘制某一个时间段内相同时间频率的图像。

如：绘制5月11日—6月11日之前，每隔4小时一次的数据（绘制近一个月内数据）

请求回的数据如下：

难点

1. 时间间隔并不连续

2. 返回时间数据没有规律

解决：根据起始和结束时间的大小为条件，进行循环。比较返回数据中时间字符串和需要的时间的大小，执行不同的代码。

截取长度：格式化后时间字符串的截取长度。

格式化时间：year/month/day hour:min:sec

若截取长度为10，截取后为：year/month/day

若截取长度为13，截取后为：year/month/day hour

若用户选择时间间隔频率为1小时或4小时，则截取长度为13

若用户选择时间间隔频率为24小时，则截取长度为10执行while循环，结束条件为$startTime＞$endTime，构造resultIndex变量，记录访问到第几个结果数组下标。

循环内部代码逻辑为：

如果resultIndex＜results.length

会构造dataX，存储时间。构造dataY，存储数据。

分别格式化dataX以及startDate，并进行截取。构造两个时间字符串

如截取长度为10，则为/08/15

如截取长度为13，则为/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;}