场景:数据可视化中,很多情况下都会以日期为横坐标,数据为纵坐标展示折线图,但接口下发的数据不一定是连续的。
接口返回如下数据(数据已经按照日期由早到晚排序):
const data = [
{date: '2021-12-25', cnt: 12},
{date: '2021-12-28', cnt: 7},
{date: '2021-12-30', cnt: 9},
{date: '2022-01-02', cnt: 4},
{date: '2022-01-03', cnt: 4}
];
请写一个函数 pathDate()补全缺失的日期数据(默认为0即可),效果如下:
const result = pathDate(data);
// result 结果为:
[
{date: '2021-12-25', cnt: 12},
{date: '2021-12-26', cnt: 0}, // 新增
{date: '2021-12-27', cnt: 0}, // 新增
{date: '2021-12-28', cnt: 7},
{date: '2021-12-29', cnt: 0}, // 新增
{date: '2021-12-30', cnt: 9},
{date: '2021-12-31', cnt: 0}, // 新增
{date: '2022-01-01', cnt: 0}, // 新增
{date: '2022-01-02', cnt: 4},
{date: '2022-01-03', cnt: 4}
];
解答:
const data = [
{ date: "2021-12-25", cnt: 12 },
{ date: "2021-12-28", cnt: 7 },
{ date: "2021-12-30", cnt: 9 },
{ date: "2022-01-02", cnt: 4 },
{ date: "2022-01-03", cnt: 4 },
];
function pathDate(_date) {
const start = data[0].date.replace(/-/g, "/");
const startTime = +new Date(start);
const end = data[data.length - 1].date.replace(/-/g, "/");
const endTime = +new Date(end);
const dayTime = 86400000;
const step = (endTime - startTime) / dayTime + 1;
let dateRange = [];
for (let index = 0; index < step; index++) {
let dateStep = startTime + dayTime * index;
dateRange.push(formatDate(dateStep));
}
console.log(dateRange, "数组--dateRange");
let newDate = [];
for (let index = 0; index < dateRange.length; index++) {
const findindex = data.findIndex((item, indexItem) => {
return item.date == dateRange[index]
});
if(findindex >-1){
newDate.push(data[findindex]);
}else{
newDate.push( { date: dateRange[index], cnt: 0 },);
}
}
console.log(newDate);
return newDate;
}
function formatDate(time) {
const date = new Date(time);
const pad = (n) => (n < 10 ? `0${n}` : n);
const dateStr = `${date.getFullYear()}-${pad(
date.getMonth() + 1
)}-${pad(date.getDate())}`;
return `${dateStr}`;
}
const result = pathDate(data);
console.log(result, "reslut===");
// result 结果为:
// [
// { date: "2021-12-25", cnt: 12 },
// { date: "2021-12-26", cnt: 0 }, // 新增
// { date: "2021-12-27", cnt: 0 }, // 新增
// { date: "2021-12-28", cnt: 7 },
// { date: "2021-12-29", cnt: 0 }, // 新增
// { date: "2021-12-30", cnt: 9 },
// { date: "2021-12-31", cnt: 0 }, // 新增
// { date: "2022-01-01", cnt: 0 }, // 新增
//