如何将JSON数组转换为Chart.js多数据集柱状图所需格式？

核心思路 #

先提取并排序近7天的日期作为X轴标签，再针对每个班次，按日期顺序匹配对应的出勤率数据，最终组装成Chart.js所需的barChartDataDaily结构。

具体实现代码 #

假设你的data数组中每个对象包含FormattedAccessDate（日期）、ShiftName（班次名称）、AttendanceRate（出勤率百分比）字段，直接使用以下代码：

// 1. 预先定义各班次的显示标签与配色（可根据实际需求调整）
const shiftConfigs = [
    { label: "First Shift", backgroundColor: "#7F1E5E", borderColor: "#7F1E5E" },
    { label: "Second Shift", backgroundColor: "#CE6D28", borderColor: "#CE6D28" },
    { label: "Third Shift", backgroundColor: "#005486", borderColor: "#005486" }
];

// 2. 提取并排序近7天的日期作为X轴标签，确保顺序正确
const labels = [...new Set(data.map(item => item.FormattedAccessDate))].sort((a, b) => new Date(a) - new Date(b));

// 3. 为每个班次生成对应的数据集
const datasets = shiftConfigs.map(config => {
    // 按X轴标签的顺序，匹配对应班次的出勤率，无数据时补0（可改为null跳过绘制）
    const datasetData = labels.map(date => {
        const matchedItem = data.find(d => d.FormattedAccessDate === date && d.ShiftName === config.label);
        return matchedItem ? matchedItem.AttendanceRate : 0;
    });

    return {
        label: config.label,
        backgroundColor: config.backgroundColor,
        borderColor: config.borderColor,
        borderWidth: 1,
        data: datasetData
    };
});

// 4. 组装成Chart.js所需的最终结构
const barChartDataDaily = {
    labels: labels,
    datasets: datasets
};

注意事项 #

• 若你的数据字段名与示例不同（比如班次名称是Shift而非ShiftName），请自行替换代码中对应的字段名。
• 如果需要更严谨的日期排序，可根据后端返回的日期格式调整排序逻辑。
• 无数据的日期班次，代码默认补0，若希望该位置不显示柱子，可将0改为null。

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