需求:绘制highchats折线图,绘制某一个时间段内相同时间频率的图像。
如:绘制2020年5月11日—2020年6月11日之前,每隔4小时一次的数据(绘制近一个月内数据)
请求回的数据如下:
难点
1. 时间间隔并不连续
2. 返回时间数据没有规律
解决:根据起始和结束时间的大小为条件,进行循环。比较返回数据中时间字符串和需要的时间的大小,执行不同的代码。
- 记录起始、结束时间为
$startTime
、$endTime
。(数据格式为Date()
) - 根据用户选择时间间隔频率,构造
截取位数
以及时间递增频率step
截取长度:格式化后时间字符串的截取长度。
格式化时间: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,则为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();
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;
}