如何为Chart.js动态整理SQL返回的订单工时数据

核心思路 #

先把原始数据按订单编号分组，再基于统一的日期轴生成每个订单的工时数组，最后直接组装成Chart.js所需的数据集格式，避免手动保存单个数组的麻烦。

步骤与代码实现 #

假设你从SQL拿到的原始JSON数据结构如下：

const rawWorkData = [
  { DATE: '2024-03-01', HOURS: 2.5, ORDER: 'ORD-001' },
  { DATE: '2024-03-01', HOURS: 3, ORDER: 'ORD-002' },
  { DATE: '2024-03-02', HOURS: 4, ORDER: 'ORD-001' },
  { DATE: '2024-03-02', HOURS: 1.5, ORDER: 'ORD-002' },
  { DATE: '2024-03-03', HOURS: 1, ORDER: 'ORD-001' },
  { DATE: '2024-03-03', HOURS: 5, ORDER: 'ORD-002' }
];

1. 按订单分组原始数据
   用reduce把分散的记录聚合到对应订单下，方便后续按订单提取工时：

const groupedByOrder = rawWorkData.reduce((result, item) => {
  // 若当前订单还未在分组对象中，初始化空数组
  if (!result[item.ORDER]) {
    result[item.ORDER] = [];
  }
  result[item.ORDER].push(item);
  return result;
}, {});

执行后得到的groupedByOrder结构为：

{
  "ORD-001": [/* 该订单的所有日期工时记录 */],
  "ORD-002": [/* 该订单的所有日期工时记录 */]
}

2. 提取统一日期轴
   因为同项目内日期范围和数量一致，直接取任意一个订单的日期并排序（确保x轴顺序正确）：

// 取第一个订单的记录生成日期数组并排序
const dateLabels = Object.values(groupedByOrder)[0]
  .map(item => item.DATE)
  .sort((a, b) => new Date(a) - new Date(b));

3. 生成Chart.js数据集
   循环分组后的订单，按日期轴的顺序匹配对应工时，直接组装成Chart.js需要的数据集格式：

const chartDatasets = Object.entries(groupedByOrder).map(([orderNo, records]) => {
  // 按日期轴顺序提取对应工时，无数据时补0避免报错
  const hoursData = dateLabels.map(date => {
    const matchedRecord = records.find(record => record.DATE === date);
    return matchedRecord ? matchedRecord.HOURS : 0;
  });

  return {
    label: `订单 ${orderNo}`,
    data: hoursData,
    borderColor: `hsl(${Math.floor(Math.random() * 360)}, 70%, 50%)`, // 自动生成区分颜色
    fill: false,
    tension: 0.1
  };
});

4. 初始化Chart.js折线图
   把日期轴和数据集直接传入Chart配置即可：

const chartCtx = document.getElementById('workHoursChart').getContext('2d');
new Chart(chartCtx, {
  type: 'line',
  data: {
    labels: dateLabels,
    datasets: chartDatasets
  },
  options: {
    responsive: true,
    scales: {
      y: {
        beginAtZero: true,
        title: { display: true, text: '工时' }
      },
      x: { title: { display: true, text: '日期' } }
    }
  }
});

关键注意点 #

• 务必对日期数组排序：如果原始数据的日期不是按时间顺序返回的，排序能保证折线图的x轴逻辑正确
• 缺失数据补0：若某订单在某天无工时记录，用0填充避免Chart.js渲染出错
• 无需单独保存数组：直接通过map生成数据集数组，一步到位传给Chart.js，省去手动存储单个订单工时数组的麻烦

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