如何为柱状图注释水平线添加显示条件（仅展示至前一日）

当然可以给annotations添加显示条件，只需要在reduce循环里加入判断逻辑，只在符合条件的索引下生成水平线即可。根据你的需求“仅展示至周二（前一日）”，可以通过以下两种方式实现：

方式一：按索引限制（假设周二是倒数第二个元素，当前为周三） #

如果weeklylabels数组最后一个元素是当前日期（比如周三），只需排除最后一个元素的线条生成：

let daytarget = WeeklyData.map((y) => y.DayTarget);

var annotations = daytarget.reduce(function (acc, cur, i) {
    // 仅为前一日及之前的日期生成水平线（排除最后一个元素）
    if (i < daytarget.length - 1) {
        acc[`line${i}`] = {
            type: 'line',
            yMin: cur,
            yMax: cur,
            xMin: -0.15 + i,
            xMax: 0.15 + i,
            borderColor: 'white',
            borderWidth: 10,
        }
    }
    return acc;            
}, {});

// 其余代码保持不变
var barChartDataWeekly = {
    labels: weeklylabels,
    datasets: [
        {
            data: WeeklyData,
            backgroundColor: function (value, context) {   
                if (value.raw.TotalActual >= value.raw.DayTarget) {
                    return 'rgba(0, 154, 221, 1)';
                } else {
                    return 'rgba(176, 35, 25, 1)';
                }
            }
        }
    ],
};

方式二：按标签名称精准匹配（直接指定周二） #

如果需要严格匹配“周二”这个标签，不管它在数组中的位置，可以通过weeklylabels[i]判断：

let daytarget = WeeklyData.map((y) => y.DayTarget);

var annotations = daytarget.reduce(function (acc, cur, i) {
    // 仅为周二及之前的日期生成水平线
    const currentLabel = weeklylabels[i];
    // 假设标签文本是“周二”，可根据实际情况调整
    if (currentLabel === '周二' || i < weeklylabels.indexOf('周二')) {
        acc[`line${i}`] = {
            type: 'line',
            yMin: cur,
            yMax: cur,
            xMin: -0.15 + i,
            xMax: 0.15 + i,
            borderColor: 'white',
            borderWidth: 10,
        }
    }
    return acc;            
}, {});

// 其余代码保持不变
var barChartDataWeekly = {
    labels: weeklylabels,
    datasets: [
        {
            data: WeeklyData,
            backgroundColor: function (value, context) {   
                if (value.raw.TotalActual >= value.raw.DayTarget) {
                    return 'rgba(0, 154, 221, 1)';
                } else {
                    return 'rgba(176, 35, 25, 1)';
                }
            }
        }
    ],
};

两种方式都能实现“仅展示至周二（前一日）”的需求，你可以根据自己的weeklylabels数组结构选择合适的方案。

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