Chart.js传入带日期数据并展示完整时间轴的优化方案咨询

核心思路是用哈希映射存储已有日期的对应数据，避免嵌套循环比对，时间复杂度从原方案的O(n*m)降到O(n+m)，哪怕是一年的长周期也能快速处理，具体步骤如下：

• 预处理原始数据，生成以日期为键、指标值为值的映射，仅需遍历1次原始数据

  const rawData = [{'date': '15/06', 'bought': 2}, {'date': '17/06', 'bought': 5}];
  // 用Map存映射，查询效率远高于数组遍历比对
  const dataMap = new Map(rawData.map(item => [item.date, item.bought]));
  

• 生成需要展示的完整x轴日期序列，周/月/年跨度都可以用日期工具函数（或自行循环生成）

  // 示例为一周的完整日期序列，可按需替换为任意长度的日期范围
  const fullDateRange = ['14/06','15/06','16/06','17/06','18/06','19/06','20/06'];
  

• 遍历完整日期序列补全数据集，仅需遍历1次完整日期序列，缺值可按需填0或null

  const fullDataset = fullDateRange.map(date => ({
    date,
    // 存在对应日期的取值，不存在默认返回0，要断折线的话可以换成null
    bought: dataMap.get(date) ?? 0
  }));
  

如果用Chart.js的原生时间轴，还有更省事的方案：

直接把x轴类型设为time，配置min为时间周期的起始日期、max为结束日期，就算原始数据缺日期，Chart.js也会自动渲染完整的x轴时间范围，不需要手动补全数据集。需要控制折线断点的话，可搭配spanGaps参数使用，适合长跨度时间场景使用。

内容的提问来源于stack exchange，提问作者Brendan O'Shea