前に書かれてい
ます：最初に最終的なデータ構造の表示を見てください
time（ '2020-10-01'、 '2021-01-06'）
は、開始日と終了日に基づいて、最終的に次の配列オブジェクトを返す必要があります
[
最外层数组里的每个对象代表了某一年的所有数据,有几个对象代表了跨度是几年
{
"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]
}
]
}
]
最も外側の配列の各オブジェクトは、特定の年のすべてのデータを表します。いくつかのオブジェクトは、数年のスパンを表します。年は、特定の年を表します
。mouthArr配列は、現在の年のすべての月を表します。渡されたパラメーター2021年1月6日終了、2020年10月1日から始まる
2020年には、その後のこのオブジェクトmouthArrがある10、11、12データの数ヶ月、
2021このオブジェクトのmouthArrのみ1月のデータ
mouthArrの配列は、内の各オブジェクトyearItemは、現在の月が属し何年表し、口の中には現在の月を表し、
dayArrの配列は、現在の月に含ま日を表し、終了日は2021年1月6日、その後のmouthArr配列内の2021のオブジェクトの口はあるターゲットdayArr日数はわずか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'))
次に、forループリターンの配列文字列を連結して、必要なガントチャートのヘッドを生成できます。プロジェクトでグラフを切り取ります。
www.flot.topはnuxt.jsを学ぶための小さな個人的なウェブサイトです。