ChartJS单天多条同日期数据是否支持自动取平均值展示

ChartJS 本身没有内置自动按X轴维度聚合数据、计算平均值的功能，你需要在把数据传入Chart实例之前自行完成聚合逻辑。

ChartJS的底层渲染逻辑是1:1映射传入的数据集条目，只要X轴字段值完全一致，就会将对应数据点渲染在同一个横轴刻度位置，不会自动执行任何聚合操作（包括求和、平均、去重等）。

你可以参考以下简单的单日平均值聚合逻辑处理原始数据：

function aggregateDailyData(rawData) {
  const dailyRecordMap = {}
  rawData.forEach(item => {
    const dateKey = item.x
    const numValue = Number(item.y)
    // 初始化单日记录容器
    if (!dailyRecordMap[dateKey]) {
      dailyRecordMap[dateKey] = { totalValue: 0, recordCount: 0 }
    }
    dailyRecordMap[dateKey].totalValue += numValue
    dailyRecordMap[dateKey].recordCount += 1
  })
  // 转换为ChartJS支持的数据集格式
  return Object.entries(dailyRecordMap).map(([date, record]) => ({
    x: date,
    y: (record.totalValue / record.recordCount).toFixed(2)
  }))
}

// 代入你提供的示例数据测试
const rawData = [    
  {x: '2021-09-21', y: '30.00'},
  {x: '2021-09-22', y: '65.00'},
  {x: '2021-09-23', y: '48.00'},
  {x: '2021-09-23', y: '25.00'},
  {x: '2021-09-24', y: '55.00'},
]
const processedChartData = aggregateDailyData(rawData)

处理后2021-09-23对应的数值会计算为36.50，传入ChartJS后就不会出现同刻度数据重叠的问题。

如果你不需要取平均值，希望展示同一天的所有录入数据，可以给X值补充时分秒维度，将X轴配置为时间类型，ChartJS会自动按照完整时间戳调整数据点的横轴位置。

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