本文介绍如何将来自数据库的扁平化 json 数据（含多个 order 按日期分组的工时记录）自动聚合成 chart.js 所需的多数据集格式，避免硬编码，支持任意数量的 order 动态渲染。
本文介绍如何将来自数据库的扁平化 json 数据（含多个 order 按日期分组的工时记录）自动聚合成 chart.js 所需的多数据集格式，避免硬编码，支持任意数量的 order 动态渲染。
在使用 Chart.js 展示项目工时趋势时，后端常返回类似以下结构的扁平化数组（每个对象含 DATE、HOURS、ORDER 字段）：
[
{ "DATE": "2023-04-09", "HOURS": "0.5", "ORDER": "111" },
{ "DATE": "2023-04-10", "HOURS": "2", "ORDER": "111" },
{ "DATE": "2023-04-09", "HOURS": "0.0", "ORDER": "221" },
{ "DATE": "2023-04-10", "HOURS": "18", "ORDER": "221" },
{ "DATE": "2023-04-09", "HOURS": "0.7", "ORDER": "115" }
]关键约束是：所有 ORDER 共享相同的日期序列（即横轴标签一致），因此我们只需提取一次唯一日期作为 labels，再为每个 ORDER 提取对应顺序的 HOURS 值构成独立数据集。
Comprehensive Three.js 3D graphics reference
下载
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
✅ 正确的数据重组逻辑（非 reduce 误用）
原答案中提供的 reduce 示例存在逻辑错误（data.find(order => order == currentOrder) 无法匹配对象），实际应采用 按 ORDER 分组 + 按日期对齐 的双层映射策略：
// 1. 提取唯一日期（作为 X 轴标签），保持原始顺序
const dates = [...new Set(data.map(item => item.DATE))].sort((a, b) => new Date(a) - new Date(b));
// 2. 按 ORDER 分组数据，并构建每个 ORDER 对应的 HOURS 数组（严格按 dates 顺序）
const allOrders = [...new Set(data.map(item => item.ORDER))];
const datasets = allOrders.map(order => {
// 为当前 ORDER 创建与 dates 等长的 HOURS 数组，缺失日期填 0 或 null
const hoursArray = dates.map(date => {
const record = data.find(item => item.ORDER === order && item.DATE === date);
return record ? parseFloat(record.HOURS) || 0 : 0; // 容错：转数字，空值设为 0
});
return {
label: `ORDER ${order}`,
data: hoursArray,
borderColor: `hsl(${Math.random() * 360}, 70%, 60%)`,
backgroundColor: `hsla(${Math.random() * 360}, 70%, 60%, 0.1)`,
fill: false,
tension: 0.3
};
});
// 3. 构建完整 chart 配置
const config = {
type: 'line',
data: {
labels: dates,
datasets: datasets
},
options: {
responsive: true,
plugins: {
title: { display: true, text: '各订单工时趋势' }
},
scales: {
y: { beginAtZero: true, title: { display: true, text: '工时 (h)' } }
}
}
};
// 4. 初始化图表（或更新已有实例）
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, config);⚠️ 注意事项与最佳实践
- 日期排序必须显式处理：Set 不保证插入顺序，务必用 sort() 按时间升序排列，否则图表 X 轴错乱；
- 数值转换不可省略：HOURS 是字符串，需 parseFloat() 转为数字，否则 Chart.js 可能渲染异常或报错；
- 缺失值处理：若某 ORDER 在某日期无记录，建议填充 0（而非 null/undefined），避免折线中断；如需留空缺口，可填 null 并配置 spanGaps: false；
-
动态更新图表：若后续需追加/修改数据，切勿直接修改 datasets 数组，而应调用：
myChart.data.datasets = newDatasets; // 替换整个 datasets myChart.data.labels = newLabels; myChart.update('active'); // 触发重绘，'active' 表示动画过渡 -
性能优化：当数据量大时，避免在 map 中反复 find；可预先构建 Map<ORDER, Map<DATE, HOURS>> 索引：
const orderDateMap = new Map(); data.forEach(item => { if (!orderDateMap.has(item.ORDER)) orderDateMap.set(item.ORDER, new Map()); orderDateMap.get(item.ORDER).set(item.DATE, parseFloat(item.HOURS) || 0); }); // 后续按 dates 遍历时直接查 Map，O(1) 查找
通过以上结构化重组，你即可彻底告别手动声明 HOURS1、HOURS2… 的硬编码方式，实现任意数量 ORDER 的全自动图表渲染，同时保障数据准确性与图表响应性。
