Highcharts如何将选定日期范围数据按星期几分组聚合展示

我正在绘制图表，需要将选定日期范围内的数据按星期几聚合：例如选择2021-05-01至2021-05-31的日期范围，其中2021-05-01、2021-05-08、2021-05-15均为周五，我需要将这些日期的对应数据合并，以“周五”为标签展示为单个数据项。
我当前使用的配置渲染出的图表不符合预期，当前实际输出效果如下：

我期望实现的效果如下：

我当前使用的Highcharts配置代码如下：

Highcharts.chart("multistackedbarchart-II", {
    chart: {
        type: "column",
    },
    title: {
        text: "Sent/Received Comparison",
    },
    xAxis: {
        title: {
            text: "Day",
        },
        categories: [labels],
    },
    yAxis: {
        min: 0,
        title: {
            text: "",
        },
        stackLabels: {
            enabled: false,
            style: {
                fontWeight: "bold",
                color:
                    // theme
                    (Highcharts.defaultOptions.title.style && Highcharts.defaultOptions.title.style.color) ||
                    "gray",
            },
        },
    },
    legend: {
        align: "center",
        verticalAlign: "bottom",
        x: 0,
        y: 0,
    },
    tooltip: {
        headerFormat: "<b>{point.x}</b><br/>",
        pointFormat: "{series.name}: {point.y}",
    },
    plotOptions: {
        column: {
            stacking: "normal",
            dataGrouping: {
                forced: true,
                units: [['day', [1]]]
            }
        },
    },
    series: chartdata.multistackedbarchart,
    credits: {
        enabled: false,
    },
});
Highcharts.setOptions({ lang: { noData: "No Data Available" } });

你需要先手动完成数据按星期维度的聚合，再传入Highcharts渲染即可，Highcharts默认的dataGrouping不支持按星期几的维度聚合，不要依赖内置的分组能力。具体实现分为两步：

1. 预处理原始数据完成聚合 #

你可以参考以下逻辑完成数据聚合：

// 原始数据示例，按你实际业务结构调整
const rawData = [
  {date: '2021-05-01', sent: 30, received: 25},
  {date: '2021-05-02', sent: 35, received: 28},
  {date: '2021-05-08', sent: 40, received: 35},
  // 其余日期数据
]
const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
// 初始化聚合容器
const aggregatedData = weekDays.map(dayLabel => ({
  label: dayLabel,
  sentTotal: 0,
  receivedTotal: 0
}))

// 遍历原始数据累加同星期的数值
rawData.forEach(item => {
  const dayOfWeek = new Date(item.date).getDay()
  aggregatedData[dayOfWeek].sentTotal += item.sent
  aggregatedData[dayOfWeek].receivedTotal += item.received
})

// 提取图表所需的categories和series数据
const chartCategories = aggregatedData.map(item => item.label)
const chartSeries = [
  {name: 'Sent', data: aggregatedData.map(item => item.sentTotal)},
  {name: 'Received', data: aggregatedData.map(item => item.receivedTotal)}
]

2. 调整Highcharts配置 #

删掉原来的dataGrouping配置，替换成聚合后的数据即可，修改后的配置参考：

Highcharts.chart("multistackedbarchart-II", {
    chart: {
        type: "column",
    },
    title: {
        text: "收发数据对比",
    },
    xAxis: {
        title: {
            text: "星期",
        },
        categories: chartCategories, // 替换为聚合后的星期标签
    },
    yAxis: {
        min: 0,
        stackLabels: {
            enabled: false,
            style: {
                fontWeight: "bold",
                color: (Highcharts.defaultOptions.title.style?.color) || "gray",
            },
        },
    },
    legend: {
        align: "center",
        verticalAlign: "bottom",
    },
    tooltip: {
        headerFormat: "<b>{point.x}</b><br/>",
        pointFormat: "{series.name}: {point.y}",
    },
    plotOptions: {
        column: {
            stacking: "normal" // 删掉原有的dataGrouping配置
        },
    },
    series: chartSeries, // 替换为聚合后的series数据
    credits: {
        enabled: false,
    },
});
Highcharts.setOptions({ lang: { noData: "暂无可用数据" } });

内容的提问来源于stack exchange，提问作者sooraj s pillai