如何基于指定字段转换JavaScript对象以适配Highcharts多折线图输入

实现方案 #

核心思路 #

• 先提取所有唯一日期并按时间升序排序，作为X轴基准，保证所有系列的data数组长度和日期顺序一致
• 对原始数据按ID分组，缓存每个ID对应各日期的计数值
• 遍历每个ID，基于唯一日期数组生成data字段，匹配到计数值则填充，否则填null

完整代码 #

const data = [{"date":"1997-09-29","Count":100,"ID":"AB12-R"},{"date":"1997-12-30","Count":104.7,"ID":"AB13-R"},{"date":"1997-12-30","Count":1192,"ID":"BA12-R"},{"date":"1998-03-30","Count":981,"ID":"BA12-R"},{"date":"1998-06-01","Count":341,"ID":"BA12-R"}];

// 提取去重后按时间升序排列的日期数组
const uniqueDates = [...new Set(data.map(item => item.date))].sort((a, b) => new Date(a) - new Date(b));

// 按ID分组存储日期和计数的映射
const idGroup = {};
data.forEach(item => {
  if (!idGroup[item.ID]) {
    idGroup[item.ID] = {};
  }
  idGroup[item.ID][item.date] = item.Count;
});

// 生成Highcharts要求的系列数据
const result = Object.entries(idGroup).map(([id, dateCountMap]) => ({
  Identiy: id,
  data: uniqueDates.map(date => dateCountMap[date] ?? null)
}));

console.log(result);

兼容说明 #

如果运行环境不支持ES2020的空值合并运算符??，可将dateCountMap[date] ?? null替换为：

dateCountMap.hasOwnProperty(date) ? dateCountMap[date] : null

可以避免0等合法计数值被误判为不存在。

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