最近在写一些数据展示的需求，表现形式有柱状图 折线图 饼状图等等之类，其中 柱状图拿到的数据 如果由于其中某一天没有相关数据，那么这一天的数据在柱状图中的表现形式就是空的，会被直接跳过，表现形式很不好。这个时候就需要将这一天的日期加上，并且将这一天的数据结果补为0。
具体步骤我是这样做的，觉得很有意思 特意记录下来，同时防止下次可能会有用到的时候。
第一步 将后台返回的数据中的日期拿到，计算出总共是几天的数据。
第二步 拼凑出完整的日期数组（不间断的数据）
第三步 循环该日期数组，对比后台返回的数据中的日期，如果日期相等，则push对应的内容，如果不相等则push（0）
第四步 由于后台返回的数据可能和自己生成的日期数组长度不同，所以循环日期数组时，日期下标对应的数据可能不是对应日期的后台返回数据，所以定义一个 n，初始化为 0，当日期不等时，n++。对比日期时取（i - n）。代码如下：
// 后台返回数据 ，其中缺少5/30、5/31、6/3、6/4 数据，需要为这几个日期的count补0.
const _res = [
{ date: '2022-05-29', count: 123 },
{ date: '2022-06-01', count: 222 },
{ date: '2022-06-02', count: 444 },
{ date: '2022-06-05', count: 666 }
]
function GetNumberOfDays(date1, date2) { // 获得天数
// date1：开始日期，date2结束日期
var a1 = Date.parse(new Date(date1))
var a2 = Date.parse(new Date(date2))
var day = parseInt((a2 - a1) / (1000 * 60 * 60 * 24)) //时间戳相减，然后除以天数
return day
}
function getDateList(length, time_stamp, step) { // 获取日期列表，
var lengthParam = length || '3'
var timeStamp = time_stamp || Date.parse(new Date())
var date_list = []
var stepParam = step || '1' // 跨度
for (var i = 0; i < lengthParam; i++) {
var y = new Date(timeStamp + i * 86400000 * stepParam).getFullYear()
var m = (new Date(timeStamp + i * 86400000 * stepParam).getMonth() + 1).toString().padStart(2, '0')
var d = (new Date(timeStamp + i * 86400000 * stepParam).getDate()).toString().padStart(2, '0')
date_list.push(y + '-' + m + '-' + d)
}
return date_list
}
var n = 0
var yAxis = []
var a1 = _res[0].date
var a2 = _res[_res.length - 1].date
var len = GetNumberOfDays(a1, a2) + 1
var xAxis = getDateList(len, Date.parse(new Date(a1)))
for (var i = 0; i < xAxis.length; i++) {
if (xAxis[i] === _res[i]?.date) { // 日期相等，取count值
yAxis.push(_res[i].count)
} else if (xAxis[i] === _res[i - n]?.date) { // 日期相等，取count值
yAxis.push(_res[i - n].count)
} else { // 没有对应日期，补零
yAxis.push(0)
n += 1
}
}
console.log(xAxis,yAxis) // 补全后的 x轴 和y轴数据
网友评论