javascript - 过滤从当月第一天到当前日期的日期
问题描述
我有一个从 JSON API 中提取数据的图表。我只想显示从月初到当前日期的日期。
开始日期是该月的第一天,结束日期是当前日期
我尝试了以下方法,但它返回未定义。我正在请求有关此代码的帮助。
谢谢你。
下面是我的代码。
let dates = [];
let confirmed = [];
let recovered = [];
let deaths = [];
var today = new Date();
var TodayDate = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
var startDate = '01-04-2020'; //YYYY-MM-DD
var endDate = TodayDate; //YYYY-MM-DD
var getDateArray = function(start, end) {
var arr = new Array();
var dt = new Date(start);
while (dt <= end) {
arr.push(new Date(dt));
dt.setDate(dt.getDate() + 1);
}
return arr;
}
var dateArr = getDateArray(startDate, endDate);
fetch("https://pomber.github.io/covid19/timeseries.json")
.then(response => response.json())
.then(data=> {
data["South Africa"].forEach(o => {
dates.filter(function() {
o.date==dateArr;
}).push(o.date);
confirmed.push(o.confirmed);
recovered.push(o.recovered);
deaths.push(o.deaths);
})
new Chart(document.getElementById('myChart'), {
type: 'line',
data: {
labels: dates,
datasets: [{
label: 'Confirmed',
borderColor: 'orange',
backgroundColor: 'orange',
fill: 'false',
data: confirmed
},
{
label: 'Recovered',
borderColor: 'green',
backgroundColor: 'green',
fill: 'false',
data: recovered
},
{
label: 'Deaths',
borderColor: 'red',
backgroundColor: 'red',
fill: 'false',
data: deaths
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
title: {
display: true,
text: 'COVID-19 / Eswatini Time Series'
}
}
});
});
</script>
解决方案
这为您提供了您预期日期之间来自 api 的列表数据
var today = new Date();
var firstDay = new Date(today.getFullYear(), today.getMonth(), 1);
var getDateArray = function(start, end) {
var arr = new Array();
var dt = start;
while (dt <= end) {
arr.push(dt.getFullYear()+'-'+(dt.getMonth()+1)+'-'+dt.getDate());
dt.setDate(dt.getDate() + 1);
}
return arr;
}
var dateArr = getDateArray(firstDay, today);
getDatas("South Africa");
function getDatas(counryName){
fetch("https://pomber.github.io/covid19/timeseries.json")
.then(response => response.json())
.then(data=> {
var categories=[];
var confirms=[];
var recovers=[];
var result = data[counryName].filter(function(item) {
return dateArr.includes(item.date);
})
result.forEach(item=>{
categories.push(item.date);
confirms.push(item.confirmed);
recovers.push(item.recovered);
})
var options = {
type: 'line',
data: {
labels: categories,
datasets: [
{
label: '# of Confirmed',
data: confirms,
borderWidth: 1
},
{
label: '# of Recovered',
data:recovers,
borderWidth: 1
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
reverse: false
}
}]
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
console.log(result);
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script>
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>
推荐阅读
- javascript - React-Native Redux 连接组件未调度操作
- python-3.x - pip3 install bpy Building wheel for bpy (setup.py) ... error Failed to build bpy
- c - 如何制作结构的实际副本(不是指针)
- python - 抑制 Linux“屏幕”命令日志中的 tqdm 输出
- android - 带有附加下拉菜单的材料设计TextInputLayout?
- c++ - 在 iOS 应用程序中链接静态库后架构 arm64 的未定义符号
- javascript - IBM MFP 适配器部署失败
- c - 在 32 位和 64 位上编译,但校验和不同
- python - 函数,给定一个 csv 文件路径和一个关键字,返回关键字的行号和下一个空行的行号
- sql - 动态 SQL 的 STUFF 函数限制