根据当前的“日期”动态呈现以下工作日答案

【问题标题】：Dynamically render following weekdays depending on what the current 'day' is根据当前的“日期”动态呈现以下工作日
【发布时间】：2020-11-28 06:12:59
【问题描述】：

我正在创建数据可视化，并试图根据当天动态呈现第 2-7 天。

获取当前日期的动态函数正在工作，并保存为名为“day”的变量。但是，我不知道使用什么逻辑在我的谷歌图表中创建以下工作日，具体取决于“天”变量是什么。

// 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],
      ]);
...
  
  }

那么，我如何根据当前的“日期”动态呈现接下来的工作日？

如果您需要我进一步解释，请告诉我。

【问题讨论】：

我强烈建议您使用momentjs.com 之类的东西来解决此类问题。

标签： javascript arrays google-visualization

【解决方案1】：

正如我在评论中告诉你的，使用momentJS 真的很好。这个或另一个日期库，但不是原生 JS Date

一些开始的例子

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');

这里是你如何使用它

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);
}

【讨论】：

感谢您的回复！日期是从上面的 tempArray 中提取的。数据是 tempArray 中每个元素的值。有了你的回答，我清理了很多代码。新的数据表对我想要的几乎是完美的。刚刚出了点小错误，不得不把“Day”，“Battery”，{role:“style”}放到自己的header数组中。再次感谢您的回复，以后会使用momentJS！

【解决方案2】：

您可以添加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'));

【讨论】：