[英]Dynamically render following weekdays depending on what the current 'day' is
I am creating a data visualisation and am trying to get the days 2-7 to render dynamically depending on the current day.我正在创建一个数据可视化,并试图让第 2-7 天根据当天动态呈现。
The dynamic function to get the current day is working and is saved as the variable called 'day'.获取当前日期的动态 function 正在工作并保存为名为“day”的变量。 However, I don't know what logic to use to create the following weekdays in my google chart depending on what the 'day' variable is.
但是,我不知道使用什么逻辑在我的谷歌图表中创建以下工作日,具体取决于“天”变量是什么。
// Temporary array of placeholder dates for the last 9 days
let tempArray = [{time: "2020-11-28T04:13:30.000Z", value: 30},
{time: "2020-11-27T04:13:40.000Z", value: 77},
{time: "2020-11-26T04:13:50.000Z", value: 96},
{time: "2020-11-25T04:14:00.000Z", value: 64},
{time: "2020-11-24T04:14:10.000Z", value: 58},
{time: "2020-11-23T04:14:20.000Z", value: 45},
{time: "2020-11-22T04:14:30.000Z", value: 24},
{time: "2020-11-21T04:14:40.000Z", value: 19},
{time: "2020-11-20T04:14:50.000Z", value: 44},
{time: "2020-11-19T04:15:00.000Z", value: 49}]
// Function to turn ISO date format into an integer from 0-6 to get the day
function getDayWeek(timeData, i){
let date = timeData[i].time
switch (new Date(date).getDay()) {
case 0:
day = "Sun";
break;
case 1:
day = "Mon";
break;
case 2:
day = "Tue";
break;
case 3:
day = "Wed";
break;
case 4:
day = "Thu";
break;
case 5:
day = "Fri";
break;
case 6:
day = "Sat";
}
}
...
// Render Google Chart
function drawChart(dayData) {
...
// Fires function
getDayWeek(tempArray, 0)
// Graph row render
// 'day' variable returns Sat
// Code is missing the logic/function for dynamically rendering the following days
let color = '#2196F3'
var data = google.visualization.arrayToDataTable([
["Day", "Battery", { role: "style" } ],
[day, data1, '#B33D3C'],
[day2, data2, color],
[day3, data3, color],
[day4, data4, color],
[day5, data5, color],
[day6, data6, color],
[day7, data7, color],
]);
...
}
So, how do I dynamically render following weekdays depending on what the current 'day' is?那么,如何根据当前的“日期”在工作日动态渲染?
Let me know if you need me to explain further.如果您需要我进一步解释,请告诉我。
As I told you in comment, using momentJS is really nice.正如我在评论中告诉你的,使用momentJS真的很好。 This one or another date library but not the native JS
Date
这个或另一个日期库,但不是本机 JS
Date
Some example to get started一些开始的例子
const now = moment();
const now_as_date = now.toDate(); // give a valid JS Date
const dayName = now.format('dddd');
const aDate = moment('2020-11-28T04:13:30.000Z');
//clone to not modify the aDate, important !
const previousDay = aDate.clone().add(-1, 'day');
const fourDaysLater = aDate.clone().add(4, 'days');
Here is how you can use it这是您如何使用它的方法
function drawChart(dayData) {
//You have a date somewhere, you use it with getDayWeek but I don't see it in the provided code
//let's put something
var date = new Date('2020-11-19T04:15:00.000Z');
const dataTable = ["Day", "Battery", { role: "style" } ];
new Array(7).fill().forEach( (e, i) => {
const day = moment(date).add(i, 'days').format('ddd');
//Where does data1,data2, come from?
const data = '??';
const color = (i===0) ? '#2196F3' : '#B33D3C';
dataTable.push([day, data, color])
});
var data = google.visualization.arrayToDataTable(dataTable);
}
You can add day worth of milli seconds
to get next date.您可以添加
day worth of milli seconds
来获取下一个日期。
const followingDays = (dateStr) => { const msInDay = 24 * 60 * 60 * 1000; return new Array(7).fill(0).map((_, i) => new Date(new Date(dateStr).getTime() + i * msInDay).toDateString() ); }; console.log(followingDays((new Date().toString()))); console.log(followingDays('2020-11-24'));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.