Written in front:
first look at the final data structure display
time('2020-10-01', '2021-01-06')
needs to finally return the following array object based on a start date and an end date
[
最外层数组里的每个对象代表了某一年的所有数据,有几个对象代表了跨度是几年
{
"year": 2020, year:表示哪一年的数据
"mouthArr": [ mouthArr:存放当前年份下的所有月份
{
"yearItem": 2020,
"mouth": 10, mouth:表示当前月份---dayArr则存放月份的天
"dayArr": [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]
},
{
"yearItem": 2020,
"mouth": 11,
"dayArr": [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30]
},
{
"yearItem": 2020,
"mouth": 12,
"dayArr": [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]
}
]
},
{
"year": 2021,
"mouthArr": [
{
"yearItem": 2021,
"mouth": 1,
"dayArr": [1,2,3,4,5,6]
}
]
}
]
Each object in the outermost array represents all the data in a certain year. Several objects represent the span of several years. Year represents a certain year. The
mouthArr array represents all months in the current year. The parameters passed beginning from 2020-10-01, 2021-01-06 end
then in 2020 this object of mouthArr there are 10 , 11 , 12 months of data,
in 2021 this object mouthArr only 1 month's data
mouthArr array each object in the yearItem represent what year the current month belongs, mouth represents the current month,
dayArr array represents a day included in the current month, the end date is 2021-01-06 then 2021 objects inside mouthArr array of mouth is a target dayArr The number of days is only 1-6
// time 类型 是newDate()的 Sun Apr 08 2018 08:00:00 GMT+0800 (中国标准时间) 格式
function format(time) {
let year = time.getFullYear(); //获取年份。
let mouth = time.getMonth() + 1; //获取月份。
let day = time.getDate(); //获取天
return {
year,
mouth,
day
}
}
function time(start, end) {
//获取开始时间和结束时间的时间戳
var startTime = new Date(start).getTime()
var endTime = new Date(end).getTime()
var dateArr = [] // 存放区间数据的数组
var stamp;
var oneDay = 24 * 60 * 60 * 1000;
for (stamp = startTime; stamp <= endTime;) {
dateArr.push(format(new Date(stamp)))
stamp += oneDay
}
//此时的dateArr 格式为[{year: 2020, mouth: 10, day: 1},{year: 2020, mouth: 10, day: 2},....] 可以在这里打印下看看
var listArr = [] // 存放转换后的数组 把扁平化的数据转换为 层级结构的
dateArr.forEach((item, index) => {
if (index === 0) {
listArr.push({
year: item.year,
mouthArr: [{
yearItem: item.year,
mouth: item.mouth,
dayArr: [item.day]
}]
})
} else {
// 不是第一次,就需要两个数组对比如果有一样的就再对比
//some()函数 用于检测数组中的元素是否满足指定条件.
// 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测
var yearFlag = listArr.some((listItem, listIndex) => {
// 如果年份相等,就要循环月份数组
if (listItem.year == item.year) {
// 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测
var mouthFlag = listItem.mouthArr.some((mouthItem, mouthIndex) => {
// 如果月份相等,就把天push进去,return true
if (mouthItem.mouth == item.mouth) {
mouthItem.dayArr.push(item.day)
return true;
}
})
// 如果月开关是fasle 就代表月份没有一样的 push就行了
if (!mouthFlag) {
listItem.mouthArr.push({
yearItem: item.year,
mouth: item.mouth,
dayArr: [item.day]
})
}
return true
}
})
// 如果年开关是fasle 就代表年份没有一样的 push就行了
if (!yearFlag) {
// 如果年份不相等,年份数组push
listArr.push({
year: item.year,
mouthArr: [{
yearItem: item.year,
mouth: item.mouth,
dayArr: [item.day]
}]
})
}
}
})
return listArr
}
console.log(time('2020-10-01', '2021-01-06'))
Then you can concatenate the array strings of the for loop return to generate the head of the Gantt chart you want: cut the graph in a project
www.flot.top is a small personal website for learning nuxt.js, welcome to visit