如何将返回的JSON数据转换为Highcharts所需的series格式？

嘿，这个需求很常见，就是把扁平的数组按名称分组，转换成Highcharts需要的series结构对吧？我给你用原生JavaScript和jQuery分别写个实现，逻辑都很清晰，你一看就懂～

首先注意下你提供的原始JSON里有个多余的逗号（, , {），这会导致语法错误，我已经在示例里修正了，实际使用时要确保接口返回合法的JSON哦。

原生JavaScript实现 #

这是最轻量化的方案，不需要依赖任何库：

// 修正后的原始接口数据
const rawData = [{"id":1,"name":"AAA","value":5}, {"id":1,"name":"BBB","value":8}, {"id":1,"name":"CCC","value":9}, {"id":1,"name":"AAA","value":15}, {"id":1,"name":"BBB","value":3}, {"id":1,"name":"CCC","value":5}, {"id":1,"name":"AAA","value":3}, {"id":1,"name":"BBB","value":10}, {"id":1,"name":"CCC","value":11}];

// 用一个临时对象做分组映射，键是name，值是对应的series项
const groupMap = {};

// 遍历原始数据
rawData.forEach(item => {
  // 跳过无效条目（比如空对象、缺少name/value的情况）
  if (!item || !item.name || typeof item.value === 'undefined') return;
  
  // 如果当前name还没在映射里，就初始化一个series项
  if (!groupMap[item.name]) {
    groupMap[item.name] = {
      name: item.name,
      data: []
    };
  }
  
  // 把当前值推入对应分组的data数组
  groupMap[item.name].data.push(item.value);
});

// 把映射对象的values提取出来，就是Highcharts需要的series数组
const series = Object.values(groupMap);

console.log(series);
// 输出结果：[{ name: 'AAA', data: [5, 15, 3] }, { name: 'BBB', data: [8, 3, 10] }, { name: 'CCC', data: [9, 5, 11] }]

jQuery实现 #

如果你的项目已经引入了jQuery，也可以用$.each来遍历，逻辑和原生完全一致：

// 修正后的原始接口数据
const rawData = [{"id":1,"name":"AAA","value":5}, {"id":1,"name":"BBB","value":8}, {"id":1,"name":"CCC","value":9}, {"id":1,"name":"AAA","value":15}, {"id":1,"name":"BBB","value":3}, {"id":1,"name":"CCC","value":5}, {"id":1,"name":"AAA","value":3}, {"id":1,"name":"BBB","value":10}, {"id":1,"name":"CCC","value":11}];

const groupMap = {};

// 使用jQuery的each方法遍历数组
$.each(rawData, function(index, item) {
  // 同样跳过无效条目
  if (!item || !item.name || typeof item.value === 'undefined') return;
  
  if (!groupMap[item.name]) {
    groupMap[item.name] = {
      name: item.name,
      data: []
    };
  }
  
  groupMap[item.name].data.push(item.value);
});

const series = Object.values(groupMap);

核心思路就是用对象做中间分组容器，利用对象键的唯一性来聚合相同名称的数据，最后把对象的值转换成数组就是Highcharts需要的格式啦～

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