JavaScript：判断日期数组中的周末并修改柱状图对应颜色

一、批量判断数组中的周末日期 #

你当前代码的问题在于直接将数组传给new Date()会生成无效日期，且isWeekend是独立函数，不能通过Date实例调用。以下是批量判断的修正方式：

const dates = ['2022-07-15', '2022-07-16', '2022-07-17', '2022-07-18', '2022-07-19', '2022-07-20']

function isWeekend(date = new Date()) {
    // getDay()返回0（周日）到6（周六），判断是否为周末
    return date.getDay() === 6 || date.getDay() === 0;
}

// 遍历日期数组，逐个判断是否为周末，得到布尔结果数组
const isWeekendArray = dates.map(dateStr => isWeekend(new Date(dateStr)));
console.log(isWeekendArray); // 输出每个日期是否为周末的判断结果

二、修改柱状图周末日期的柱子颜色 #

利用上面得到的isWeekendArray，可以为每个柱子生成对应的背景色：周末日期用自定义颜色，非周末保留原颜色。

const data = {
    labels: dates,
    datasets: [
        {
            label: "Amount of Visitors",
            data: [1, 4, 3, 7, 5, 2],
            // 根据周末判断结果动态生成背景色数组
            backgroundColor: isWeekendArray.map(isWeekend => 
                isWeekend ? "rgba(128, 128, 128, 0.5)" : "rgba(255, 99, 132, 0.5)"
            ),
        },
    ],
};

完整代码整合 #

const dates = ['2022-07-15', '2022-07-16', '2022-07-17', '2022-07-18', '2022-07-19', '2022-07-20']

function isWeekend(date = new Date()) {
    return date.getDay() === 6 || date.getDay() === 0;
}

// 批量判断周末
const isWeekendArray = dates.map(dateStr => isWeekend(new Date(dateStr)));

// 生成带周末颜色区分的图表数据
const data = {
    labels: dates,
    datasets: [
        {
            label: "Amount of Visitors",
            data: [1, 4, 3, 7, 5, 2],
            backgroundColor: isWeekendArray.map(isWeekend => 
                isWeekend ? "rgba(128, 128, 128, 0.5)" : "rgba(255, 99, 132, 0.5)"
            ),
        },
    ],
};

内容的提问来源于stack exchange，提问作者Sindawg