Vorne geschrieben:
Schauen Sie sich zuerst die endgültige Datenstrukturanzeige an
time ('2020-10-01', '2021-01-06')
muss das folgende Array-Objekt basierend auf einem Start- und einem Enddatum endgültig zurückgeben
[
最外层数组里的每个对象代表了某一年的所有数据,有几个对象代表了跨度是几年
{
"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]
}
]
}
]
Jedes Objekt im äußersten Array repräsentiert alle Daten in einem bestimmten Jahr. Mehrere Objekte repräsentieren die Zeitspanne von mehreren Jahren. Das Jahr repräsentiert ein bestimmtes Jahr. Das
Mundarr- Array repräsentiert alle Monate im aktuellen Jahr. Die übergebenen Parameter Beginnend vom 2020-10-01, 2021-01-06 Ende
dann im Jahr 2020 dieses Objekt von MundArr gibt es 10 , 11 , 12 Monate Daten,
im Jahr 2021 dieses Objekt MundArr nur 1 Monat Daten
MundArr Array jedes Objekt in der yearItem darstellen , was Jahr der aktuelle Monat gehört, Mund den aktuellen Monat darstellt,
dayArr stellt Array einen Tag im aktuellen Monat enthielt, ist das Enddatum 2021.01.06 dann 2021 Objekte in mouthArr Anordnung von Mund sind ein Ziel dayArr Die Anzahl der Tage beträgt nur 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'))
Anschließend können Sie die Array-Zeichenfolgen der for-Schleifenrückgabe verketten, um den Kopf des gewünschten Gantt-Diagramms zu generieren: Schneiden Sie das Diagramm in einem Projekt aus
www.flot.top ist eine kleine persönliche Website zum Lernen von nuxt.js