Chart.js中Epoch时间戳序列按月分组求和的实现问题

关于round属性的作用说明 #

是的，你对time.round属性的理解存在偏差。
round配置仅作用于X轴时间刻度的渲染逻辑：它只会把每个数据点的时间值在绘制时就近对齐到指定的时间单位刻度上，不会修改原始数据集，也不会自动对同刻度下的Y轴数值做聚合运算。
你当前的配置只是把多个不同时间点都对齐到了同一个月份的X轴位置，每个点的Y值还是独立的1，自然不会自动生成月度总和。

实现月度统计的解决方案 #

Chart.js本身不提供数据聚合能力，你需要提前对原始时间戳按月份做聚合，生成聚合后的数据集再传入组件，参考实现代码如下：

// 原始时间戳数组
const rawTimestamps = [1432317109519, 1432318109519, 1432319109519]
const monthCountMap = {}

rawTimestamps.forEach(ts => {
  // 取时间戳对应月份首日0点的时间戳作为分组唯一标识
  const date = new Date(ts)
  const monthKey = new Date(date.getFullYear(), date.getMonth(), 1).valueOf()
  // 累计当月计数
  monthCountMap[monthKey] = (monthCountMap[monthKey] || 0) + 1
})

// 转换为Chart.js可识别的数据集格式
const chartData = Object.entries(monthCountMap).map(([x, y]) => ({
  x: Number(x),
  y: y
}))

后续配置调整 #

聚合完成后，原配置中的round: 'month'可以直接移除，仅保留time.unit: 'month'即可正常展示月度汇总数据。 #

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