Node.js按天和小时分组ISO日期 适配Chart.js折线图绘制

1. 同天同小时日期分组逻辑 #

核心思路是为每条ISO日期生成天+小时维度的唯一分组键，将相同键的数据归为同一组。针对标准UTC格式的ISO日期字符串，直接截断到小时位即可快速生成分组键，无需额外做日期转换。

// 原始数据源
const rawData = [
  { date: '2022-06-10T07:32:07.744Z' },
  { date: '2022-06-10T08:32:38.490Z' },
  { date: '2022-06-10T07:32:58.720Z' },
  { date: '2022-06-10T07:33:25.121Z' },
  { date: '2022-06-10T07:35:18.556Z' },
  { date: '2022-06-10T07:35:56.459Z' },
  { date: '2022-06-10T07:36:38.736Z' },
  { date: '2022-06-10T07:36:38.736Z' }
];

const groupMap = {};
rawData.forEach(item => {
  // 截取字符串前13位，得到 YYYY-MM-DDTHH 格式的分组键，精确到小时
  const hourKey = item.date.slice(0, 13);
  if (!groupMap[hourKey]) groupMap[hourKey] = [];
  groupMap[hourKey].push(item);
});

// 组装Chart.js需要的数据集，标签按时间升序排列
const chartLabels = Object.keys(groupMap).sort();
const chartData = chartLabels.map(key => groupMap[key].length);

针对示例数据，分组后结果如下：

• 分组键2022-06-10T07：共匹配7条数据
• 分组键2022-06-10T08：共匹配1条数据

2. 折线图渲染配置 #

拿到分组后的标签和数据后，直接传入Chart.js实例即可完成渲染：

// 替换为你页面上的canvas元素上下文
const ctx = document.getElementById('lineChartDom').getContext('2d');
new Chart(ctx, {
  type: 'line',
  data: {
    labels: chartLabels,
    datasets: [{
      label: '小时级数据统计',
      data: chartData,
      borderColor: '#1677ff',
      backgroundColor: 'rgba(22, 119, 255, 0.1)',
      fill: true,
      tension: 0.3,
      pointRadius: 4,
      pointHoverRadius: 6
    }]
  },
  options: {
    responsive: true,
    scales: {
      x: {
        title: { display: true, text: '时间（小时粒度）' }
      },
      y: {
        beginAtZero: true,
        title: { display: true, text: '数据条数' }
      }
    }
  }
});

业务涉及时区转换时，不要直接截断ISO字符串，需先将日期转换为对应时区的时间对象，再格式化生成年-月-日 小时格式的分组键，避免UTC时间与业务时区不一致导致分组错误。

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