JavaScript：在一段时间不连续的数据中获取某一段时间段内相同时间间隔的数据
2024-05-10 19:08:24
需求：绘制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();// 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;
}
JavaScript：在一段时间不连续的数据中获取某一段时间段内相同时间间隔的数据相关推荐
- 根据一段时间区间，按月份拆分成多个时间段
package Test; import java.text.SimpleDateFormat; import java.util.ArrayList; import java.util.Calend ...
- 【读书笔记】抓取深圳或上海股市，或香港美国等有关股市某时间段内全部股票行情数据，进行主成分分析构造你个人的股市指数
抓取深圳或上海股市,或香港美国等有关股市某时间段内全部股票行情数据,进行主成分分析构造你个人的股市指数,然后分析你的私家指数和该股市常用官方股票指数的相关性,判断主成分分析在构造股市指数上是否可用. ...
- 如何才能在大数据中获取价值
从数据中获取价值都是一个挑战,不管你所在的行业和企业规模如何.然而,在早期阶段,这一挑战与可用数据量没多大关系.如果对数据处理过程和数据值提取的结构设计不合理,那么至少按照现在的标准,企业有数据和没数 ...
- 大数据时代：9种从大数据中获取商业价值的方法
很多大数据都是来自一些新的来源,这代表客户或合作伙伴互动的新渠道.和任何新的数据来源一样,大数据值得探索.通过数据探索,你可以了解一些之前所不知道的商业模式和事实真相. 关于管理大数据的调查显示,89 ...
- R语言使用table函数统计dataframe数据中的离散变量（分类变量、因子变量）数据列的每一种水平的统计计数
R语言使用table函数统计dataframe数据中的离散变量(分类变量.因子变量)数据列的每一种水平的统计计数 目录
- MySQL中数组内的JSON数据中获取值
MySQL中JSON数据获取值 1.MySQL中JSON数据中获取值 数据源: {"observeTruth": "111","preventHume ...
- java每隔一段时间执行_8.Android中，每隔一段时间执行某一个任务（Timer）
1,在开发中我们有时会有这样的需求,即在固定的每隔一段时间执行某一个任务.比如UI上的控件需要随着时间改变,我们可以使用Java为我们提供的计时器的工具类,即Timer和 TimerTask. Tim ...
- wifi连接一段时间才能上网_无线路由连接上一段时间后就无法上网的问题
周五买的无线路由到了,周六家里通网了,连上无线路由开始上网,但是发现一个问题:连上路由,过一段时间后发现无法上网了,禁用再连还是不行. 看网络状态,显示无法连接Internet,而且是隔一段时间出现一 ...
- GAN（生成对抗网络）在合成时间序列数据中的应用（第二部分——利用GAN生成时间序列数据）
GAN(生成对抗网络)在合成时间序列数据中的应用(第二部分–TimeGAN 与合成金融输入) (本文基本是对Jasen 的<Machine Learning for Algorithmic Tr ...
最新文章
- 大数据入门笔记(三)
- nginx php怎么配置伪静态,nginx rewrite 伪静态配置参数和使用例子
- 轻量高效的开源JavaScript插件和库 【转】
- 读《程序员修炼之道——从小工到专家》(The Pragmatic Programmer: From Journeyman to Master)
- 技巧 | 如何批量地将整型变量转换为因子变量
- 马云：电商之王还想怎样(转）
- c语言创建若干个成绩栏目,2015年计算机二级《C语言》考试上机测试题(6)
- Javascript视频教程全集，基础入门学习-动力节点
- 计算机函数的应用知识点总结,计算机应用 常用函数的使用 常用函数的使用.pptx...
- yarn : 无法加载文件 C:\Users\mosho\AppData\Roaming\npm\yarn.ps1，因为在此系统上禁止运行脚本。
- vue中如何在搜索框中实现关键字搜索
- 危化品防火柜的概念是什么？
- vue使用JavaScript的Number方法或正则表达式进行表单验证，判断值是否为数字（包括整数和小数），验证值只能为小数点后一位
- linux发出声音的命令,在Linux中发出哔哔声C
- 一文看完2018苹果秋季新品发布会，你想知道的问题这里都有答案！
- 关于有盘产品市场调查
- 如何将视频中的某一段截取制作gif动图
- 智慧城市UE4 奥特曼教程
- JS获取当前年的第一天/昨天/今天
- MFC界面开发工具BCG v30.6 - 全新网格/报表控件